Story #20 - Doctor Notification for Patient's Status Change (#168)

* #20 created notifications button and popover list * #20 notifications pushed at patient status updates * Updating e2e tests to match the new UI + Run Cypress on ubuntu-latest * #20 fixed tests * #20 fixed register test's date picker * #20 added more tests * Disable node.js.yml * Update PatientInfo.tsx #20 removed extra empty line Co-authored-by: 64761484+AhmadHashems@users.noreply.github.com <64761484+AhmadHashems@users.noreply.github.com>
KrisTheCanadian · Apr 1, 2022 · 1527bd0 · 1527bd0
1 parent 4ce0db5
commit 1527bd0
Show file tree

Hide file tree

Showing 17 changed files with 636 additions and 112 deletions.
diff --git a/cypress/integration/protect-together/admin.spec.js b/cypress/integration/protect-together/admin.spec.js
@@ -25,7 +25,7 @@ describe('Sprint 3 Admin Suite', () => {
     it('Admin dashboard', () => {
         cy.visit('/')
         cy.contains('Welcome Admin')
-        cy.get('button').contains('Add Account')
+        cy.get('span').contains('Add Account')
         cy.get('[type="text"]').click().type('Cypress')
         cy.contains('Cypress Admin')
         cy.contains('Cypress Medical')

diff --git a/cypress/integration/protect-together/medical.spec.js b/cypress/integration/protect-together/medical.spec.js
@@ -24,7 +24,7 @@ describe('Sprint 3 Medical Suite', () => {
     it('Medical dashboard', () => {
         cy.visit('/')
         cy.contains('Welcome Dr. Demo')
-        cy.get('button').contains('View Appointments')
+        cy.get('span').contains('View Appointments')
         cy.get('[type="text"]').click().type('Cypress')
         // cy.contains('Cypress System Tests')
     })

diff --git a/src/components/dashboard/AdminDashboard/AdminDashboard.tsx b/src/components/dashboard/AdminDashboard/AdminDashboard.tsx
@@ -1,16 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import EmojiPeopleIcon from '@mui/icons-material/EmojiPeople';
 import DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
 import {
-  Button,
   Box,
   CssBaseline,
   Divider,
   List,
   ListItem,
   ListItemIcon,
   ListItemText,
-  Typography,
   Modal,
   Badge,
 } from '@mui/material';
@@ -24,6 +23,7 @@ import theme from '../../../static/style/theme';
 import UnassignedPatientTable from './UnassignedPatientTable';
 import NotificationsMenuItem from '../../layout/NotificationsMenuItem';
 import Firebase, { firestore } from '../../../config/firebase_config';
+import NotificationsButton from '../../layout/NotificationsButton';
 
 const style = {
   position: 'absolute' as const,
@@ -97,9 +97,7 @@ function AdminDashboard() {
     <Box sx={{ display: 'flex', width: '100%' }}>
       <CssBaseline />
       <Header title={`Welcome ${state.firstName}`} subtitle="Track and manage staff">
-        <Button variant="contained" color="info" onClick={handleOpen}>
-          Add Account
-        </Button>
+        <NotificationsButton />
       </Header>
       <SideBar>
         <List>
@@ -117,6 +115,12 @@ function AdminDashboard() {
             </ListItemIcon>
             <ListItemText primary="Unassigned Patients" />
           </ListItem>
+          <ListItem button onClick={handleOpen}>
+            <ListItemIcon>
+              <PersonAddIcon />
+            </ListItemIcon>
+            <ListItemText primary="Add Account" />
+          </ListItem>
           <NotificationsMenuItem />
           <ListItem button onClick={handleNotifyTest}>
             <ListItemIcon>

diff --git a/src/components/dashboard/MedicalView/MedicalDashboard.tsx b/src/components/dashboard/MedicalView/MedicalDashboard.tsx
@@ -1,57 +1,26 @@
 import React from 'react';
-import {
-  Button,
-  Box,
-  Modal,
-} from '@mui/material';
+import { Box } from '@mui/material';
 import Header from '../../layout/Header';
 import MainContent from '../../layout/MainContent';
 import { UserContext } from '../../../context/UserContext';
 import MedicalTable from './MedicalTable/MedicalTable';
-
-const style = {
-  position: 'absolute' as const,
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '50%',
-  boxShadow: 0,
-  margin: 0,
-  p: 4,
-};
+import NotificationsButton from '../../layout/NotificationsButton';
 
 type Props = {
   handlePatientClick: any,
 };
 
 function MedicalDashboard({ handlePatientClick }: Props) {
-  const [modalOpen, setModalOpen] = React.useState(false);
-  const handleOpen = () => setModalOpen(true);
-  const handleClose = () => setModalOpen(false);
-
   const { state, update } = React.useContext(UserContext);
 
   return (
     <Box sx={{ display: 'flex', width: '100%' }}>
       <Header title={`Welcome Dr. ${state.lastName}`} subtitle="Track and manage your patients">
-        <Button variant="contained" color="info" onClick={handleOpen}>
-          View Appointments
-        </Button>
+        <NotificationsButton />
       </Header>
       <MainContent>
         <MedicalTable handlePatientClick={handlePatientClick} />
       </MainContent>
-
-      <Modal
-        open={modalOpen}
-        onClose={handleClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <Box sx={style}>
-          apointments
-        </Box>
-      </Modal>
     </Box>
   );
 }

diff --git a/src/components/dashboard/MedicalView/MedicalView.tsx b/src/components/dashboard/MedicalView/MedicalView.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';
+import DateRangeOutlinedIcon from '@mui/icons-material/DateRangeOutlined';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 import {
   Box,
   CssBaseline,
@@ -8,6 +10,7 @@ import {
   ListItem,
   ListItemIcon,
   ListItemText,
+  Modal,
 } from '@mui/material';
 import SideBar from '../../layout/SideBar';
 import MedicalDashboard from './MedicalDashboard';
@@ -19,12 +22,30 @@ function MedicalView() {
   // patient's into: 1
   const [contentId, setContentId] = React.useState<number>(0);
   const [patientId, setPatientId] = React.useState<string>('');
+  // modal content
+  // appointments: 0
+  // clode patient's file: 1
+  const [modalContent, setModalContent] = React.useState<number>(0);
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const handleOpen = () => setModalOpen(true);
+  const handleClose = () => setModalOpen(false);
 
   const viewPatient = ((PID: string) => {
     setPatientId(PID);
     setContentId(1);
   });
 
+  const style = {
+    position: 'absolute' as const,
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '50%',
+    boxShadow: 0,
+    margin: 0,
+    p: 4,
+  };
+
   return (
     <Box sx={{ display: 'flex', width: '100%' }}>
       <CssBaseline />
@@ -40,12 +61,45 @@ function MedicalView() {
             </ListItemIcon>
             <ListItemText primary="Dashboard" />
           </ListItem>
+          <ListItem
+            button
+            key="appointments"
+            onClick={() => { setModalContent(0); handleOpen(); }}
+          >
+            <ListItemIcon>
+              <DateRangeOutlinedIcon />
+            </ListItemIcon>
+            <ListItemText primary="View Appointments" />
+          </ListItem>
+          { contentId === 1 && (
+          <ListItem
+            button
+            key="close"
+            onClick={() => { setModalContent(1); handleOpen(); }}
+          >
+            <ListItemIcon>
+              <CloseOutlinedIcon />
+            </ListItemIcon>
+            <ListItemText primary="Close Patient's File" />
+          </ListItem>
+          ) }
         </List>
         <Divider />
       </SideBar>
       { contentId === 0 && <MedicalDashboard handlePatientClick={viewPatient} /> }
       { contentId === 1 && <PatientInfo PID={patientId} />}
 
+      <Modal
+        open={modalOpen}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          {modalContent === 0 && 'appointments'}
+          {modalContent === 1 && 'delete patient'}
+        </Box>
+      </Modal>
     </Box>
   );
 }

diff --git a/src/components/dashboard/MedicalView/PatientInfo/PatientInfo.tsx b/src/components/dashboard/MedicalView/PatientInfo/PatientInfo.tsx
@@ -22,6 +22,7 @@ import PatientTimeline from './PatientTimeline';
 import PatientInfoList from './PatientInfoList';
 import { firestore } from '../../../../config/firebase_config';
 import theme from '../../../../static/style/theme';
+import NotificationsButton from '../../../layout/NotificationsButton';
 import Chat from '../../../chat';
 
 const style = {
@@ -130,16 +131,6 @@ function PatientInfo({ PID }: Props) {
 
   const patientRef = firestore.collection('users').doc(PID);
 
-  const handleCloseFile = () => {
-    setModalContent(0);
-    handleOpen();
-  };
-
-  const handleViewAppointments = () => {
-    setModalContent(1);
-    handleOpen();
-  };
-
   const handleViewHistory = () => {
     setModalContent(2);
     handleOpen();
@@ -270,29 +261,7 @@ function PatientInfo({ PID }: Props) {
         title={`${patientData.name}`}
         subtitle={`RAMQ ${patientData.healthCardNumber} Age: ${patientData.age} years`}
       >
-        <Grid
-          container
-          textAlign="right"
-          spacing={1}
-          sx={{ width: { md: '520px', sm: '200px' } }}
-        >
-          <Grid
-            textAlign="left"
-            item
-            md={4}
-            sm={12}
-          />
-          <Grid item md={4} sm={12}>
-            <Button sx={headerButtonStyle} variant="contained" color="warning" onClick={handleCloseFile}>
-              Close Patient&apos;s File
-            </Button>
-          </Grid>
-          <Grid item md={4} sm={12}>
-            <Button sx={headerButtonStyle} variant="contained" color="info" onClick={handleViewAppointments}>
-              View Appointments
-            </Button>
-          </Grid>
-        </Grid>
+        <NotificationsButton />
       </Header>
       <MainContent>
         <Grid container spacing={2}>
@@ -309,6 +278,7 @@ function PatientInfo({ PID }: Props) {
                   </ListSubheader>
                 )}
               >
+                { patientData.latestTestResult && (
                 <ListItem key="Latest Covid Test">
                   <ListItemText
                     primary="Latest Covid Test"
@@ -324,7 +294,9 @@ function PatientInfo({ PID }: Props) {
                     )}
                   />
                 </ListItem>
+                )}
                 <Divider variant="middle" />
+                { patientData.score && (
                 <ListItem key="Case Severity">
                   <ListItemText
                     primary="Case Severity"
@@ -343,6 +315,7 @@ function PatientInfo({ PID }: Props) {
                     )}
                   />
                 </ListItem>
+                )}
                 {extendedInfo && extendedInfo()}
               </List>
               <PatientInfoList

diff --git a/src/components/dashboard/PatientView/UpdateTestResult.tsx b/src/components/dashboard/PatientView/UpdateTestResult.tsx
@@ -13,7 +13,8 @@ import {
 import { arrayUnion, doc, setDoc, Timestamp } from 'firebase/firestore';
 import { DatePicker, LocalizationProvider } from '@mui/lab';
 import AdapterDateFns from '@mui/lab/AdapterDateFns';
-import { auth, firestore } from '../../../config/firebase_config';
+import { format } from 'date-fns';
+import Firebase, { auth, firestore } from '../../../config/firebase_config';
 
 type Props = {
   handleTestClose: any;
@@ -35,12 +36,33 @@ function UpdateTestResult({ handleTestClose }: Props) {
   const addPatientTestResults = () => {
     const uid = auth.currentUser?.uid;
     const user = firestore.collection('users').doc(uid);
-    user.update({
-      testsResults: arrayUnion({
-        testResult,
-        testType,
-        testDate,
-      }),
+    const updatePatient = async () => {
+      await user.update({
+        testsResults: arrayUnion({
+          testResult,
+          testType,
+          testDate,
+        }),
+      });
+    };
+    updatePatient().then(() => {
+      const fetchData = async () => {
+        const patientDataSnapshot = await user.get();
+        const patient = patientDataSnapshot.data();
+        if (patient) {
+          const { assignedDoctor } = patient;
+          if (assignedDoctor) {
+            const dispatchDoctor = Firebase.functions().httpsCallable('sendNotification');
+            dispatchDoctor({
+              title: `${patient.firstName} ${patient.lastName} has updated their test results`,
+              message: `Tested ${testResult} using ${testType} ${testDate
+                ? `on ${format(testDate, 'yyyy-LL-dd')}` : ''}`,
+              userId: assignedDoctor,
+            });
+          }
+        }
+      };
+      fetchData();
     });
   };
 

diff --git a/src/components/formLayout/UpdateSymptomsDesign/SymptomsUpdateResponse.tsx b/src/components/formLayout/UpdateSymptomsDesign/SymptomsUpdateResponse.tsx
@@ -50,6 +50,12 @@ export default function SymptomsUpdateResponse() {
             >
               <Grid item>
                 <Typography variant="h5" align="center">Your symptoms have been updated.</Typography>
+                <Typography
+                  variant="h5"
+                  align="center"
+                >
+                  Your doctor has been notified of your symptoms&apos; update.
+                </Typography>
               </Grid>
             </Grid>
           </Paper>

diff --git a/src/components/formLayout/UpdateSymptomsLayout.tsx b/src/components/formLayout/UpdateSymptomsLayout.tsx
@@ -41,7 +41,24 @@ export default function UpdateSymptomsLayout({ changeState }: any) {
 
   useEffect(() => {
     if (symptomsDone) {
-      updateUserSymptoms();
+      updateUserSymptoms().then(() => {
+        const fetchData = async () => {
+          const patientDataSnapshot = await users.doc(state.id).get();
+          const patient = patientDataSnapshot.data();
+          if (patient) {
+            const { assignedDoctor } = patient;
+            if (assignedDoctor) {
+              const dispatchDoctor = Firebase.functions().httpsCallable('sendNotification');
+              dispatchDoctor({
+                title: `${patient.firstName} ${patient.lastName} has updated their symptoms`,
+                message: userSymptoms.join('. '),
+                userId: assignedDoctor,
+              });
+            }
+          }
+        };
+        fetchData();
+      });
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [symptomsDone]);