Patient portal medication status

src/components/Dashboard/Dashboard.jsx

@@ -22,10 +22,24 @@ import MedicalInformationIcon from '@mui/icons-material/MedicalInformation';
 import FormsSection from './ListSelections/FormsSection';
 import EmptySection from './ListSelections/EmptySection';
 import PatientTaskSection from './ListSelections/PatientTaskSection';
+import MedicationsSection from './ListSelections/MedicationsSection';
+
+// Since we're using JS and can't use TS enums
+const Section = Object.freeze({
+  NOTIFICATIONS: 0,
+  APPOINTMENTS: 1,
+  TASKS: 2,
+  QUESTIONNAIRE_FORMS: 3,
+  HEALTH_DATA: 4,
+  MEDICATIONS: 5,
+  TESTS_AND_RESULTS: 6,
+  SETTINGS: 7,
+  LOGOUT: 8
+});
 
 const Dashboard = props => {
   const classes = useStyles();
-  const [selectedIndex, setSelectedIndex] = useState(3);
+  const [selectedIndex, setSelectedIndex] = useState(Section.QUESTIONNAIRE_FORMS);
 
   const handleListItemClick = (event, index) => {
     setSelectedIndex(index);
@@ -51,18 +65,20 @@ const Dashboard = props => {
   };
 
   useEffect(() => {
-    if (selectedIndex === 8) {
+    if (selectedIndex === Section.LOGOUT) {
       // logout - set client to null to display login page
       props.logout();
     }
   }, [selectedIndex]);
 
   const renderBody = () => {
     switch (selectedIndex) {
-      case 2:
+      case Section.TASKS:
         return <PatientTaskSection client={props.client} />;
-      case 3:
+      case Section.QUESTIONNAIRE_FORMS:
         return <FormsSection client={props.client} />;
+      case Section.MEDICATIONS:
+        return <MedicationsSection client={props.client} />;
       default:
         return <EmptySection />;
     }
@@ -87,13 +103,11 @@ const Dashboard = props => {
             <List>
               {createIcons().map((option, index) => (
                 <div key={`icon-${index}`}>
-                  <ListItem
-                    key={option[0]}
-                    style={option[2]}
-                    selected={selectedIndex === index}
-                    disablePadding
-                  >
-                    <ListItemButton onClick={event => handleListItemClick(event, index)}>
+                  <ListItem key={option[0]} style={option[2]} disablePadding>
+                    <ListItemButton
+                      onClick={event => handleListItemClick(event, index)}
+                      selected={selectedIndex === index}
+                    >
                       <ListItemIcon>{option[1]}</ListItemIcon>
                       <ListItemText
                         primaryTypographyProps={{ fontSize: '18px' }}

src/components/Dashboard/DashboardElement.jsx → src/components/Dashboard/FormElement.jsx

@@ -1,13 +1,13 @@
 import React, { memo } from 'react';
-import { retrieveLaunchContext } from '../../util/util';
+import { retrieveLaunchContext } from '../../util/util.js';
 import { headers } from '../../util/data.js';
 import { Paper } from '@mui/material';
-import useStyles from './styles';
+import useStyles from './styles.jsx';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import AssignmentIcon from '@mui/icons-material/Assignment';
 import env from 'env-var';
 
-const DashboardElement = props => {
+const FormElement = props => {
   const classes = useStyles();
   const resource = props.resource;
   const clientState = props.client.state;
@@ -56,4 +56,4 @@ const DashboardElement = props => {
   );
 };
 
-export default memo(DashboardElement);
+export default memo(FormElement);

src/components/Dashboard/ListSelections/FormsSection.jsx

@@ -1,6 +1,6 @@
 import React, { memo, useState, useEffect } from 'react';
 import { Paper } from '@mui/material';
-import DashboardElement from '../DashboardElement';
+import FormElement from '../FormElement';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import useStyles from '../styles';
@@ -61,9 +61,7 @@ const FormsSection = props => {
       />
       {resources.length > 0 ? (
         renderElements().map(e => {
-          return (
-            <DashboardElement key={e.id} status={e.status} resource={e} client={props.client} />
-          );
+          return <FormElement key={e.id} status={e.status} resource={e} client={props.client} />;
         })
       ) : (
         <Paper className={classes.dashboardElement}>{message}</Paper>

src/components/Dashboard/ListSelections/MedicationsSection.jsx

@@ -0,0 +1,87 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Paper, Typography } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import useStyles from '../styles';
+import { MedicationStatus } from '../../MedicationStatus/MedicationStatus';
+import axios from 'axios';
+
+const MedicationsSection = props => {
+  const classes = useStyles();
+  const [message, setMessage] = useState('Loading...');
+  const [resources, setResources] = useState([]);
+  const patientId = props.client.patient.id;
+
+  useEffect(() => {
+    if (patientId) {
+      props.client.patient
+        .request('MedicationDispense', {
+          pageLimit: 0,
+          onPage: addResources,
+          resolveReferences: 'authorizingPrescription'
+        })
+        .then(() => {
+          setMessage(`No MedicationDispenses found for user with patientId: ${patientId}`);
+        });
+    } else {
+      setMessage('Invalid patient: No patientId provided');
+    }
+  }, [props.client.patient]);
+
+  const addResources = bundle => {
+    if (bundle.entry && bundle.entry.length > 0) {
+      setResources(bundle.entry.map(entry => entry.resource));
+    }
+  };
+
+  return (
+    <div className={classes.dashboardArea}>
+      <h2 className={classes.elementHeader}>Available Medications</h2>
+      {resources.length > 0 ? (
+        resources.map(resource => (
+          <MedicationElement
+            key={resource.id}
+            initialMedicationDispense={resource}
+            client={props.client}
+          />
+        ))
+      ) : (
+        <Paper className={classes.dashboardElement}>{message}</Paper>
+      )}
+    </div>
+  );
+};
+
+const MedicationElement = props => {
+  const { initialMedicationDispense, client } = props;
+  const [lastCheckedMedicationTime, setMedicationTime] = useState(null);
+  const [medicationDispense, setMedicationDispense] = useState(initialMedicationDispense);
+  const ehrUrl = client.state.serverUrl;
+  const patientId = client.patient.id;
+  const medicationRequest = medicationDispense?.authorizingPrescription?.[0];
+
+  const getMedicationStatus = () => {
+    setMedicationTime(Date.now());
+
+    if (client?.patient && patientId) {
+      client.request(`MedicationDispense/${medicationDispense.id}`, {
+        pageLimit: 0,
+        onPage: bundle => {
+          setMedicationDispense(bundle.entry[0].resource);
+        },
+        resolveReferences: 'authorizingPrescription'
+      });
+    }
+  };
+
+  return (
+    <MedicationStatus
+      ehrUrl={ehrUrl}
+      request={medicationRequest || { id: null }}
+      medicationDispense={medicationDispense}
+      getMedicationStatus={getMedicationStatus}
+      lastCheckedMedicationTime={lastCheckedMedicationTime}
+    />
+  );
+};
+
+export default memo(MedicationsSection);

src/components/MedicationStatus/MedicationStatus.jsx

@@ -1,7 +1,7 @@
 import { MedicationStatusButton } from './MedicationStatusButton.jsx';
 import { MedicationStatusModal } from './MedicationStatusModal.jsx';
 import { useState, useEffect } from 'react';
-import { Card } from '@mui/material';
+import { Card, Typography } from '@mui/material';
 
 export const MedicationStatus = props => {
   const { ehrUrl, request, medicationDispense, getMedicationStatus, lastCheckedMedicationTime } =
@@ -20,6 +20,9 @@ export const MedicationStatus = props => {
 
   return (
     <Card variant="outlined" sx={{ padding: 2 }}>
+      <Typography variant="h6" align="center" mb={2}>
+        {request?.medicationCodeableConcept?.coding?.[0].display}
+      </Typography>
       <MedicationStatusButton
         baseColor={getStatusColor(medicationDispense?.status)}
         medicationDispense={medicationDispense}

src/components/RequestDashboard/PatientSection.jsx

@@ -5,9 +5,7 @@ import RequestBuilder from '../../containers/RequestBuilder';
 import { SettingsContext } from '../../containers/ContextProvider/SettingsProvider';
 
 const PatientSection = props => {
-  const classes = useStyles();
   const [state, dispatch] = React.useContext(SettingsContext);
-  // TODO: Make request builder use react-hooks
   return (
     <div>
       {state.startup ? (