From fb1de01edd8caa1075678110e7c2f5682fd1c08c Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 14 Nov 2021 19:30:41 +0000
Subject: [PATCH] fix: remove removed messages from reply bar

fixes #71
fixes #143
---
 .../common/messaging/bars/ReplyBar.tsx        | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

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 (
         <div>
             {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 (
-                        <span>
-                            <Text id="app.main.channel.misc.failed_load" />
-                        </span>
-                    );
+                const message = messages[index];
+                if (!message) return null;
 
                 return (
                     <Base key={reply.id}>