Merge pull request #299 from cmu15122/preview

213 timer feature, additional small fixes

Author: jacksontromero

client/package-lock.json

@@ -1,15 +1,16 @@
-import React, {useState, useEffect, useContext} from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 
 import SharedMain from './shared/SharedMain';
 import StudentMain from './student/StudentMain';
 import TAMain from './ta/TAMain';
 import Footer from './Footer';
-import {Container} from '@mui/material';
+import { Container } from '@mui/material';
 
-import {UserDataContext} from '../../contexts/UserDataContext';
+import { UserDataContext } from '../../contexts/UserDataContext';
+import { ensureSocketConnected } from '../../services/SocketsService';
 
 function HomeMain() {
-  const {userData} = useContext(UserDataContext);
+  const { userData } = useContext(UserDataContext);
 
   const gitHubLink = 'https://github.com/cmu15122/q-issues/issues';
 
@@ -26,21 +27,34 @@ function HomeMain() {
   useEffect(() => {
     if (userData.isAuthenticated) {
       if (userData.isTA) {
-        setMainPage(<TAMain/>);
-      } else { // is student
-        setMainPage(<StudentMain/>);
+        setMainPage(<TAMain />);
+      } else {
+        // is student
+        setMainPage(<StudentMain />);
       }
     } else {
       // you are not logged in
       setMainPage(null);
     }
   }, [userData.isAuthenticated, userData.isTA]);
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      ensureSocketConnected();
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
   return (
-    <Container sx={{display: 'flex', minHeight: '100vh', flexDirection: 'column'}}>
-      <SharedMain/>
+    <Container
+      sx={{ display: 'flex', minHeight: '100vh', flexDirection: 'column' }}
+    >
+      <SharedMain />
       {mainPage}
-      <Footer gitHubLink={gitHubLink}/>
+      <Footer gitHubLink={gitHubLink} />
     </Container>
   );
 }

client/src/components/home/HomeMain.tsx

@@ -109,20 +109,22 @@ export default function AskQuestion() {
           location: location,
           topic: topic,
         }),
-    ).then((res) => {
-      if (res.status === 200 && res.data.message === 'cooldown_violation') {
-        setTimePassed(Math.round(res.data.timePassed));
-        setShowCooldownOverlay(true);
-      } else {
-        clearValues();
-      }
-
-      if (res.status === 200) {
-        manuallyGetNewData();
-      }
+    )
+        .then((res) => {
+          if (res.status === 200 && res.data.message === 'cooldown_violation') {
+            setTimePassed(Math.round(res.data.timePassed));
+            setShowCooldownOverlay(true);
+          } else {
+            clearValues();
+          }
 
-      setAskDisabled(false);
-    });
+          if (res.status === 200) {
+            manuallyGetNewData();
+          }
+        })
+        .finally(() => {
+          setAskDisabled(false);
+        });
   }
 
   const manuallyGetNewData = () => {

client/src/components/home/shared/AskQuestion.tsx

@@ -11,7 +11,7 @@ import { StudentStatusValues } from '../../../services/StudentStatus';
 import { UserDataContext } from '../../../contexts/UserDataContext';
 
 export default function EntryTails(props) {
-  const { student } = props;
+  const { student, currentTime } = props;
   const { userData } = useContext(UserDataContext);
 
   const showApproval = props.showCooldownApproval;
@@ -53,7 +53,7 @@ export default function EntryTails(props) {
       alignItems="center"
       sx={{ mr: { xs: 1, sm: 2, lg: 3 }, ml: { xs: 1, sm: 2 }, my: 1.5 }}
     >
-      <StudentStatus student={student} />
+      <StudentStatus student={student} currentTime={currentTime} />
       {getCorrectTail(status)}
     </Stack>
   );

client/src/components/home/ta/EntryTails.tsx

@@ -19,6 +19,18 @@ export default function StudentEntries(props) {
   const { userData } = useContext(UserDataContext);
   const { allStudents, setAllStudents } = useContext(AllStudentsContext);
 
+  // Add a current time state that will be passed to all StudentStatus components
+  const [currentTime, setCurrentTime] = useState(Date.now());
+
+  // Update the current time every second
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentTime(Date.now());
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
   /* BEGIN FILTER LOGIC */
 
   const [isHelping, setIsHelping] = useState(false);
@@ -229,6 +241,7 @@ export default function StudentEntries(props) {
           handleFix={handleFix}
           removeStudent={removeStudent}
           handleClickUnfreeze={handleClickUnfreeze}
+          currentTime={currentTime}
         />
       ))}
     </BaseTable>

client/src/components/home/ta/StudentEntries.tsx

@@ -19,6 +19,7 @@ export default function StudentEntry(props) {
     removeStudent,
     handleClickUnfreeze,
     handleFix,
+    currentTime,
   } = props;
 
   const [confirmRemove, setConfirmRemove] = useState(false);
@@ -111,6 +112,7 @@ export default function StudentEntry(props) {
           handleFix: handleFix,
           showCooldownApproval: showCooldownApproval,
           approveCooldownOverride: approveCooldownOverride,
+          currentTime: currentTime,
         })}
       </TableCell>
     </ItemRow>

