From c406c45b4efbca06cd576a3ce4a69c94f58c31b0 Mon Sep 17 00:00:00 2001
From: Matthew WIlkinson <matt@zenshop.app>
Date: Sat, 16 Dec 2023 16:01:50 +0000
Subject: [PATCH] a

---
 app/components/channel-feed.jsx     | 129 +++++++++++++---------------
 app/components/channel-message.jsx  |   2 +-
 app/components/channel-replybox.jsx |  12 ++-
 3 files changed, 73 insertions(+), 70 deletions(-)

diff --git a/app/components/channel-feed.jsx b/app/components/channel-feed.jsx
index fc7b9cc..3bee91f 100644
--- a/app/components/channel-feed.jsx
+++ b/app/components/channel-feed.jsx
@@ -20,7 +20,6 @@ export default function ChannelFeed(props) {
 
     const channelId = channel.id;
 
-    const channelFetcher = useFetcher({ key: `channel-${channelId}` });
     const messagesFetcher = useFetcher({ key: `messages-${channelId}` });
 
     const [remainingMessages, setRemainingMessages] = useState(channel.remaining_messages);
@@ -40,6 +39,62 @@ export default function ChannelFeed(props) {
 
     const [replyingTo, setReplyingTo] = useState(null);
 
+    const addMessageOptimistically = (data) => {
+        let newMessages = [...messages];
+
+        const { text, parentMessage, localFiles, user } = data;
+
+        const files = localFiles ?? [];
+
+        if (newMessages.length > 0) {
+            const idx = newMessages.length - 1;
+            const last = newMessages[idx];
+
+            if (last.user.handle == user.handle && !parentMessage && files.length == 0 && (!last.files || last.files.length == 0)) {
+                const cp = [...newMessages];
+
+                cp[idx] = {
+                    id: last.id,
+                    optimistic: true,
+                    created_at: last.created_at,
+                    updated_at: last.updated_at,
+                    text: `${last.text}\n${text}`,
+                    user: user,
+                    edited: last.edited,
+                    reactions: last.reactions,
+                    files: files,
+                };
+
+                newMessages = cp;
+            } else {
+                newMessages = [...messages, {
+                    id: Date().toString(),
+                    optimistic: true,
+                    text: text,
+                    user: user,
+                    edited: false,
+                    parent: parentMessage,
+                    files: files,
+                }];
+            }
+        } else {
+            newMessages = [{
+                id: Date().toString(),
+                optimistic: true,
+                text: text,
+                user: user,
+                edited: false,
+                parent: parentMessage,
+                files: files,
+            }];
+        }
+
+        setMessages(newMessages, () => {
+            const feed = feedRef.current;
+            feed.scrollTop = feed.scrollHeight;
+        });
+    };
+
     useEffect(() => {
         if (lastJsonMessage?.topic == channelId) {
             try {
@@ -50,11 +105,11 @@ export default function ChannelFeed(props) {
                     const idx = messages.length - 1;
                     const prev = messages[idx];
 
-                    if ((!!prev.optimistic && prev.user.handle == update.user.handle) || prev.id == update.id) {
+                    if (update.updated_at == prev.updated_at) {
+                        return;
+                    }
 
-                        if (update.updated_at == prev.updated_at) {
-                            return;
-                        }
+                    if (prev.id == update.id) {
 
                         let mp = [...messages];
 
@@ -99,69 +154,6 @@ export default function ChannelFeed(props) {
         });
     }, [channelId]);
 
-    useEffect(() => {
-        const user = channel.user;
-
-        const action = channelFetcher.formData?.get("__action");
-
-        let newMessages = [...messages];
-
-        if (action === "create_message" && !!user) {
-
-            const { text, parentMessage, localFiles } = JSON.parse(channelFetcher.formData.get("input"));
-
-            const files = localFiles ?? [];
-
-            if (newMessages.length > 0) {
-                const idx = newMessages.length - 1;
-                const last = newMessages[idx];
-
-                if (last.user.handle == user.handle && !parentMessage && files.length == 0 && (!last.files || last.files.length == 0)) {
-                    const cp = [...newMessages];
-
-                    cp[idx] = {
-                        id: last.id,
-                        optimistic: true,
-                        created_at: last.created_at,
-                        updated_at: last.updated_at,
-                        text: `${last.text}\n${text}`,
-                        user: user,
-                        edited: last.edited,
-                        reactions: last.reactions,
-                        files: files,
-                    };
-                    newMessages = cp;
-                } else {
-                    newMessages = [...messages, {
-                        id: Date().toString(),
-                        optimistic: true,
-                        text: text,
-                        user: user,
-                        edited: false,
-                        parent: parentMessage,
-                        files: files,
-                    }];
-                }
-            } else {
-                newMessages = [{
-                    id: Date().toString(),
-                    optimistic: true,
-                    text: text,
-                    user: user,
-                    edited: false,
-                    parent: parentMessage,
-                    files: files,
-                }];
-            }
-
-            setMessages(newMessages, () => {
-                const feed = feedRef.current;
-                feed.scrollTop = feed.scrollHeight;
-            });
-
-        }
-    }, [channelFetcher, messages]);
-
     useEffect(() => {
         if (!fetchingMore) {
             return;
@@ -280,6 +272,7 @@ export default function ChannelFeed(props) {
             <span style={{ height: 300 }} ref={end} />
             <div className="wk-blur-box">
                 <ChannelReplybox
+                    addMessageOptimistically={addMessageOptimistically}
                     community={community}
                     channel={channel}
                     replyingTo={replyingTo}
diff --git a/app/components/channel-message.jsx b/app/components/channel-message.jsx
index 7e27afe..11818b4 100644
--- a/app/components/channel-message.jsx
+++ b/app/components/channel-message.jsx
@@ -68,7 +68,7 @@ export default function ChannelMessage(props) {
         setEdited(message.edited);
         setReactions(message.reactions ?? {});
         setFiles(message.files ?? []);
-    }, [message.updated_at]);
+    }, [message]);
 
     const rk = Object.keys(reactions);
 
diff --git a/app/components/channel-replybox.jsx b/app/components/channel-replybox.jsx
index 21782f3..f94d722 100644
--- a/app/components/channel-replybox.jsx
+++ b/app/components/channel-replybox.jsx
@@ -36,7 +36,7 @@ function getVideoCover(file, seekTo = 0.0) {
 
 export default function ChannelReplybox(props) {
 
-    const { channel, community, replyingTo, setReplyingTo, files, setFiles, dragging } = props;
+    const { channel, community, replyingTo, setReplyingTo, files, setFiles, dragging, addMessageOptimistically } = props;
 
     const [filePreviews, setFilePreviews] = useState([]);
 
@@ -102,6 +102,16 @@ export default function ChannelReplybox(props) {
             fetcherKey: `channel-${channel.id}`
         });
 
+        addMessageOptimistically({
+            user: channel.user,
+            text: trimmed,
+            channelId: channel.id,
+            communityHandle: community.handle,
+            parentId: replyingTo?.messageId,
+            parentMessage: replyingTo?.message,
+            localFiles: localFiles,
+        })
+
         restoreDefaults();
     }, [text, channel, community, replyingTo, files]);