Merge pull request #3584 from tloncorp/hm/fix-unclickable-sidebar

sidebar: unclickable pins and unable to pin chats
tloncorp · Jun 10, 2024 · 4672874 · 4672874
2 parents 93e0ff4 + 4bfe491
commit 4672874
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/apps/tlon-web/src/chat/ChatThread/ChatThread.tsx b/apps/tlon-web/src/chat/ChatThread/ChatThread.tsx
@@ -80,10 +80,13 @@ export default function ChatThread() {
   const { post: note, isLoading } = usePost(nest, idTime!);
   const time = formatUd(bigInt(idTime!));
   const id = note ? `${note.essay.author}/${time}` : '';
-  const msgKey = {
-    id,
-    time: formatUd(bigInt(idTime!)),
-  };
+  const msgKey = useMemo(
+    () => ({
+      id,
+      time: formatUd(bigInt(idTime!)),
+    }),
+    [id, idTime]
+  );
   const chatUnreadsKey = getThreadKey(flag, time);
   const { markRead } = useMarkChannelRead(nest, msgKey);
   const replies = note?.seal.replies || null;

diff --git a/apps/tlon-web/src/dms/DMOptions.tsx b/apps/tlon-web/src/dms/DMOptions.tsx
@@ -77,11 +77,12 @@ export default function DmOptions({
       : chatUnread.combined;
   const hasNotify = !!unread.notify;
   const hasActivity = pending || unread.status === 'unread';
+  const key = whomIsFlag(whom) ? `chat/${whom}` : whom;
   const { mutate: leaveChat } = useLeaveMutation();
   const { mutateAsync: addPin } = useAddPinMutation();
   const { mutateAsync: delPin } = useDeletePinMutation();
   const { mutate: archiveDm } = useArchiveDm();
-  const { markRead: markReadChannel } = useMarkChannelRead(`chat/${whom}`);
+  const { markRead: markReadChannel } = useMarkChannelRead(key);
   const { markDmRead } = useMarkDmReadMutation(whom);
   const { mutate: multiDmRsvp } = useMutliDmRsvpMutation();
   const { mutate: dmRsvp } = useDmRsvpMutation();
@@ -134,14 +135,14 @@ export default function DmOptions({
   const handlePin = useCallback(
     async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
       e.stopPropagation();
-      const isPinned = pinned.includes(whom);
+      const isPinned = pinned.includes(key);
       if (isPinned) {
-        await delPin({ pin: whom });
+        await delPin({ pin: key });
       } else {
-        await addPin({ pin: whom });
+        await addPin({ pin: key });
       }
     },
-    [whom, pinned, addPin, delPin]
+    [whom, key, pinned, addPin, delPin]
   );
 
   const handleInvite = () => {
@@ -216,7 +217,7 @@ export default function DmOptions({
     actions.push({
       key: 'pin',
       onClick: handlePin,
-      content: pinned.includes(whom) ? 'Unpin' : 'Pin',
+      content: pinned.includes(key) ? 'Unpin' : 'Pin',
     });
 
     if (isMulti) {

diff --git a/apps/tlon-web/src/dms/DMThread.tsx b/apps/tlon-web/src/dms/DMThread.tsx
@@ -78,10 +78,13 @@ export default function DMThread() {
     unreadsKey,
     markDmRead,
   });
-  const msgKey: MessageKey = {
-    id,
-    time: formatUd(bigInt(time)),
-  };
+  const msgKey: MessageKey = useMemo(
+    () => ({
+      id,
+      time: formatUd(bigInt(time)),
+    }),
+    [id, time]
+  );
 
   const isClub = ship ? (ob.isValidPatp(ship) ? false : true) : false;
   const club = useMultiDm(ship || '');