#129 Added Changes from Dev

KrisTheCanadian · Mar 27, 2022 · fe1047d · fe1047d
1 parent 12531ea
commit fe1047d
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 16 deletions.
diff --git a/src/components/dashboard/PatientDashboard.tsx b/src/components/dashboard/PatientDashboard.tsx
@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 import React, { useEffect, useState } from 'react';
 import DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';
+import CoronavirusIcon from '@mui/icons-material/Coronavirus';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import BiotechIcon from '@mui/icons-material/Biotech';
 // eslint-disable-next-line import/no-unresolved
 import '../../static/style/CovidData.css';
 import {
@@ -30,6 +33,7 @@ import MainContent from '../layout/MainContent';
 import SideBar from '../layout/SideBar';
 import { UserContext } from '../../context/UserContext';
 import UpdateTestResult from './patienttestresult';
+import TestResults from './TestResults';
 import theme from '../../static/style/theme';
 import { firestore } from '../../config/firebase_config';
 
@@ -56,8 +60,11 @@ function PatientDashboard() {
   const handleClose = () => setModalOpen(false);
   const navigate = useNavigate();
   const [testOpen, setTestOpen] = useState(false);
+  const [testROpen, setTestROpen] = useState(false);
   const handleTestOpen = () => setTestOpen(true);
   const handleTestClose = () => setTestOpen(false);
+  const handleTestROpen = () => setTestROpen(true);
+  const handleTestRClose = () => setTestROpen(false);
   const { state, update } = React.useContext(UserContext);
   const [user, setUser] = useState<DocumentData>();
 
@@ -102,33 +109,29 @@ function PatientDashboard() {
   };
 
   useEffect(() => {
-    onSnapshot(doc(firestore, 'users', `${state.id}`), (docu) => {
+    const unsubscribe = onSnapshot(doc(firestore, 'users', `${state.id}`), (docu) => {
       const data = docu.data();
       if (data) {
         setUser(data);
       }
     });
-
+    return () => {
+      unsubscribe();
+    };
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <Box sx={{ display: 'flex', width: '100%' }}>
       <CssBaseline />
       <Header title={`Welcome ${state.firstName}`} subtitle="Stay safe">
-        <Button variant="contained" color="info" sx={{ mr: 1 }} onClick={handleTestOpen}>
-          Add Covid-19 Test
-        </Button>
-        {!user?.assignedDoctor && (
-        <Button variant="contained" color="primary" onClick={() => { navigate('/symptomsForm'); }}>
-          Ask for Help
-        </Button>
-        )}
-        {user?.assignedDoctor && (
-        <Button variant="contained" color="primary" onClick={() => { navigate('/symptomsUpdate'); }}>
-          Update Your Symptoms
-        </Button>
-        )}
+        <div>
+          {!user?.assignedDoctor && (
+          <Button variant="contained" color="primary" sx={{ mr: 1 }} onClick={() => { navigate('/symptomsForm'); }}>
+            Ask for Help
+          </Button>
+          )}
+        </div>
       </Header>
       <SideBar>
         <List>
@@ -138,6 +141,30 @@ function PatientDashboard() {
             </ListItemIcon>
             <ListItemText primary="Dashboard" />
           </ListItem>
+          <ListItem button key="Dashboard2">
+            <ListItemIcon>
+              <CoronavirusIcon />
+            </ListItemIcon>
+            <ListItemText data-testid="covidtest2" primary="Add Covid-19 Test" onClick={handleTestOpen} />
+          </ListItem>
+          <ListItem button key="Test">
+            <ListItemIcon>
+              <BiotechIcon />
+            </ListItemIcon>
+            <ListItemText data-testid="TestResults" primary="Test Results" onClick={handleTestROpen} />
+          </ListItem>
+          <ListItem button key="Results" data-testid="SymptomsUpdate2">
+            <ListItemIcon>
+              <ContentPasteIcon />
+            </ListItemIcon>
+            {user?.assignedDoctor && (
+            <ListItemText
+              primary="Symptoms Update"
+              onClick={() => { navigate('/symptomsUpdate'); }}
+            />
+            )}
+          </ListItem>
+
         </List>
         <Divider />
       </SideBar>
@@ -199,6 +226,7 @@ function PatientDashboard() {
           sx={{
             color: 'rgba(0, 0, 0, 0.87)',
             paddingTop: 1,
+            mt: 3,
             fontWeight: 500,
           }}
         >
@@ -400,6 +428,16 @@ function PatientDashboard() {
           <UpdateTestResult handleTestClose={handleTestClose} />
         </Box>
       </Modal>
+      <Modal
+        open={testROpen}
+        onClose={handleTestRClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <TestResults handleTestRClose={handleTestRClose} />
+        </Box>
+      </Modal>
       <Modal
         open={modalOpen}
         onClose={handleClose}

diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
@@ -13,8 +13,8 @@ type Props = {
   children: JSX.Element[] | JSX.Element;
 };
 export default function SideBar({ children }: Props) {
+  const { update } = React.useContext(UserContext);
   const { open, setOpen } = useLayoutContext();
-  const { state, update } = React.useContext(UserContext);
   const navigate = useNavigate();
 
   const handleDrawerToggle = () => {