chat reloads with the selected team's chats

src/chat/Chat.tsx

@@ -77,35 +77,42 @@ export default function Chat(props: Props) {
   };
 
   useEffect(() => {
-    loadChats()
+    setChats([]);
-  }, []);
+    setLoaded(false);
+    setLoading(false);
+    setTotalMessages(0);
+  }, [objectKey]);
+
+  useEffect(() => {
+    if (chats.length === 0 && !loaded) {
+      loadChats();
+    }
+  }, [objectKey, chats, loaded]);
 
   const loadMore = () => {
     loadChats();
   };
 
   return (
-    <React.Fragment>
+    <Box className={classes.chatContainer}>
-      { loading && !loaded ? (
+      <Box sx={{ flex: 1, overflowY: "hidden", minHeight: 0 }}>
-        <Box width="100%" height="100%" alignContent={"center"} textAlign={"center"} >
+        {loading && !loaded ? (
-          <CircularProgress />
+          <Box width="100%" height="100%" alignContent="center" textAlign="center">
-        </Box>
+            <CircularProgress />
-      ) : (
-        <Box className={classes.chatContainer}>
-          <Box sx={{ flex: 1, overflowY: "hidden", minHeight: 0 }}>
-            <ChatOutput
-              totalMessages={totalMessages}
-              messages={chats}
-              removeNoteMethod={removeNote}
-              loadMore={loadMore}
-            />
           </Box>
-          <Box style={{ flexShrink: 0 }}>
+        ) : (
-            <Divider />
+          <ChatOutput
-            <ChatInput newNoteMethod={showNewNotes} objectKey={objectKey} type={type} />
+            totalMessages={totalMessages}
-          </Box>
+            messages={chats}
-        </Box>
+            removeNoteMethod={removeNote}
-      )}
+            loadMore={loadMore}
-    </React.Fragment>
+          />
+        )}
+      </Box>
+      <Box style={{ flexShrink: 0 }}>
+        <Divider />
+        <ChatInput newNoteMethod={showNewNotes} objectKey={objectKey} type={type} />
+      </Box>
+    </Box>
   );
 }