[VPS-24M1] Last minute fixes for Milestone One

frontend/src/components/NotesDisplayCard.jsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
 import { usePost } from "hooks/crudHooks";
+import { useEffect, useState } from "react";
 import styles from "../styling/NotesDisplayCard.module.scss";
 import Note from "./Note";
 
@@ -16,25 +16,22 @@ export default function NotesDisplayCard({ group, user, handleClose }) {
   }
 
   // refetch group data to get updated notes
-  async function loadGroup() {
+  async function fetchNotesData() {
     const groupData = await usePost("/api/group/", {
       groupId: group._id,
     });
-    loadNotes(groupData);
+    await loadNotes(groupData);
   }
 
-  const checkRole = () => {
+  useEffect(() => {
+    // Check roles
     group.users.forEach((userToCheck) => {
       if (userToCheck.email === user.email) {
         setRole(userToCheck.role);
       }
     });
-  };
 
-  useEffect(() => {
-    console.log(user);
-    loadGroup();
-    checkRole();
+    fetchNotesData();
   }, []);
 
   const handleCreate = async () => {
@@ -47,7 +44,7 @@ export default function NotesDisplayCard({ group, user, handleClose }) {
       role: userRole,
     });
     console.log("note created");
-    loadGroup();
+    fetchNotesData();
   };
 
   const handleKeyPress = (e) => {
@@ -77,7 +74,7 @@ export default function NotesDisplayCard({ group, user, handleClose }) {
                 id={note.id}
                 group={group}
                 user={user}
-                refetchGroup={loadGroup}
+                refetchGroup={fetchNotesData}
               />
             ))}
             <div

frontend/src/containers/App.jsx

@@ -9,12 +9,11 @@ import ProtectedRoute from "../firebase/ProtectedRoute";
 import "../styling/style.scss";
 import DashboardPage from "./pages/Dashboard/DashboardPage";
 import LoginPage from "./pages/LoginPage";
-import ScenarioSelectionPage from "./pages/ScenarioSelectionPage";
 import ManageGroupsPage from "./pages/ManageGroups/ManageGroupsPage";
+import PlayScenarioResolver from "./pages/PlayScenarioPage/PlayScenarioResolver";
+import ScenarioSelectionPage from "./pages/ScenarioSelectionPage";
 import { ScenePage } from "./pages/SceneSelectionPage";
 import theme from "./theme/App.theme";
-import InvalidRolePage from "./pages/InvalidRolePage";
-import PlayScenarioResolver from "./pages/PlayScenarioPage/PlayScenarioResolver";
 
 export default function App() {
   return (
@@ -23,13 +22,6 @@ export default function App() {
         <AuthenticationContextProvider>
           <BrowserRouter>
             <Switch>
-              <ProtectedRoute
-                exact
-                path="/play/invalid-role"
-                component={InvalidRolePage}
-              >
-                <InvalidRolePage />
-              </ProtectedRoute>
               <Route exact path="/login" component={LoginPage} />
 
               <ProtectedRoute path="/play/:scenarioId">

frontend/src/containers/pages/InvalidRolePage.jsx

@@ -1,9 +1,10 @@
+import { Button } from "@mui/material";
 import { useContext, useState } from "react";
-import AuthenticationContext from "../../context/AuthenticationContext";
-import NotesDisplayCard from "../../components/NotesDisplayCard";
 import BacktoScenarioSelectionButton from "../../components/BacktoScenarioSelectionButton";
+import NotesDisplayCard from "../../components/NotesDisplayCard";
+import AuthenticationContext from "../../context/AuthenticationContext";
 
-function InvalidRolePage(group) {
+function InvalidRolePage({ group }) {
   const currentUserRole = "Doctor";
   const rolesWithAccess = ["Nurse", "Patient"];
   const [noteOpen, setNoteOpen] = useState(false);
@@ -42,13 +43,23 @@ function InvalidRolePage(group) {
         Someone else is playing through this section of the scenario!
       </h1>
       <p style={textMargin}>Please wait for your role: {currentUserRole}</p>
+      <Button onClick={handleOpen} variant="outlined">
+        View Notes
+      </Button>
+      <p
+        style={{
+          marginBottom: "1em",
+          marginTop: "1em",
+          fontWeight: 400,
+          color: "#5c6573",
+        }}
+      >
+        — or —
+      </p>
       <BacktoScenarioSelectionButton />
       <div style={bottomTextContainerStyle}>
         <p>Roles with access to this scene: {rolesWithAccess.join(", ")}</p>
       </div>
-      <button type="button" onClick={handleOpen}>
-        View Notes
-      </button>
       {noteOpen && (
         <NotesDisplayCard group={group} user={user} handleClose={handleClose} />
       )}

frontend/src/containers/pages/ManageGroups/ManageGroupsPage.jsx

@@ -1,36 +1,52 @@
 import { Button } from "@material-ui/core";
-import { useRef, useState } from "react";
-import { useParams } from "react-router-dom";
-import Papa from "papaparse";
-import ScreenContainer from "components/ScreenContainer";
+import { Alert, Snackbar } from "@mui/material";
 import axios from "axios";
+import ScreenContainer from "components/ScreenContainer";
 import { useGet } from "hooks/crudHooks";
-import TopBar from "./TopBar";
+import Papa from "papaparse";
+import { useRef, useState } from "react";
+import { useParams } from "react-router-dom";
 import GroupsTable from "./GroupTable";
+import TopBar from "./TopBar";
 
 /**
  * Page that shows the groups that the admin can manipulate
  *
  * @container
  */
-
 export default function ManageGroupsPage() {
   const { scenarioId } = useParams();
   const [scenarioGroupInfo, setScenarioGroupInfo] = useState([]);
-  let groups;
+
+  const [isToastShowing, setIsToastShowing] = useState(false);
+  const [toastText, setToastText] = useState("");
+  const [toastType, setToastType] = useState("");
+
+  let users = [];
 
   // fetch groups assigned to this scenario
-  const fetchGroups = () => {
-    useGet(`/api/group/scenario/${scenarioId}`, setScenarioGroupInfo);
-    if (scenarioGroupInfo[0]) {
-      groups = scenarioGroupInfo[0].users;
-    } else {
-      groups = [];
-    }
+  const { reFetch } = useGet(
+    `/api/group/scenario/${scenarioId}`,
+    setScenarioGroupInfo
+  );
+  console.log(scenarioGroupInfo);
+  if (scenarioGroupInfo.length) {
+    // Iterate groups and flatten to user list
+    scenarioGroupInfo.forEach((group) => {
+      if (group) {
+        users.push(...group.users);
+      }
+    });
+  } else {
+    users = [];
+  }
+
+  const showToast = (text, type = "success") => {
+    setToastText(text);
+    setToastType(type);
+    setIsToastShowing(true);
   };
 
-  fetchGroups();
-
   // File input is a hidden input element that is activated via a click handler
   // This allows us to have an UI button that acts like a file <input> element.
   const fileInputRef = useRef(null);
@@ -88,12 +104,12 @@ export default function ManageGroupsPage() {
             jsonData
           );
 
+          reFetch();
           console.log("CSV data uploaded to MongoDB:", response.status);
-          // TODO: ESLINT ignore; change alerts so unexpected alerts error goes away
-          // alert("CSV successfully uploaded and data stored in MongoDB!");
+          showToast("Successfully formed groups!");
         } catch (error) {
           console.error("Error uploading CSV data:", error);
-          // alert("Error uploading CSV data.");
+          showToast("Error uploading CSV data!", "error");
         }
       },
     });
@@ -131,7 +147,7 @@ export default function ManageGroupsPage() {
   };
 
   const download = () => {
-    const csv = convertToCSV(groups);
+    const csv = convertToCSV(users);
     const blob = new Blob([csv], { type: "text/csv" });
     const url = window.URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -143,6 +159,14 @@ export default function ManageGroupsPage() {
     window.URL.revokeObjectURL(url);
   };
 
+  // Toast close handler
+  const handleToastDismiss = (_, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setIsToastShowing(false);
+  };
+
   return (
     <ScreenContainer vertical>
       <TopBar back={`/scenario/${scenarioId}`}>
@@ -171,9 +195,21 @@ export default function ManageGroupsPage() {
         </Button>
       </TopBar>
 
-      <GroupsTable data={groups} />
+      <GroupsTable data={users} />
+      <Snackbar
+        open={isToastShowing}
+        autoHideDuration={3000}
+        onClose={handleToastDismiss}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      >
+        <Alert
+          onClose={handleToastDismiss}
+          severity={toastType}
+          sx={{ width: "100%" }}
+        >
+          {toastText}
+        </Alert>
+      </Snackbar>
     </ScreenContainer>
   );
 }
-
-// export FileUpload;

frontend/src/containers/pages/PlayScenarioPage/PlayScenarioResolver.jsx

@@ -1,19 +1,20 @@
-import { useEffect, useContext, useState } from "react";
+import axios from "axios";
+import { useContext, useEffect, useState } from "react";
 import {
   Route,
   Switch,
   useHistory,
   useLocation,
   useParams,
 } from "react-router-dom";
-import axios from "axios";
 
 import AuthenticationContext from "context/AuthenticationContext";
 import useGraph from "hooks/useGraph";
 
+import DesyncPage from "../DesyncPage";
+import InvalidRolePage from "../InvalidRolePage";
 import PlayScenarioPage from "./PlayScenarioPage";
 import PlayScenarioPageMulti from "./PlayScenarioPageMulti";
-import DesyncPage from "../DesyncPage";
 
 // TODO: move this somewhere else and add error handling
 async function get(url, userIdToken) {
@@ -54,6 +55,9 @@ export default function PlayScenarioResolver() {
 
   return (
     <Switch>
+      <Route exact path="/play/invalid-role">
+        <InvalidRolePage group={group} />
+      </Route>
       <Route exact path="/play/desync">
         <DesyncPage group={group} />
       </Route>