Fetch new data on page focus and keep websockets alive (#246)

* Updated local database setup instructions and instructions to use owner email and add new semester

* Add even listeners for page visibility to re-fetch data from server

* Add socket resubscription after page refocus if socket closed

* Change from list of emissions to dict, fix infinite loop and add remove from dict to unsub

README.md

@@ -16,6 +16,7 @@
     ```
 3. You may need to download and install [PostgreSQL](https://www.postgresql.org/download/) and set up the database ([see below](#setting-up-the-database))
 4. Set up environment files ([see below](#configuration))
+5. Log in with the owner email, which is defined in `server/.env`, change "Current Semester" to a new value and click "Save."  This creates the initial database entry for a semester.
 
 ## Running Server
 1. Start the server
@@ -50,7 +51,7 @@
     ```
 
 ## Setting Up the Database
-The server currently uses a PostgreSQL database. For the summer '22 development team, we're currently developing using a database hosted on Heroku - ping Pranav for details.
+The server currently uses a PostgreSQL database. The live database is hosted on our VM - ping Pranav for details.
 
 You can also set up a local database to test. Run the command below:
 ```
@@ -67,6 +68,15 @@ and check the connection information by running:
 This should print out the following information:
 > You are connected to database "queue_db" as user <db_user> via socket in <db_socket> at port <db_port>.
 
+After creating a local database, make sure to change your `server/.env` file to have the following settings:
+
+```
+POSTGRESQL_DB_HOST=localhost
+POSTGRESQL_DB_USER=<db_user>
+POSTGRESQL_DB_PASSWORD=<db_user>'s password
+POSTGRESQL_DB=queue_db
+```
+
 
 ## General Structure
 The `server` folder contains our Node.js based server, which is run on Express and uses Sequelize to interact with the database. This handles all of the Model and Controller components of our MVC application.

client/src/contexts/AllStudentsContext.tsx

@@ -34,6 +34,15 @@ const AllStudentsContextProvider = ({children}: {children: React.ReactNode}) =>
       socketSubscribeTo('allStudents', (data: {allStudents: StudentData[]}) => {
         setAllStudents(data.allStudents);
       });
+
+      const handleVisibilityChange = () => {
+        if (document.visibilityState === 'visible') {
+          HomeService.getAllStudents().then((res) => {
+            setAllStudents(res.data.allStudents);
+          });
+        }
+      };
+      document.addEventListener('visibilitychange', handleVisibilityChange);
     }
   }, [userData.isTA]);
 

client/src/contexts/QueueDataContext.tsx

@@ -52,6 +52,15 @@ const QueueDataContextProvider = ({children}: {children: React.ReactNode}) => {
     socketSubscribeTo('queueData', (data: QueueData) => {
       setQueueData(data);
     });
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        HomeService.getAll().then((res) => {
+          setQueueData(res.data);
+        });
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
   }, []);
 
   return (

client/src/contexts/StudentDataContext.tsx

@@ -67,6 +67,17 @@ const StudentDataContextProvider = ({children}: {children: React.ReactNode}) =>
           setStudentData(data);
         }
       });
+
+      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);
     }
   }, [userData.isAuthenticated]);
 

client/src/services/SocketsService.tsx

@@ -3,7 +3,9 @@ import Cookies from 'universal-cookie';
 
 const cookies = new Cookies();
 
-let socket;
+let socket = null;
+const subscriptions = {};
+
 const SOCKET_URL = process.env.REACT_APP_PROTOCOL + '://' + process.env.REACT_APP_DOMAIN;
 const SOCKET_PATH = process.env.REACT_APP_SOCKET_PATH;
 
@@ -25,6 +27,9 @@ export const socketSubscribeTo = (emission, callback) => {
     initiateSocket();
   }
 
+  // Add the event and callback to our list of subscriptions
+  subscriptions[emission] = callback;
+
   socket.on(emission, (data) => {
     callback(data);
   });
@@ -35,5 +40,29 @@ export const socketUnsubscribeFrom = (emission) => {
     return;
   }
 
+  if (subscriptions.hasOwnProperty(emission)) {
+    delete subscriptions[emission];
+  }
+
   socket.off(emission);
 };
+
+// Function to resubscribe to all events
+const resubscribeAll = () => {
+  for (const [emission, callback] of Object.entries(subscriptions)) {
+    socketSubscribeTo(emission, callback);
+  }
+};
+
+// Visibility change listener
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'visible') {
+    // The page is visible again
+    if (!socket || socket.readyState !== WebSocket.OPEN) {
+      // If the socket is not open, reconnect and resubscribe to all events
+      socket = null;
+      initiateSocket();
+      resubscribeAll();
+    }
+  }
+});