client/src/components/home/ta/StudentEntry.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, Stack } from '@mui/material';
 
 import PersistentOptions from './PersistentOptions';

client/src/components/home/ta/TailOptions/ActionsHelp.tsx

@@ -3,7 +3,6 @@ import { Divider, Menu, MenuItem, IconButton, Typography } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { Help } from '@mui/icons-material';
 import ChatIcon from '@mui/icons-material/Chat';
-import HomeService from '../../../../services/HomeService';
 
 import MessageDialog from '../dialogs/MessageDialog';
 import { StudentStatusValues } from '../../../../services/StudentStatus';

client/src/components/home/ta/TailOptions/ExtraStudentOptions.tsx

@@ -3,21 +3,59 @@ import { Typography, useTheme } from '@mui/material';
 
 import { StudentStatusValues } from '../../../../services/StudentStatus';
 import { UserDataContext } from '../../../../contexts/UserDataContext';
+import { QueueDataContext } from '../../../../contexts/QueueDataContext';
 
 export default function StudentStatus(props) {
-  const { student } = props;
+  const { student, currentTime } = props;
   const theme = useTheme();
 
   const { userData } = useContext(UserDataContext);
+  const { queueData } = useContext(QueueDataContext);
 
   const status = student.status;
 
+  const formatTime = (seconds) => {
+    // Handle negative or zero seconds
+    if (seconds <= 0) return '0:00';
+
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+  };
+
+  // Calculate elapsed time based on the provided currentTime
+  const getElapsedTime = () => {
+    if (
+      status === StudentStatusValues.BEING_HELPED &&
+      student.helpingTAInfo?.helpStartTime
+    ) {
+      const startTime = new Date(student.helpingTAInfo.helpStartTime).getTime();
+      return Math.floor((currentTime - startTime) / 1000);
+    }
+    return 0;
+  };
+
   const chooseText = (status) => {
     switch (status) {
       case StudentStatusValues.BEING_HELPED: {
         if (student.helpingTAInfo?.taAndrewID === userData.andrewID) {
+          // Show self timer if enabled
+          if (
+            userData.taSettings?.showSelfTimer &&
+            student.helpingTAInfo?.helpStartTime
+          ) {
+            return `You have been helping for ${formatTime(getElapsedTime())}`;
+          }
           return 'You are helping';
         } else {
+          // Show others timer if enabled (both user setting and admin setting)
+          if (
+            userData.taSettings?.showOthersTimer &&
+            queueData.allowShowOthersTimer &&
+            student.helpingTAInfo?.helpStartTime
+          ) {
+            return `${student?.helpingTAInfo?.taPrefName} has been helping for ${formatTime(getElapsedTime())}`;
+          }
           return `${student?.helpingTAInfo?.taPrefName} is Helping`;
         }
       }

client/src/components/home/ta/TailOptions/StudentStatus.tsx

@@ -1,31 +1,30 @@
-import React, {useContext} from 'react';
-import {
-  Typography,
-} from '@mui/material';
+import React, { useContext } from 'react';
+import { Typography } from '@mui/material';
 
 import AdminMain from './admin/AdminMain';
 import VideoChatSettings from './VideoChatSettings';
 import NotificationSettings from './NotificationSettings';
-import {UserDataContext} from '../../contexts/UserDataContext';
+import TimerSettings from './TimerSettings';
+import { UserDataContext } from '../../contexts/UserDataContext';
 
 function Main(props) {
-  const {userData} = useContext(UserDataContext);
+  const { userData } = useContext(UserDataContext);
 
   return (
     <div>
-      <Typography variant="h3" textAlign='center' sx={{mt: 4, mb: 2}} fontWeight='bold'>
+      <Typography
+        variant="h3"
+        textAlign="center"
+        sx={{ mt: 4, mb: 2 }}
+        fontWeight="bold"
+      >
         Settings
       </Typography>
-      {
-        !userData.isOwner && <VideoChatSettings/>
-      }
-      {
-        !userData.isOwner && <NotificationSettings/>
-      }
+      {!userData.isOwner && <VideoChatSettings />}
+      {!userData.isOwner && <NotificationSettings />}
+      {!userData.isOwner && <TimerSettings />}
 
-      {
-        userData.isAdmin && <AdminMain/>
-      }
+      {userData.isAdmin && <AdminMain />}
     </div>
   );
 }