From 858a2ea9dde2d7bd8a5ae9b860d368a62b9a565b Mon Sep 17 00:00:00 2001 From: Joyce Quach Date: Fri, 15 Mar 2024 11:40:00 -0400 Subject: [PATCH 1/4] Refactor to use enum-like consts for sidebar sections, remove finished TODO comment, and move deprecated prop --- src/components/Dashboard/Dashboard.jsx | 33 ++++++++++++------- .../RequestDashboard/PatientSection.jsx | 1 - 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 95aae834..42a2ed1c 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -23,9 +23,22 @@ import FormsSection from './ListSelections/FormsSection'; import EmptySection from './ListSelections/EmptySection'; import PatientTaskSection from './ListSelections/PatientTaskSection'; +// 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,7 +64,7 @@ const Dashboard = props => { }; useEffect(() => { - if (selectedIndex === 8) { + if (selectedIndex === Section.LOGOUT) { // logout - set client to null to display login page props.logout(); } @@ -59,9 +72,9 @@ const Dashboard = props => { const renderBody = () => { switch (selectedIndex) { - case 2: + case Section.TASKS: return ; - case 3: + case Section.QUESTIONNAIRE_FORMS: return ; default: return ; @@ -87,13 +100,11 @@ const Dashboard = props => { {createIcons().map((option, index) => (
- - handleListItemClick(event, index)}> + + handleListItemClick(event, index)} + selected={selectedIndex === index} + > {option[1]} { const classes = useStyles(); const [state, dispatch] = React.useContext(SettingsContext); - // TODO: Make request builder use react-hooks return (
{state.startup ? ( From 9bb94d72af9f9f434ff10ed6b1968eac624f4bb6 Mon Sep 17 00:00:00 2001 From: Joyce Quach Date: Fri, 15 Mar 2024 13:04:58 -0400 Subject: [PATCH 2/4] Remove unused code --- src/components/RequestDashboard/PatientSection.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/RequestDashboard/PatientSection.jsx b/src/components/RequestDashboard/PatientSection.jsx index 8fa06e63..d407de2b 100644 --- a/src/components/RequestDashboard/PatientSection.jsx +++ b/src/components/RequestDashboard/PatientSection.jsx @@ -5,7 +5,6 @@ import RequestBuilder from '../../containers/RequestBuilder'; import { SettingsContext } from '../../containers/ContextProvider/SettingsProvider'; const PatientSection = props => { - const classes = useStyles(); const [state, dispatch] = React.useContext(SettingsContext); return (
From dafbbe61e9c12917e1ecc1396a9c67e17793a653 Mon Sep 17 00:00:00 2001 From: Joyce Quach Date: Tue, 19 Mar 2024 16:05:18 -0400 Subject: [PATCH 3/4] WIP add Medications section and elements --- src/components/Dashboard/Dashboard.jsx | 3 + .../{DashboardElement.jsx => FormElement.jsx} | 8 +- .../Dashboard/ListSelections/FormsSection.jsx | 6 +- .../ListSelections/MedicationsSection.jsx | 87 +++++++++++++++++++ 4 files changed, 96 insertions(+), 8 deletions(-) rename src/components/Dashboard/{DashboardElement.jsx => FormElement.jsx} (91%) create mode 100644 src/components/Dashboard/ListSelections/MedicationsSection.jsx diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 42a2ed1c..10f1ea0b 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -22,6 +22,7 @@ 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({ @@ -76,6 +77,8 @@ const Dashboard = props => { return ; case Section.QUESTIONNAIRE_FORMS: return ; + case Section.MEDICATIONS: + return ; default: return ; } diff --git a/src/components/Dashboard/DashboardElement.jsx b/src/components/Dashboard/FormElement.jsx similarity index 91% rename from src/components/Dashboard/DashboardElement.jsx rename to src/components/Dashboard/FormElement.jsx index f42925ab..e7dd808e 100644 --- a/src/components/Dashboard/DashboardElement.jsx +++ b/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); diff --git a/src/components/Dashboard/ListSelections/FormsSection.jsx b/src/components/Dashboard/ListSelections/FormsSection.jsx index 34491555..d9f7f258 100644 --- a/src/components/Dashboard/ListSelections/FormsSection.jsx +++ b/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 ( - - ); + return ; }) ) : ( {message} diff --git a/src/components/Dashboard/ListSelections/MedicationsSection.jsx b/src/components/Dashboard/ListSelections/MedicationsSection.jsx new file mode 100644 index 00000000..fa851e43 --- /dev/null +++ b/src/components/Dashboard/ListSelections/MedicationsSection.jsx @@ -0,0 +1,87 @@ +import React, { memo, useState, useEffect } from 'react'; +import { Paper } 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 ehrUrl = props.client.state.serverUrl; + 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 ( +
+

Available Medications

+ {resources.length > 0 ? ( + resources.map(resource => ( + + )) + ) : ( + {message} + )} +
+ ); +}; + +const MedicationElement = (ehrUrl, patientId, initialMedicationDispense, client) => { + // const classes = useStyles(); + const [lastCheckedMedicationTime, setMedicationTime] = useState(null); + const [medicationDispense, setMedicationDispense] = useState(initialMedicationDispense); + + const getMedicationStatus = () => { + setMedicationTime(Date.now()); + + if (client?.patient && patientId) { + client.patient.request('MedicationDispense', { + pageLimit: 0, + onPage: bundle => { + setMedicationDispense(bundle.entry[0]); + }, + resolveReferences: 'authorizingPrescription' + }); + } + }; + + return ( + + ); +}; + +export default memo(MedicationsSection); From 7b139627a128ce0fcb2503779abaa5a858beb333 Mon Sep 17 00:00:00 2001 From: Joyce Quach Date: Tue, 19 Mar 2024 16:43:20 -0400 Subject: [PATCH 4/4] Supply correct argument to MedicationElement and GET MedicationRequest individually --- .../ListSelections/MedicationsSection.jsx | 18 +++++++++--------- .../MedicationStatus/MedicationStatus.jsx | 5 ++++- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/Dashboard/ListSelections/MedicationsSection.jsx b/src/components/Dashboard/ListSelections/MedicationsSection.jsx index fa851e43..146b72fe 100644 --- a/src/components/Dashboard/ListSelections/MedicationsSection.jsx +++ b/src/components/Dashboard/ListSelections/MedicationsSection.jsx @@ -1,5 +1,5 @@ import React, { memo, useState, useEffect } from 'react'; -import { Paper } from '@mui/material'; +import { Paper, Typography } from '@mui/material'; import FormControlLabel from '@mui/material/FormControlLabel'; import useStyles from '../styles'; import { MedicationStatus } from '../../MedicationStatus/MedicationStatus'; @@ -9,7 +9,6 @@ const MedicationsSection = props => { const classes = useStyles(); const [message, setMessage] = useState('Loading...'); const [resources, setResources] = useState([]); - const ehrUrl = props.client.state.serverUrl; const patientId = props.client.patient.id; useEffect(() => { @@ -41,8 +40,6 @@ const MedicationsSection = props => { resources.map(resource => ( @@ -54,19 +51,22 @@ const MedicationsSection = props => { ); }; -const MedicationElement = (ehrUrl, patientId, initialMedicationDispense, client) => { - // const classes = useStyles(); +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.patient.request('MedicationDispense', { + client.request(`MedicationDispense/${medicationDispense.id}`, { pageLimit: 0, onPage: bundle => { - setMedicationDispense(bundle.entry[0]); + setMedicationDispense(bundle.entry[0].resource); }, resolveReferences: 'authorizingPrescription' }); @@ -76,7 +76,7 @@ const MedicationElement = (ehrUrl, patientId, initialMedicationDispense, client) return ( { const { ehrUrl, request, medicationDispense, getMedicationStatus, lastCheckedMedicationTime } = @@ -20,6 +20,9 @@ export const MedicationStatus = props => { return ( + + {request?.medicationCodeableConcept?.coding?.[0].display} +