Merge pull request #290 from cmu15122/preview

jacksontromero · web-flow · commit 5ec31ae28b74 · 2025-02-26T15:15:41.000-05:00
Merge websocket + notif fixes into prod
diff --git a/client/src/components/home/student/StudentMain.tsx b/client/src/components/home/student/StudentMain.tsx
@@ -29,6 +29,8 @@ function StudentMain() {
           'body': `${res.data.taData.taName} is ready to help you.`,
           'requireInteraction': true,
         });
+      } else {
+        console.log('Received help for other student');
       }
     });
 
@@ -37,6 +39,8 @@ function StudentMain() {
         new Notification('Please update your question', {
           'requireInteraction': true,
         });
+      } else {
+        console.log('Received updateQRequest for other student');
       }
     });
 
@@ -47,6 +51,8 @@ function StudentMain() {
         new Notification('You\'ve been messaged by a TA', {
           'requireInteraction': true,
         });
+      } else {
+        console.log('Received message for other student');
       }
     });
 
@@ -55,6 +61,8 @@ function StudentMain() {
         new Notification('You\'ve been removed from the queue', {
           'requireInteraction': true,
         });
+      } else {
+        console.log('Received remove for other student');
       }
     });
 
@@ -63,6 +71,8 @@ function StudentMain() {
         new Notification('Your entry been approved by a TA', {
           'requireInteraction': true,
         });
+      } else {
+        console.log('Received approveCooldown for other student');
       }
     });
   }, [userData.andrewID]);
diff --git a/client/src/components/navbar/Navbar.tsx b/client/src/components/navbar/Navbar.tsx
@@ -16,6 +16,7 @@ import HomeService from '../../services/HomeService';
 import {UserDataContext} from '../../contexts/UserDataContext';
 import {QueueDataContext} from '../../contexts/QueueDataContext';
 import {StudentDataContext} from '../../contexts/StudentDataContext';
+import { NotificationsActive } from '@mui/icons-material';
 
 function createPage(page, link) {
   return {page, link};
@@ -100,6 +101,8 @@ export default function Navbar(props) {
     HomeService.unfreezeQueue();
   };
 
+  const [notificationPermission, setNotificationPermission] = useState(Notification.permission);
+
   const unfreezeButton = <Button color="secondary" variant="contained" sx={{mx: 2}} onClick={unfreezeQueue}>Unfreeze</Button>;
   const freezeButton = <Button color="secondary" variant="contained" sx={{mx: 2}} onClick={freezeQueue}>Freeze</Button>;
 
@@ -147,6 +150,17 @@ export default function Navbar(props) {
                     </MenuItem>
                   )
                 }
