623 patient portal task

src/components/Auth/Login.jsx

@@ -11,6 +11,7 @@ const Login = props => {
   const [username, _setUsername] = useState('');
   const [password, _setPassword] = useState('');
   const handleClose = () => setMessage(null);
+  document.title = 'EHR | Patient Portal';
 
   const onSubmit = useCallback(() => {
     if (username && password) {

src/components/Dashboard/Dashboard.jsx

@@ -1,15 +1,13 @@
 import React, { memo, useState, useEffect } from 'react';
 import useStyles from './styles';
-import DashboardElement from './DashboardElement';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import CssBaseline from '@mui/material/CssBaseline';
 import Toolbar from '@mui/material/Toolbar';
 import List from '@mui/material/List';
 import Divider from '@mui/material/Divider';
 import AssignmentIcon from '@mui/icons-material/Assignment';
+import ListAltIcon from '@mui/icons-material/ListAlt';
 import MedicationIcon from '@mui/icons-material/Medication';
 import BiotechIcon from '@mui/icons-material/Biotech';
 import LogoutIcon from '@mui/icons-material/Logout';
@@ -21,34 +19,28 @@ import NotificationsIcon from '@mui/icons-material/Notifications';
 import AlarmIcon from '@mui/icons-material/Alarm';
 import SettingsIcon from '@mui/icons-material/Settings';
 import MedicalInformationIcon from '@mui/icons-material/MedicalInformation';
-import { Paper } from '@mui/material';
+import FormsSection from './ListSelections/FormsSection';
+import EmptySection from './ListSelections/EmptySection';
+import PatientTaskSection from './ListSelections/PatientTaskSection';
 
 const Dashboard = props => {
   const classes = useStyles();
-  const [resources, setResources] = useState([]);
-  const [message, setMessage] = useState('Loading...');
-  const [checked, setChecked] = useState(true);
-  const drawerWidth = '340px';
-  const handleChange = event => {
-    setChecked(event.target.checked);
-  };
+  const [selectedIndex, setSelectedIndex] = useState(3);
 
-  const addResources = bundle => {
-    if (bundle.entry) {
-      bundle.entry.forEach(e => {
-        const resource = e.resource;
-        setResources(resources => [...resources, resource]);
-      });
-    }
+  const handleListItemClick = (event, index) => {
+    setSelectedIndex(index);
   };
+
+  const drawerWidth = '340px';
+
   const createIcons = () => {
     const icons = [];
     const style = { fontSize: '40px' };
     const itemStyle = { height: '80px' };
-    const qStyle = { height: '80px', backgroundColor: '#f5f5fa' };
     icons.push(['Notifications', <NotificationsIcon sx={style} />, itemStyle]);
     icons.push(['Appointments', <AlarmIcon sx={style} />, itemStyle]);
-    icons.push(['Questionnaire Forms', <AssignmentIcon sx={style} />, qStyle]);
+    icons.push(['Tasks', <AssignmentIcon sx={style} />, itemStyle]);
+    icons.push(['Questionnaire Forms', <ListAltIcon sx={style} />, itemStyle]);
     icons.push(['Health Data', <MedicalInformationIcon sx={style} />, itemStyle]);
     icons.push(['Medications', <MedicationIcon sx={style} />, itemStyle]);
     icons.push(['Tests and Results', <BiotechIcon sx={style} />, itemStyle]);
@@ -57,32 +49,25 @@ const Dashboard = props => {
 
     return icons;
   };
+
   useEffect(() => {
-    if (props.client.patient.id) {
-      props.client.patient
-        .request('QuestionnaireResponse', { pageLimit: 0, onPage: addResources })
-        .then(() => {
-          setMessage(
-            'No QuestionnaireResponses Found for user with patientId: ' + props.client.patient.id
-          );
-        });
-    } else {
-      setMessage('Invalid patient: No patientId provided');
+    if (selectedIndex === 8) {
+      // logout - set client to null to display login page
+      props.logout();
     }
-  }, [props.client.patient]);
+  }, [selectedIndex]);
 
-  const renderElements = () => {
-    let resourcesToRender = [];
-    if (checked) {
-      resourcesToRender = resources.filter(e => {
-        return e.status === 'in-progress';
-      });
-    } else {
-      resourcesToRender = resources;
+  const renderBody = () => {
+    switch (selectedIndex) {
+      case 2:
+        return <PatientTaskSection client={props.client} />;
+      case 3:
+        return <FormsSection client={props.client} />;
+      default:
+        return <EmptySection />;
     }
-    resourcesToRender.reverse();
-    return resourcesToRender;
   };
+
   return (
     <div>
       <Box sx={{ display: 'flex' }}>
@@ -102,8 +87,13 @@ const Dashboard = props => {
             <List>
               {createIcons().map((option, index) => (
                 <div key={`icon-${index}`}>
-                  <ListItem key={option[0]} style={option[2]} disablePadding>
-                    <ListItemButton>
+                  <ListItem
+                    key={option[0]}
+                    style={option[2]}
+                    selected={selectedIndex === index}
+                    disablePadding
+                  >
+                    <ListItemButton onClick={event => handleListItemClick(event, index)}>
                       <ListItemIcon>{option[1]}</ListItemIcon>
                       <ListItemText
                         primaryTypographyProps={{ fontSize: '18px' }}
@@ -119,28 +109,7 @@ const Dashboard = props => {
         </Drawer>
         <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
           <Toolbar />
-          <div className={classes.dashboardArea}>
-            <h2 className={classes.elementHeader}>Available Forms</h2>
-            <FormControlLabel
-              style={{ float: 'right' }}
-              control={<Checkbox checked={checked} onChange={handleChange} />}
-              label="Only show in-progress forms"
-            />
-            {resources.length > 0 ? (
-              renderElements().map(e => {
-                return (
-                  <DashboardElement
-                    key={e.id}
-                    status={e.status}
-                    resource={e}
-                    client={props.client}
-                  />
-                );
-              })
-            ) : (
-              <Paper className={classes.dashboardElement}>{message}</Paper>
-            )}
-          </div>
+          {renderBody()}
         </Box>
       </Box>
     </div>

src/components/Dashboard/ListSelections/EmptySection.jsx

@@ -0,0 +1,13 @@
+import React, { memo } from 'react';
+import useStyles from '../styles';
+
+const EmptySection = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.dashboardArea}>
+      <h2 className={classes.elementHeader}>Not available</h2>
+    </div>
+  );
+};
+
+export default memo(EmptySection);

src/components/Dashboard/ListSelections/FormsSection.jsx

@@ -0,0 +1,75 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Paper } from '@mui/material';
+import DashboardElement from '../DashboardElement';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import useStyles from '../styles';
+
+const FormsSection = props => {
+  const classes = useStyles();
+  const [resources, setResources] = useState([]);
+  const [message, setMessage] = useState('Loading...');
+  const [checked, setChecked] = useState(true);
+
+  useEffect(() => {
+    if (props.client.patient.id) {
+      props.client.patient
+        .request('QuestionnaireResponse', { pageLimit: 0, onPage: addResources })
+        .then(() => {
+          setMessage(
+            'No QuestionnaireResponses Found for user with patientId: ' + props.client.patient.id
+          );
+        });
+    } else {
+      setMessage('Invalid patient: No patientId provided');
+    }
+  }, [props.client.patient]);
+
+  const handleChange = event => {
+    setChecked(event.target.checked);
+  };
+
+  const addResources = bundle => {
+    if (bundle.entry) {
+      bundle.entry.forEach(e => {
+        const resource = e.resource;
+        setResources(resources => [...resources, resource]);
+      });
+    }
+  };
+
+  const renderElements = () => {
+    let resourcesToRender = [];
+    if (checked) {
+      resourcesToRender = resources.filter(e => {
+        return e.status === 'in-progress';
+      });
+    } else {
+      resourcesToRender = resources;
+    }
+    resourcesToRender.reverse();
+    return resourcesToRender;
+  };
+
+  return (
+    <div className={classes.dashboardArea}>
+      <h2 className={classes.elementHeader}>Available Forms</h2>
+      <FormControlLabel
+        style={{ float: 'right' }}
+        control={<Checkbox checked={checked} onChange={handleChange} />}
+        label="Only show in-progress forms"
+      />
+      {resources.length > 0 ? (
+        renderElements().map(e => {
+          return (
+            <DashboardElement key={e.id} status={e.status} resource={e} client={props.client} />
+          );
+        })
+      ) : (
+        <Paper className={classes.dashboardElement}>{message}</Paper>
+      )}
+    </div>
+  );
+};
+
+export default memo(FormsSection);