Merge pull request #126 from nicolelim02/feat/communication

Add chat notification

Author: guanquann

frontend/src/components/Chat/index.tsx

@@ -21,6 +21,7 @@ type Message = {
 
 type ChatProps = {
   isActive: boolean;
+  setHasNewMessage: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const StyledTypography = styled(Typography)(({ theme }) => ({
@@ -31,7 +32,7 @@ const StyledTypography = styled(Typography)(({ theme }) => ({
   wordBreak: "break-word",
 }));
 
-const Chat: React.FC<ChatProps> = ({ isActive }) => {
+const Chat: React.FC<ChatProps> = ({ isActive, setHasNewMessage }) => {
   const [messages, setMessages] = useState<Message[]>([]);
   const [inputValue, setInputValue] = useState("");
   const match = useMatch();
@@ -68,6 +69,7 @@ const Chat: React.FC<ChatProps> = ({ isActive }) => {
     // initialize listener for incoming messages
     const listener = (message: Message) => {
       setMessages((prevMessages) => [...prevMessages, message]);
+      setHasNewMessage(true);
     };
     const errorListener = () => {
       if (!errorHandledRef.current) {

frontend/src/pages/CollabSandbox/index.tsx

@@ -1,5 +1,5 @@
 import AppMargin from "../../components/AppMargin";
-import { Box, Button, Grid2, Tab, Tabs } from "@mui/material";
+import { Badge, Box, Button, Grid2, Tab, Tabs } from "@mui/material";
 import classes from "./index.module.css";
 import { CompilerResult, useCollab } from "../../contexts/CollabContext";
 import { useMatch } from "../../contexts/MatchContext";
@@ -41,6 +41,7 @@ const CollabSandbox: React.FC = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const { selectedQuestion } = state;
   const [selectedTab, setSelectedTab] = useState<"tests" | "chat">("tests");
+  const [hasNewMessage, setHasNewMessage] = useState<boolean>(false);
   const [selectedTestcase, setSelectedTestcase] = useState(0);
   const [editorState, setEditorState] = useState<CollabSessionData | null>(
     null
@@ -169,7 +170,10 @@ const CollabSandbox: React.FC = () => {
           >
             <Tabs
               value={selectedTab}
-              onChange={(_, value) => setSelectedTab(value)}
+              onChange={(_, value) => {
+                setSelectedTab(value);
+                setHasNewMessage(false);
+              }}
               sx={(theme) => ({
                 position: "sticky",
                 top: 0,
@@ -179,7 +183,19 @@ const CollabSandbox: React.FC = () => {
               })}
             >
               <Tab label="Test Cases" value="tests" />
-              <Tab label="Chat" value="chat" />
+
+              <Tab
+                label={
+                  <Badge
+                    color="primary"
+                    variant="dot"
+                    invisible={!hasNewMessage || selectedTab === "chat"}
+                  >
+                    Chat
+                  </Badge>
+                }
+                value="chat"
+              />
             </Tabs>
 
             <TabPanel value={selectedTab} selected="tests">
@@ -211,7 +227,10 @@ const CollabSandbox: React.FC = () => {
               />
             </TabPanel>
             <TabPanel value={selectedTab} selected="chat">
-              <Chat isActive={selectedTab === "chat"} />
+              <Chat
+                setHasNewMessage={setHasNewMessage}
+                isActive={selectedTab === "chat"}
+              />
             </TabPanel>
           </Box>
         </Grid2>