+                {
+                  notificationPermission !== 'granted' && (
+                    <MenuItem onClick={() => Notification.requestPermission((permission) => {
+                      setNotificationPermission(permission);
+                    })}>
+                      <Typography variant='subtitle2' sx={{mx: 2}}>
+                        Enable Notifications
+                      </Typography>
+                    </MenuItem>
+                  )
+                }
                 {
                   pages?.map((page) => (
                     <MenuItem key={page.page} onClick={goToPage(page.link)}>
@@ -194,6 +208,15 @@ export default function Navbar(props) {
           {
             userData.isTA && isHome && (queueData.queueFrozen ? unfreezeButton : freezeButton)
           }
+          {
+            notificationPermission !== 'granted' && (
+              <IconButton color="secondary" onClick={() => Notification.requestPermission((permission) => {
+                setNotificationPermission(permission);
+              })}>
+                <NotificationsActive />
+              </IconButton>
+            )
+          }
         </Box>
         <Box sx={{flexGrow: 0, display: 'flex', color: '#FFFFFF'}}>
           {
diff --git a/client/src/contexts/AllStudentsContext.tsx b/client/src/contexts/AllStudentsContext.tsx
@@ -2,7 +2,7 @@ import React, {createContext, useEffect, useState, useContext} from 'react';
 import {StudentData} from '../../../types/StudentData';
 import {UserDataContext} from '../contexts/UserDataContext';
 import HomeService from '../services/HomeService';
-import {socketSubscribeTo} from '../services/SocketsService';
+import {ensureSocketConnected, socketSubscribeTo} from '../services/SocketsService';
 
 /**
  * Context object for all students on the queue
@@ -35,14 +35,15 @@ const AllStudentsContextProvider = ({children}: {children: React.ReactNode}) =>
         setAllStudents(data.allStudents);
       });
 
-      // const handleVisibilityChange = () => {
-      //   if (document.visibilityState === 'visible') {
-      //     HomeService.getAllStudents().then((res) => {
-      //       setAllStudents(res.data.allStudents);
-      //     });
-      //   }
-      // };
-      // document.addEventListener('visibilitychange', handleVisibilityChange);
+      const handleVisibilityChange = () => {
+        if (document.visibilityState === 'visible') {
+          HomeService.getAllStudents().then((res) => {
+            setAllStudents(res.data.allStudents);
+          });
+          ensureSocketConnected();
+        }
+      };
+      document.addEventListener('visibilitychange', handleVisibilityChange);
     }
   }, [userData.isTA]);
 
diff --git a/client/src/contexts/QueueDataContext.tsx b/client/src/contexts/QueueDataContext.tsx
@@ -1,7 +1,7 @@
 import { QueueData } from '../../../types/QueueData';
 import React, { createContext, useEffect, useState } from 'react';
 import HomeService from '../services/HomeService';
-import { socketSubscribeTo } from '../services/SocketsService';
+import { ensureSocketConnected, socketSubscribeTo } from '../services/SocketsService';
 
 /**
  * Context object for queue data
@@ -61,14 +61,15 @@ const QueueDataContextProvider = ({
       setQueueData(data);
     });
 
-    // const handleVisibilityChange = () => {
-    //   if (document.visibilityState === 'visible') {
-    //     HomeService.getAll().then((res) => {
-    //       setQueueData(res.data);
-    //     });
-    //   }
-    // };
-    // document.addEventListener('visibilitychange', handleVisibilityChange);
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        HomeService.getAll().then((res) => {
+          setQueueData(res.data);
+        });
+        ensureSocketConnected();
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
   }, []);
 
   return (
diff --git a/client/src/contexts/StudentDataContext.tsx b/client/src/contexts/StudentDataContext.tsx
@@ -2,7 +2,7 @@ import React, {createContext, useEffect, useState, useContext} from 'react';
 import {StudentData} from '../../../types/StudentData';
 import {UserDataContext} from '../contexts/UserDataContext';
 import HomeService from '../services/HomeService';
-import {socketSubscribeTo} from '../services/SocketsService';
+import {ensureSocketConnected, socketSubscribeTo} from '../services/SocketsService';
 import {StudentStatusValues} from '../services/StudentStatus';
 
 /**
@@ -65,19 +65,24 @@ const StudentDataContextProvider = ({children}: {children: React.ReactNode}) =>
       socketSubscribeTo('studentData', (data: StudentData) => {
         if (data.andrewID === userData.andrewID) {
           setStudentData(data);
+        } else {
+          console.log('Student data id doesn\'t match andrewID');
         }
       });
 
-      // const handleVisibilityChange = () => {
-      //   if (document.visibilityState === 'visible') {
-      //     HomeService.getStudentData().then((res) => {
-      //       if (res.status === 200 && res.data.andrewID === userData.andrewID) {
-      //         setStudentData(res.data);
-      //       }
-      //     });
-      //   }
-      // };
-      // document.addEventListener('visibilitychange', handleVisibilityChange);
+      const handleVisibilityChange = () => {
+        if (document.visibilityState === 'visible') {
+          HomeService.getStudentData().then((res) => {
+            if (res.status === 200 && res.data.andrewID === userData.andrewID) {
+              setStudentData(res.data);
+            } else if (res.data.andrewID === userData.andrewID) {
+              console.log('Student data id doesn\'t match andrewID');
+            }
+            ensureSocketConnected();
+          });
+        }
+      };
+      document.addEventListener('visibilitychange', handleVisibilityChange);
     }
   }, [userData.isAuthenticated]);
 
diff --git a/client/src/http-common.tsx b/client/src/http-common.tsx
@@ -38,6 +38,10 @@ httpInstance.interceptors.response.use(
       return res;
     },
     (err) => {
+      if (!err.response) {
+        showErrorToast('Server error, no response');
+        return Promise.reject(err);
+      }
       if (err.response.status >= 500) {
         const message = 'Server Error: ' + err.response.data.message;
         showErrorToast(message);
diff --git a/client/src/services/SocketsService.tsx b/client/src/services/SocketsService.tsx
@@ -1,9 +1,9 @@
-import io from 'socket.io-client';
+import io, { Socket } from 'socket.io-client';
 import Cookies from 'universal-cookie';
 
 const cookies = new Cookies();
 
-let socket;
+let socket : Socket;
 const SOCKET_URL = process.env.REACT_APP_PROTOCOL + '://' + process.env.REACT_APP_DOMAIN;
 const SOCKET_PATH = process.env.REACT_APP_SOCKET_PATH;
 
@@ -18,6 +18,23 @@ export const initiateSocket = () => {
   if (userCookies != null) {
     socket.emit('authenticate', userCookies.access_token);
   }
+
+  socket.on('disconnect', (reason, details) => {
+    console.log('Client disconnected', reason, details);
+
+    if (!socket.active) {
+      console.log('Inactive socket connection');
+      socket.connect();
+    }
+  });
+
+  socket.on('connect_error', (error) => {
+    console.log('Connection error', error.message);
+    if (!socket.active) {
+      console.log('Inactive socket connection');
+      socket.connect();
+    }
+  });
 };
 
 export const socketSubscribeTo = (emission, callback) => {
@@ -37,3 +54,15 @@ export const socketUnsubscribeFrom = (emission) => {
 
   socket.off(emission);
 };
+
+export const ensureSocketConnected = () => {
+  if (!socket) {
+    console.log('No existing socket, initiating');
+    initiateSocket();
+  }
+
+  if (!socket.connected || !socket.active) {
+    console.log('Existing socket not connected or inactive, reconnecting');
+    socket.connect();
+  }
+};
diff --git a/server/controllers/home.js b/server/controllers/home.js
@@ -1014,7 +1014,6 @@ exports.post_dismiss_message = function (req, res) {
 
   ohq.dismissMessage(id);
 
-  sockets.dismiss_message(id);
   emitNewStudentData(id);
   emitNewAllStudents();
 
diff --git a/server/controllers/sockets.js b/server/controllers/sockets.js
