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}>
+      <Box sx={{ flex: 1, overflowY: "hidden", minHeight: 0 }}>
         {loading && !loaded ? (
-        <Box width="100%" height="100%" alignContent={"center"} textAlign={"center"} >
+          <Box width="100%" height="100%" alignContent="center" textAlign="center">
             <CircularProgress />
           </Box>
         ) : (
-        <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 />
         <ChatInput newNoteMethod={showNewNotes} objectKey={objectKey} type={type} />
       </Box>
     </Box>
-      )}
-    </React.Fragment>
   );
 }