routing changes

nikhilsinclair · nikhilsinclair · commit dc3288a8b32a · 2025-03-06T12:08:32.000-08:00
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -119,7 +119,7 @@ function App() {
               }
             />
             <Route path="/home/*" element={getHomePage()} />
-            <Route path="/course/*" element={getHomePage()} />
+            <Route path="/course/*" element={<InstructorHomepage />} />
           </Routes>
         </Router>
       </UserContext.Provider>
diff --git a/frontend/src/pages/instructor/InstructorHomepage.jsx b/frontend/src/pages/instructor/InstructorHomepage.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext, useRef } from "react";
 import {
   Routes,
   Route,
@@ -24,6 +24,7 @@ import {
   TablePagination,
   Button,
 } from "@mui/material";
+import { v4 as uuidv4 } from 'uuid';
 import PageContainer from "../Container";
 import InstructorHeader from "../../components/InstructorHeader";
 import InstructorSidebar from "./InstructorSidebar";
@@ -37,7 +38,10 @@ import StudentDetails from "./StudentDetails";
 import InstructorNewConcept from "./InstructorNewConcept";
 import InstructorConcepts from "./InstructorConcepts";
 import InstructorEditConcept from "./InstructorEditConcept";
+import ChatLogs from "./ChatLogs";
+import { useNotification } from "../../context/NotificationContext";
 import { UserContext } from "../../App";
+
 function titleCase(str) {
   if (typeof str !== "string") {
     return str;
@@ -51,6 +55,133 @@ function titleCase(str) {
     .join(" ");
 }
 
+function constructWebSocketUrl() {
+  const tempUrl = import.meta.env.VITE_GRAPHQL_WS_URL; // Replace with your WebSocket URL
+  const apiUrl = tempUrl.replace("https://", "wss://");
+  const urlObj = new URL(apiUrl);
+  const tmpObj = new URL(tempUrl);
+  const modifiedHost = urlObj.hostname.replace(
+      "appsync-api",
+      "appsync-realtime-api"
+  );
+
+  urlObj.hostname = modifiedHost;
+  const host = tmpObj.hostname;
+  const header = {
+      host: host,
+      Authorization: "API_KEY=",
+  };
+
+  const encodedHeader = btoa(JSON.stringify(header));
+  const payload = "e30=";
+
+  return `${urlObj.toString()}?header=${encodedHeader}&payload=${payload}`;
+};
+
+const removeCompletedNotification = async (course_id) => {
+  try {
+    console.log(course_id)
+    const session = await fetchAuthSession();
+    const token = session.tokens.idToken;
+    const { email } = await fetchUserAttributes();
+    const response = await fetch(
+      `${import.meta.env.VITE_API_ENDPOINT}instructor/remove_completed_notification?course_id=${encodeURIComponent(course_id)}&instructor_email=${encodeURIComponent(email)}`,
+      {
+        method: "DELETE",
+        headers: { Authorization: token, "Content-Type": "application/json" },
+      }
+    );
+
+    if (response.ok) {
+        console.log("Notification removed successfully.");
+    } else {
+        console.error("Failed to remove notification:", response.statusText);
+    }
+  } catch (error) {
+    console.error("Error removing completed notification:", error);
+  }
+};
+
+function openWebSocket(courseName, course_id, requestId, setNotificationForCourse, onComplete) {
+  // Open WebSocket connection
+  const wsUrl = constructWebSocketUrl();
+  const ws = new WebSocket(wsUrl, "graphql-ws");
+
+  // Handle WebSocket connection
+  ws.onopen = () => {
+    console.log("WebSocket connection established");
+
+    // Initialize WebSocket connection
+    const initMessage = { type: "connection_init" };
+    ws.send(JSON.stringify(initMessage));
+
+    // Subscribe to notifications
+    const subscriptionId = uuidv4();
+    const subscriptionMessage = {
+        id: subscriptionId,
+        type: "start",
+        payload: {
+            data: `{"query":"subscription OnNotify($request_id: String!) { onNotify(request_id: $request_id) { message request_id } }","variables":{"request_id":"${requestId}"}}`,
+            extensions: {
+                authorization: {
+                    Authorization: "API_KEY=",
+                    host: new URL(import.meta.env.VITE_GRAPHQL_WS_URL).hostname,
+                },
+            },
+        },
+    };
+
+    ws.send(JSON.stringify(subscriptionMessage));
+    console.log("Subscribed to WebSocket notifications");
+  };
+
+  ws.onmessage = (event) => {
+    const message = JSON.parse(event.data);
+    console.log("WebSocket message received:", message);
+
+    // Handle notification
+    if (message.type === "data" && message.payload?.data?.onNotify) {
+      const receivedMessage = message.payload.data.onNotify.message;
+      console.log("Notification received:", receivedMessage);
+      
+      // Sets icon to show new file on ChatLogs page
+      setNotificationForCourse(course_id, true);
+      
+      // Remove row from database
+      removeCompletedNotification(course_id);
+
+      // Notify the instructor
+      alert(`Chat logs are now available for ${courseName}`);
+
+      // Close WebSocket after receiving the notification
+      ws.close();
+      console.log("WebSocket connection closed after handling notification");
+
+      // Call the callback function after WebSocket completes
+      if (typeof onComplete === "function") {
+        onComplete();
+      }
+    }
+  };
+
+  ws.onerror = (error) => {
+    console.error("WebSocket error:", error);
+    ws.close();
+  };
+
+  ws.onclose = () => {
+    console.log("WebSocket closed");
+  };
+
+  // Set a timeout to close the WebSocket if no message is received
+  setTimeout(() => {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+          console.warn("WebSocket timeout reached, closing connection");
+          ws.close();
+      }
+  }, 180000);
+};
+
 // course details page
 const CourseDetails = () => {
   const location = useLocation();
@@ -72,12 +203,18 @@ const CourseDetails = () => {
         );
       case "InstructorEditConcepts":
         return (
-          <InstructorConcepts courseName={courseName} course_id={course_id} setSelectedComponent={setSelectedComponent}/>
+          <InstructorConcepts
+            courseName={courseName}
+            course_id={course_id}
+            setSelectedComponent={setSelectedComponent}
+          />
         );
       case "PromptSettings":
         return <PromptSettings courseName={courseName} course_id={course_id} />;
       case "ViewStudents":
         return <ViewStudents courseName={courseName} course_id={course_id} />;
+      case "ChatLogs":
+        return <ChatLogs courseName={courseName} course_id={course_id} openWebSocket={openWebSocket} />;
       default:
         return (
           <InstructorAnalytics courseName={courseName} course_id={course_id} />
@@ -94,7 +231,7 @@ const CourseDetails = () => {
       >
         <InstructorHeader />
       </AppBar>
-      <InstructorSidebar setSelectedComponent={setSelectedComponent} />
+      <InstructorSidebar setSelectedComponent={setSelectedComponent} course_id={course_id} selectedComponent={selectedComponent} />
       {renderComponent()}
     </PageContainer>
   );
@@ -112,8 +249,10 @@ const InstructorHomepage = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(5);
-  const [courseData, setCourseData] = useState([]);
+  const [courseData, setCourseData] = useState([]);  
   const { isInstructorAsStudent } = useContext(UserContext);
+  const { setNotificationForCourse } = useNotification();
+  const hasFetched = useRef(false);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -123,14 +262,15 @@ const InstructorHomepage = () => {
   }, [isInstructorAsStudent, navigate]);
   // connect to api data
   useEffect(() => {
+    if (hasFetched.current) return;
+
     const fetchCourses = async () => {
       try {
         const session = await fetchAuthSession();
-        var token = session.tokens.idToken
+        var token = session.tokens.idToken;
         const { email } = await fetchUserAttributes();
         const response = await fetch(
-          `${
-            import.meta.env.VITE_API_ENDPOINT
+          `${import.meta.env.VITE_API_ENDPOINT
           }instructor/courses?email=${encodeURIComponent(email)}`,
           {
             method: "GET",
@@ -150,6 +290,7 @@ const InstructorHomepage = () => {
             id: course.course_id,
           }));
           setRows(formattedData);
+          checkNotificationStatus(data, email, token);
         } else {
           console.error("Failed to fetch courses:", response.statusText);
         }
@@ -159,8 +300,47 @@ const InstructorHomepage = () => {
     };
 
     fetchCourses();
+    hasFetched.current = true;
   }, []);
 
+  const checkNotificationStatus = async (courses, email, token) => {
+    for (const course of courses) {
+      try {
+        const response = await fetch(
+          `${import.meta.env.VITE_API_ENDPOINT}instructor/check_notifications_status?course_id=${encodeURIComponent(course.course_id)}&instructor_email=${encodeURIComponent(email)}`,
+          {
+            method: "GET",
+            headers: { Authorization: token, "Content-Type": "application/json" },
+          }
+        );
+        if (response.ok) {
+          const data = await response.json();
+          if (data.completionStatus === true) {
+            console.log(`Getting chatlogs for ${course.course_name} is completed. Notifying the user and removing row from database.`);
+
+            // Sets icon to show new file on ChatLogs page
+            setNotificationForCourse(course.course_id, true);
+
+            // Remove row from database
+            removeCompletedNotification(course.course_id);
+
+            // Notify the Instructor
+            alert(`Chat logs are available for course: ${course.course_name}`);
+
+          } else if (data.completionStatus === false) {
+            // Reopen WebSocket to listen for notifications
+            console.log(`Getting chatlogs for ${course.course_name} is not completed. Re-opening the websocket.`);
+            openWebSocket(course.course_name, course.course_id, data.requestId, setNotificationForCourse);
+          } else {
+            console.log(`Either chatlogs for ${course.course_name} were not requested or instructor already received notification. No need to notify instructor or re-open websocket.`);
+          }
+        }
+      } catch (error) {
+        console.error("Error checking notification status for", course.course_id, error);
+      }
+    }
+  };
+
   const handleSearchChange = (event) => {
     setSearchQuery(event.target.value);
   };
@@ -230,8 +410,13 @@ const InstructorHomepage = () => {
                   onChange={handleSearchChange}
                   sx={{ width: "100%", marginBottom: 2 }}
                 />
-                <TableContainer sx={{ width: "100%", maxHeight: "70vh",
-              overflowY: "auto",}}>
+                <TableContainer
+                  sx={{
+                    width: "100%",
+                    maxHeight: "70vh",
+                    overflowY: "auto",
+                  }}
+                >
                   <Table aria-label="course table">
                     <TableHead>
                       <TableRow>
@@ -293,7 +478,7 @@ const InstructorHomepage = () => {
           </PageContainer>
         }
       />
-      <Route exact path=":courseName/*" element={<CourseDetails />} />
+      <Route exact path=":courseName/*" element={<CourseDetails openWebSocket={openWebSocket} />} />
       <Route
         path=":courseName/edit-module/:moduleId"
         element={<InstructorEditCourse />}

Original file line number	Diff line number	Diff line change
`@@ -119,7 +119,7 @@ function App() {`
`119`	`119`	`}`
`120`	`120`	`/>`
`121`	`121`	`<Route path="/home/*" element={getHomePage()} />`
`122`		`- <Route path="/course/*" element={getHomePage()} />`
	`122`	`+ <Route path="/course/*" element={<InstructorHomepage />} />`
`123`	`123`	`</Routes>`
`124`	`124`	`</Router>`
`125`	`125`	`</UserContext.Provider>`