nice updating history if we get more clips

packages/desktop/src/components/Terminal.tsx

@@ -66,7 +66,13 @@ import { User } from '@nirvana/core/src/models/user.model';
 import { onSnapshot, Unsubscribe } from 'firebase/firestore';
 
 import NirvanaAvatar from './NirvanaAvatar';
-import { useDebounce, useEffectOnce, useKeyPressEvent } from 'react-use';
+import {
+  useDebounce,
+  useEffectOnce,
+  useKeyPressEvent,
+  useUnmount,
+  useUnmountPromise,
+} from 'react-use';
 
 import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 import Channels from '../electron/constants';
@@ -146,47 +152,23 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
   const [userMap, updateUserMap] = useImmer<UserMap>({});
   const [conversationContentMap, updateContentMap] = useImmer<ConversationContentMap>({});
 
-  // fetch conversations
-  useEffect(() => {
-    const unsub = onSnapshot(getConversationsQueryLIVE(user.uid), (querySnapshot) => {
-      const conversations = querySnapshot.docs.map((doc) => doc.data());
-
-      console.log('got new or updated conversations', conversations);
-
-      updateConversationMap((draft) => {
-        querySnapshot.docChanges().forEach((docChange) => {
-          const currentConversation = docChange.doc.data();
-
-          if (docChange.type === 'added') {
-            console.log('New conversation: ', currentConversation);
-            draft[currentConversation.id] = currentConversation;
-          }
-          if (docChange.type === 'modified') {
-            console.log('Modified conversation: ', currentConversation);
-            draft[currentConversation.id] = currentConversation;
-          }
-          if (docChange.type === 'removed') {
-            console.log('Removed conversation: ', currentConversation);
-            delete draft[currentConversation.id];
-          }
-        });
-      });
-
-      enqueueSnackbar('fetched conversations', { variant: 'success' });
-    });
-
-    return () => unsub();
-  }, [user, updateConversationMap, enqueueSnackbar]);
-
   const [contentListeners, setContentListeners] = useImmer<{
     [conversationId: string]: Unsubscribe;
   }>({});
-  // cached listeners for all content blocks of specific conversations?
+
-  useEffect(() => {
+  // TODO: put in a custom hook to separate out logic
-    // go through all conversations
+  const addConversationContentListener = useCallback(
-    Object.keys(conversationMap).forEach((conversationId) => {
+    (conversationId: string) => {
+      // ?optimization
+      // ? only start listening to conversation content where it is in my priority box?
+      // ? all other conversations, just fetch periodically?
+
+      // TODO: future work/optimization
+      // if we removed a conversation, unsubscribe from content listener as well
+
+      setContentListeners((draftListeners) => {
         // if we have a listener for conversation already, then just move on
-      if (contentListeners[conversationId]) return;
+        if (draftListeners[conversationId]) return;
 
         // if we don't, then create one for this conversation
         const contentListener = onSnapshot(
@@ -217,22 +199,50 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
         );
 
         //add to map of listeners
-      setContentListeners((draftListeners) => {
         draftListeners[conversationId] = contentListener;
       });
+    },
+    [setContentListeners, updateContentMap, enqueueSnackbar],
+  );
+
+  // fetch conversations
+  useEffect(() => {
+    const unsub = onSnapshot(getConversationsQueryLIVE(user.uid), (querySnapshot) => {
+      const conversations = querySnapshot.docs.map((doc) => doc.data());
+
+      console.log('got new or updated conversations', conversations);
+
+      updateConversationMap((draft) => {
+        querySnapshot.docChanges().forEach((docChange) => {
+          const currentConversation = docChange.doc.data();
+
+          if (docChange.type === 'added') {
+            console.log('New conversation: ', currentConversation);
+            draft[currentConversation.id] = currentConversation;
+
+            addConversationContentListener(currentConversation.id);
+          }
+          if (docChange.type === 'modified') {
+            console.log('Modified conversation: ', currentConversation);
+            draft[currentConversation.id] = currentConversation;
+          }
+          if (docChange.type === 'removed') {
+            console.log('Removed conversation: ', currentConversation);
+            delete draft[currentConversation.id];
+          }
+        });
       });
 
-    // ?optimization
+      enqueueSnackbar('fetched conversations', { variant: 'success' });
-    // ? only start listening to conversation content where it is in my priority box?
+    });
-    // ? all other conversations, just fetch periodically?
 
-    // TODO: future work/optimization
+    return () => unsub();
-    // if we removed a conversation, unsubscribe from content listener as well
+  }, [user, updateConversationMap, enqueueSnackbar, addConversationContentListener]);
 
-    return () => {
+  // on unmount, get rid of all content listeners
+  useUnmount(() => {
     Object.values(contentListeners).forEach((unsub) => unsub());
-    };
+  });
-  }, [conversationMap, updateContentMap, enqueueSnackbar, setContentListeners, contentListeners]);
 
   // cache of selected conversation
   const selectedConversation: Conversation | undefined = useMemo(() => {