Merge pull request #3017 from tloncorp/lb/fix-rsvp

dms: smoother joins & leaves
tloncorp · Nov 20, 2023 · 9ce0c9f · 9ce0c9f
2 parents be53bd1 + 125575b
commit 9ce0c9f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 18 deletions.
diff --git a/ui/src/state/chat/chat.ts b/ui/src/state/chat/chat.ts
@@ -48,6 +48,8 @@ import emptyMultiDm, {
   appendWritToLastPage,
   buildCachedWrit,
   buildWritPage,
+  removePendingFromCache,
+  removeUnreadFromCache,
 } from './utils';
 
 export interface State {
@@ -745,9 +747,8 @@ export function useMarkDmReadMutation() {
   });
 }
 
-const emptyUnreads: DMUnreads = {};
-const dmUnreadsKey = ['dm', 'unreads'];
 export function useDmUnreads() {
+  const dmUnreadsKey = ['dms', 'unreads'];
   const { mutate: markDmRead } = useMarkDmReadMutation();
   const invalidate = useRef(
     _.debounce(
@@ -790,10 +791,14 @@ export function useDmUnreads() {
     path: '/unreads',
     scry: '/unreads',
     onEvent: eventHandler,
+    options: {
+      retryOnMount: true,
+      refetchOnMount: true,
+    },
   });
 
   return {
-    data: data || emptyUnreads,
+    data: data || {},
     ...query,
   };
 }
@@ -876,25 +881,17 @@ export function useDmRsvpMutation() {
     mutationFn,
     onMutate: (variables) => {
       const { ship, accept } = variables;
-      queryClient.setQueryData(
-        ['dms', 'unreads'],
-        (unreads: DMUnreads | undefined) => {
-          if (!unreads) {
-            return unreads;
-          }
-
-          const newUnreads = { ...unreads };
-
-          if (!accept) {
-            delete newUnreads[ship];
-          }
 
-          return newUnreads;
-        }
-      );
+      // optimistic updates
+      if (accept) {
+        removePendingFromCache(queryClient, ship);
+      } else {
+        removeUnreadFromCache(queryClient, ship);
+      }
     },
     onSettled: (_data, _error, variables) => {
       queryClient.invalidateQueries(['dms', 'unreads']);
+      queryClient.invalidateQueries(['dms', 'pending']);
       queryClient.invalidateQueries(['dms', 'dms']);
       queryClient.invalidateQueries(['dms', variables.ship]);
     },
@@ -1038,8 +1035,19 @@ export function useMutliDmRsvpMutation() {
 
   return useMutation({
     mutationFn,
+    onMutate: (variables) => {
+      const { id, accept } = variables;
+
+      // optimistic updates
+      if (accept) {
+        removePendingFromCache(queryClient, id);
+      } else {
+        removeUnreadFromCache(queryClient, id);
+      }
+    },
     onSettled: (_data, _error, variables) => {
       queryClient.invalidateQueries(['dms', 'unreads']);
+      queryClient.invalidateQueries(['dms', 'pending']);
       queryClient.invalidateQueries(['dms', 'multi']);
       queryClient.invalidateQueries(['dms', variables.id]);
     },

diff --git a/ui/src/state/chat/utils.ts b/ui/src/state/chat/utils.ts
@@ -7,6 +7,7 @@ import {
 } from '@/types/channel';
 import {
   Club,
+  DMUnreads,
   PagedWrits,
   ReplyDelta,
   Writ,
@@ -15,6 +16,7 @@ import {
   WritMemo,
   WritSeal,
 } from '@/types/dms';
+import { QueryClient } from '@tanstack/react-query';
 import { udToDec } from '@urbit/api';
 import { formatUd, unixToDa } from '@urbit/aura';
 import bigInt from 'big-integer';
@@ -33,6 +35,34 @@ export default function emptyMultiDm(): Club {
   };
 }
 
+export function removePendingFromCache(queryClient: QueryClient, id: string) {
+  queryClient.setQueryData(
+    ['dms', 'pending'],
+    (pending: string[] | undefined) => {
+      if (!pending) {
+        return pending;
+      }
+      return pending.filter((p) => p !== id);
+    }
+  );
+}
+
+export function removeUnreadFromCache(queryClient: QueryClient, id: string) {
+  queryClient.setQueryData(
+    ['dms', 'unreads'],
+    (unreads: DMUnreads | undefined) => {
+      if (!unreads) {
+        return unreads;
+      }
+
+      const newUnreads = { ...unreads };
+      delete newUnreads[id];
+
+      return newUnreads;
+    }
+  );
+}
+
 interface PageParam {
   time: BigInteger;
   direction: string;