diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx index c8c4aa8d..491e1f1a 100644 --- a/src/components/common/messaging/bars/ReplyBar.tsx +++ b/src/components/common/messaging/bars/ReplyBar.tsx @@ -81,10 +81,11 @@ const Base = styled.div` `; // ! FIXME: Move to global config -const MAX_REPLIES = 4; +const MAX_REPLIES = 5; export default observer(({ channel, replies, setReplies }: Props) => { - const client = useClient(); + const client = channel.client; + // Event listener for adding new messages to reply bar. useEffect(() => { return internalSubscribe("ReplyBar", "add", (_message) => { const message = _message as Message; @@ -107,26 +108,24 @@ export default observer(({ channel, replies, setReplies }: Props) => { }); }, [replies, setReplies, client.user]); - const renderer = getRenderer(channel); - if (renderer.state !== "RENDER") return null; + // Map all the replies to messages we are aware of. + const messages = replies.map((x) => client.messages.get(x.id)); - const ids = replies.map((x) => x.id); - const messages = renderer.messages.filter((x) => ids.includes(x._id)); + // Remove any replies which don't resolve to valid messages. + useEffect(() => { + if (messages.includes(undefined)) { + setReplies( + replies.filter((_, i) => typeof messages[i] !== "undefined"), + ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [messages, replies, setReplies]); return (
{replies.map((reply, index) => { - const message = messages.find((x) => reply.id === x._id); - // ! FIXME: better solution would be to - // ! have a hook for resolving messages from - // ! render state along with relevant users - // -> which then fetches any unknown messages - if (!message) - return ( - - - - ); + const message = messages[index]; + if (!message) return null; return (