From e6d731474807f7f1fbf9b6d92ba8b03fe06d14a9 Mon Sep 17 00:00:00 2001 From: samau3 Date: Sun, 27 Oct 2024 20:49:29 -0700 Subject: [PATCH 01/22] Create skeleton of each section for patient page --- .../patient-details/PatientDetails.jsx | 90 ++++++++++++++++--- 1 file changed, 79 insertions(+), 11 deletions(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 82843c4e..8949f88a 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -1,9 +1,10 @@ import { useParams, useNavigate } from 'react-router-dom'; +import { Loader, Container, Paper } from '@mantine/core'; import { useQuery } from '@tanstack/react-query'; -import LifelineAPI from '../LifelineAPI.js'; -import { StatusCodes } from 'http-status-codes'; import { useEffect } from 'react'; -import { Loader } from '@mantine/core'; +import { StatusCodes } from 'http-status-codes'; +import { humanize } from 'inflection'; +import LifelineAPI from '../LifelineAPI.js'; /** * @@ -23,9 +24,6 @@ export default function PatientDetails() { throw new Error('Failed to fetch patient.'); } }, - - retry: false, - refetchOnWindowFocus: false, }); console.log(data, isSuccess, isError, isLoading); @@ -44,11 +42,81 @@ export default function PatientDetails() { return (
-

Patient

-

This is the patient page

-

Patient ID: {data?.id}

-

Patient First Name: {data?.firstName}

-

Patient Last Name: {data?.lastName}

+ +

+ {data?.firstName} {data?.lastName} +

+

Date of birth: {data?.dateOfBirth}

+

Gender: {humanize(data?.gender)}

+

Preferred language: {humanize(data?.language)}

+ +
+

Contact Information

+ +
+

Emergency contact

+

+ {data?.emergencyContact?.firstName}{' '} + {data?.emergencyContact?.lastName} +

+

{data?.emergencyContact?.phone}

+

+ Relationship:{' '} + {data.emergencyContact && + humanize(data?.emergencyContact?.relationship)} +

+
+
+

Primary care physician (PCP) contact

+

+ {data?.physician?.firstName} {data?.physician?.lastName} +

+

{data?.physician?.phone}

+

{data?.hospital?.name}

+
+ +
+ +
+

Medical Information

+ +
+

Allergies

+
    + {data?.medicalData?.allergies?.map((allergy) => ( +
  • {allergy}
    • + ))} +
+
+
+

Medication

+
    + {data?.medicalData?.medications?.map((medication) => ( +
  • {medication}
    • + ))} +
+
+
+

Medical history

+
    + {data?.medicalData?.conditions?.map((condition) => ( +
  • {condition}
    • + ))} +
+
+ +
+ +
+

Preferences

+ +
+

Code status

+

{data?.codeStatus}

+
+ +
+
); } From db23f88590e533cbc680daee7778273b0e4acaa3 Mon Sep 17 00:00:00 2001 From: samau3 Date: Mon, 28 Oct 2024 14:34:15 -0700 Subject: [PATCH 02/22] Style patient info section to match Figma more closely --- .../patient-details/PatientDetails.jsx | 17 +++++++---- .../patient-details/PatientDetails.module.css | 29 +++++++++++++++++++ 2 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 client/src/pages/patients/patient-details/PatientDetails.module.css diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 8949f88a..ce9fa1f4 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -1,11 +1,13 @@ import { useParams, useNavigate } from 'react-router-dom'; -import { Loader, Container, Paper } from '@mantine/core'; +import { Loader, Container, Paper, Group } from '@mantine/core'; import { useQuery } from '@tanstack/react-query'; import { useEffect } from 'react'; import { StatusCodes } from 'http-status-codes'; import { humanize } from 'inflection'; import LifelineAPI from '../LifelineAPI.js'; +import classes from './PatientDetails.module.css'; + /** * * Patient page component @@ -41,14 +43,19 @@ export default function PatientDetails() { } return ( -
+

{data?.firstName} {data?.lastName}

-

Date of birth: {data?.dateOfBirth}

-

Gender: {humanize(data?.gender)}

-

Preferred language: {humanize(data?.language)}

+
+

Date of birth

+

Gender

+

Preferred language

+

{data?.dateOfBirth}

+

{humanize(data?.gender)}

+

{humanize(data?.language)}

+

Contact Information

diff --git a/client/src/pages/patients/patient-details/PatientDetails.module.css b/client/src/pages/patients/patient-details/PatientDetails.module.css new file mode 100644 index 00000000..8901b9ef --- /dev/null +++ b/client/src/pages/patients/patient-details/PatientDetails.module.css @@ -0,0 +1,29 @@ +.patientInfoContainer { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: auto auto; + text-align: center; + gap: 8px; +} + +.patientInfoContainer p:nth-child(-n + 3) { + font-weight: bold; + margin-bottom: 0; +} + +.patientInfoContainer p:nth-child(n + 4) { + margin-top: 0; +} + +@media (min-width: 768px) { + .patientInfoContainer { + text-align: left; + width: 70%; + } + + .details { + max-height: 100vh; + max-height: 100dvh; + overflow-y: auto; + } +} From 9562f5145c580daf768e437acf0220be4d68133e Mon Sep 17 00:00:00 2001 From: samau3 Date: Mon, 28 Oct 2024 15:50:11 -0700 Subject: [PATCH 03/22] Style section titles --- .../patient-details/PatientDetails.jsx | 20 +++++++++---------- .../patient-details/PatientDetails.module.css | 7 +++++++ 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index ce9fa1f4..89b8b004 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -1,5 +1,5 @@ import { useParams, useNavigate } from 'react-router-dom'; -import { Loader, Container, Paper, Group } from '@mantine/core'; +import { Loader, Container, Paper, Text } from '@mantine/core'; import { useQuery } from '@tanstack/react-query'; import { useEffect } from 'react'; import { StatusCodes } from 'http-status-codes'; @@ -49,16 +49,16 @@ export default function PatientDetails() { {data?.firstName} {data?.lastName}
-

Date of birth

-

Gender

-

Preferred language

-

{data?.dateOfBirth}

-

{humanize(data?.gender)}

-

{humanize(data?.language)}

+ Date of birth + Gender + Preferred language + {data?.dateOfBirth} + {humanize(data?.gender)} + {humanize(data?.language)}
-

Contact Information

+ Contact Information

Emergency contact

@@ -85,7 +85,7 @@ export default function PatientDetails() {
-

Medical Information

+ Medical Information

Allergies

@@ -115,7 +115,7 @@ export default function PatientDetails() {
-

Preferences

+ Preferences

Code status

diff --git a/client/src/pages/patients/patient-details/PatientDetails.module.css b/client/src/pages/patients/patient-details/PatientDetails.module.css index 8901b9ef..736ef2d5 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.module.css +++ b/client/src/pages/patients/patient-details/PatientDetails.module.css @@ -15,6 +15,13 @@ margin-top: 0; } +.sectionTitle { + font-size: var(--mantine-font-size-xl); + font-weight: 600; + margin-top: var(--mantine-spacing-md); + margin-bottom: var(--mantine-spacing-md); +} + @media (min-width: 768px) { .patientInfoContainer { text-align: left; From dfd6be8a4c6c5106612c695d3bacb0bfd70ad04f Mon Sep 17 00:00:00 2001 From: samau3 Date: Mon, 28 Oct 2024 16:18:34 -0700 Subject: [PATCH 04/22] Style contact information section --- .../patient-details/PatientDetails.jsx | 37 +++++++++++-------- .../patient-details/PatientDetails.module.css | 17 +++++++++ 2 files changed, 39 insertions(+), 15 deletions(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 89b8b004..408aa8a3 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -59,34 +59,39 @@ export default function PatientDetails() {
Contact Information - +
-

Emergency contact

-

+ Emergency contact + Name + {data?.emergencyContact?.firstName}{' '} {data?.emergencyContact?.lastName} -

-

{data?.emergencyContact?.phone}

-

- Relationship:{' '} + + Phone + {data?.emergencyContact?.phone} + Relationship + {data.emergencyContact && humanize(data?.emergencyContact?.relationship)} -

+
-

Primary care physician (PCP) contact

-

+ Primary care physician (PCP) contact + Name + {data?.physician?.firstName} {data?.physician?.lastName} -

-

{data?.physician?.phone}

-

{data?.hospital?.name}

+ + Phone + {data?.physician?.phone} + Hospital + {data?.physician?.hospitals[0]?.name}
Medical Information - +

Allergies

    @@ -116,10 +121,12 @@ export default function PatientDetails() {
    Preferences - +

    Code status

    {data?.codeStatus}

    + Hospital + {data?.hospital?.name}
    diff --git a/client/src/pages/patients/patient-details/PatientDetails.module.css b/client/src/pages/patients/patient-details/PatientDetails.module.css index 736ef2d5..3a966c6b 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.module.css +++ b/client/src/pages/patients/patient-details/PatientDetails.module.css @@ -22,6 +22,23 @@ margin-bottom: var(--mantine-spacing-md); } +.contactInfo { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: auto auto; +} + +.contactInfo p:nth-child(1) { + font-weight: bold; + font-size: var(--mantine-font-size-lg); +} + +.contactInfo p:nth-child(2n + 2) { + font-weight: bold; + margin-top: var(--mantine-spacing-sm); + margin-bottom: var(--mantine-spacing-sm); +} + @media (min-width: 768px) { .patientInfoContainer { text-align: left; From 549665e70bf301a842a5d663b4065d00f6244091 Mon Sep 17 00:00:00 2001 From: samau3 Date: Mon, 28 Oct 2024 16:45:18 -0700 Subject: [PATCH 05/22] Display medical information for a patient --- .../patient-details/PatientDetails.jsx | 44 ++++++++++++------- .../patient-details/PatientDetails.module.css | 10 +++++ 2 files changed, 37 insertions(+), 17 deletions(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 408aa8a3..05d5205e 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -1,5 +1,5 @@ import { useParams, useNavigate } from 'react-router-dom'; -import { Loader, Container, Paper, Text } from '@mantine/core'; +import { Loader, Container, Paper, Text, Pill } from '@mantine/core'; import { useQuery } from '@tanstack/react-query'; import { useEffect } from 'react'; import { StatusCodes } from 'http-status-codes'; @@ -42,6 +42,8 @@ export default function PatientDetails() { return ; } + console.log(data?.allergies); + return (
    @@ -59,7 +61,13 @@ export default function PatientDetails() {
    Contact Information - +
    Emergency contact Name @@ -93,26 +101,28 @@ export default function PatientDetails() { Medical Information
    -

    Allergies

    -
      - {data?.medicalData?.allergies?.map((allergy) => ( -
    • {allergy}
      • - ))} -
    + Allergies + + {data?.allergies?.map((entry) => ( + + {entry.allergy.name} + + ))}
    -

    Medication

    -
      - {data?.medicalData?.medications?.map((medication) => ( -
    • {medication}
      • - ))} -
    + Medications + + {data?.medications?.map((entry) => ( + + {entry.medication.name} + + ))}
    -

    Medical history

    + Conditions
      - {data?.medicalData?.conditions?.map((condition) => ( -
    • {condition}
      • + {data?.conditions?.map((entry) => ( +
    • {entry.condition.name}
      • ))}
    diff --git a/client/src/pages/patients/patient-details/PatientDetails.module.css b/client/src/pages/patients/patient-details/PatientDetails.module.css index 3a966c6b..1878ecf4 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.module.css +++ b/client/src/pages/patients/patient-details/PatientDetails.module.css @@ -39,6 +39,16 @@ margin-bottom: var(--mantine-spacing-sm); } +.medicalInfoText { + font-weight: bold; + margin-bottom: var(--mantine-spacing-sm); +} + +.medicalInfoPills { + margin-right: var(--mantine-spacing-sm); + margin-bottom: var(--mantine-spacing-sm); +} + @media (min-width: 768px) { .patientInfoContainer { text-align: left; From 2890e251cdf12bad61fea8c1822bae3d8d6d1a01 Mon Sep 17 00:00:00 2001 From: samau3 Date: Mon, 28 Oct 2024 17:39:07 -0700 Subject: [PATCH 06/22] Include an empty array state for each medical section --- .../patient-details/PatientDetails.jsx | 26 +++++++++++-------- .../patient-details/PatientDetails.module.css | 3 ++- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 05d5205e..09e677a8 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -102,8 +102,8 @@ export default function PatientDetails() {
    Allergies - - {data?.allergies?.map((entry) => ( + {data?.allergies.length === 0 && None} + {data?.allergies.map((entry) => ( {entry.allergy.name} @@ -111,8 +111,8 @@ export default function PatientDetails() {
    Medications - - {data?.medications?.map((entry) => ( + {data?.medications.length === 0 && None} + {data?.medications.map((entry) => ( {entry.medication.name} @@ -120,11 +120,15 @@ export default function PatientDetails() {
    Conditions -
      - {data?.conditions?.map((entry) => ( -
    • {entry.condition.name}
      • - ))} -
    + {data?.conditions?.length === 0 ? ( + None + ) : ( +
      + {data?.conditions.map((entry) => ( +
    • {entry.condition.name}
      • + ))} +
    + )}
    @@ -133,8 +137,8 @@ export default function PatientDetails() { Preferences
    -

    Code status

    -

    {data?.codeStatus}

    + Code status + {data?.codeStatus || 'Not provided'} Hospital {data?.hospital?.name}
    diff --git a/client/src/pages/patients/patient-details/PatientDetails.module.css b/client/src/pages/patients/patient-details/PatientDetails.module.css index 1878ecf4..f6532ecd 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.module.css +++ b/client/src/pages/patients/patient-details/PatientDetails.module.css @@ -41,7 +41,8 @@ .medicalInfoText { font-weight: bold; - margin-bottom: var(--mantine-spacing-sm); + margin-top: var(--mantine-spacing-xs); + margin-bottom: var(--mantine-spacing-xs); } .medicalInfoPills { From 0110dc9f3bf6fb9a887d214a9ca2e0ac89e17b43 Mon Sep 17 00:00:00 2001 From: samau3 Date: Mon, 28 Oct 2024 20:56:37 -0700 Subject: [PATCH 07/22] Style Contact info to be two columns with aligned rows --- .../patient-details/PatientDetails.jsx | 69 ++++++++++++------- .../patient-details/PatientDetails.module.css | 24 +++++-- 2 files changed, 65 insertions(+), 28 deletions(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 09e677a8..274eaccc 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -68,32 +68,53 @@ export default function PatientDetails() { withBorder className={classes.contactInfo} > -
    - Emergency contact - Name - - {data?.emergencyContact?.firstName}{' '} - {data?.emergencyContact?.lastName} - - Phone - {data?.emergencyContact?.phone} - Relationship - - {data.emergencyContact && - humanize(data?.emergencyContact?.relationship)} +
    + + Emergency Contact -
    -
    - Primary care physician (PCP) contact - Name - - {data?.physician?.firstName} {data?.physician?.lastName} + + Primary care physician (PCP) contact - Phone - {data?.physician?.phone} - Hospital - {data?.physician?.hospitals[0]?.name} -
    + +
    +
    +
    + Name + + {data?.emergencyContact?.firstName}{' '} + {data?.emergencyContact?.lastName} + +
    +
    + Phone + {data?.emergencyContact?.phone} +
    +
    + Relationship + + {data.emergencyContact && + humanize(data?.emergencyContact?.relationship)} + +
    +
    + +
    +
    + Name + + {data?.physician?.firstName} {data?.physician?.lastName} + +
    +
    + Phone + {data?.physician?.phone} +
    +
    + Hospital + {data?.physician?.hospitals[0]?.name} +
    +
    +
    diff --git a/client/src/pages/patients/patient-details/PatientDetails.module.css b/client/src/pages/patients/patient-details/PatientDetails.module.css index f6532ecd..51503a86 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.module.css +++ b/client/src/pages/patients/patient-details/PatientDetails.module.css @@ -23,17 +23,33 @@ } .contactInfo { + width: 100%; +} + +.titleRow { display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: auto auto; + grid-template-columns: 1fr 1fr; + gap: var(--mantine-spacing-xl); + margin-bottom: var(--mantine-spacing-md); +} + +.twoColumnGrid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--mantine-spacing-xl); +} + +.contactRow { + gap: var(--mantine-spacing-md); + margin-bottom: var(--mantine-spacing-xs); } -.contactInfo p:nth-child(1) { +.contactInfoColumnTitle { font-weight: bold; font-size: var(--mantine-font-size-lg); } -.contactInfo p:nth-child(2n + 2) { +.contactInfoTitle { font-weight: bold; margin-top: var(--mantine-spacing-sm); margin-bottom: var(--mantine-spacing-sm); From 0f2966c8342478e3ae9f4494473df2147eb342b7 Mon Sep 17 00:00:00 2001 From: samau3 Date: Mon, 28 Oct 2024 20:57:41 -0700 Subject: [PATCH 08/22] Add missing key prop --- .../patients/patient-details/PatientDetails.jsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 274eaccc..7e0754a3 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -125,7 +125,11 @@ export default function PatientDetails() { Allergies {data?.allergies.length === 0 && None} {data?.allergies.map((entry) => ( - + {entry.allergy.name} ))} @@ -134,7 +138,11 @@ export default function PatientDetails() { Medications {data?.medications.length === 0 && None} {data?.medications.map((entry) => ( - + {entry.medication.name} ))} @@ -146,7 +154,7 @@ export default function PatientDetails() { ) : (
      {data?.conditions.map((entry) => ( -
    • {entry.condition.name}
      • +
    • {entry.condition.name}
      • ))}
    )} From 08f66ee49606788b4818f61e5a21e08900acdd5c Mon Sep 17 00:00:00 2001 From: samau3 Date: Mon, 28 Oct 2024 21:42:06 -0700 Subject: [PATCH 09/22] Consolidate some CSS rules --- .../patient-details/PatientDetails.jsx | 30 ++++++++----------- .../patient-details/PatientDetails.module.css | 28 ++++++----------- 2 files changed, 21 insertions(+), 37 deletions(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 7e0754a3..094a4c09 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -61,13 +61,7 @@ export default function PatientDetails() {
    Contact Information - +
    Emergency Contact @@ -79,18 +73,18 @@ export default function PatientDetails() {
    - Name + Name {data?.emergencyContact?.firstName}{' '} {data?.emergencyContact?.lastName}
    - Phone + Phone {data?.emergencyContact?.phone}
    - Relationship + Relationship {data.emergencyContact && humanize(data?.emergencyContact?.relationship)} @@ -100,17 +94,17 @@ export default function PatientDetails() {
    - Name + Name {data?.physician?.firstName} {data?.physician?.lastName}
    - Phone + Phone {data?.physician?.phone}
    - Hospital + Hospital {data?.physician?.hospitals[0]?.name}
    @@ -122,7 +116,7 @@ export default function PatientDetails() { Medical Information
    - Allergies + Allergies {data?.allergies.length === 0 && None} {data?.allergies.map((entry) => (
    - Medications + Medications {data?.medications.length === 0 && None} {data?.medications.map((entry) => (
    - Conditions + Conditions {data?.conditions?.length === 0 ? ( None ) : ( @@ -166,9 +160,9 @@ export default function PatientDetails() { Preferences
    - Code status + Code status {data?.codeStatus || 'Not provided'} - Hospital + Hospital {data?.hospital?.name}
    diff --git a/client/src/pages/patients/patient-details/PatientDetails.module.css b/client/src/pages/patients/patient-details/PatientDetails.module.css index 51503a86..7451778d 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.module.css +++ b/client/src/pages/patients/patient-details/PatientDetails.module.css @@ -1,13 +1,19 @@ +.boldText { + font-weight: 600; + margin-top: var(--mantine-spacing-sm); + margin-bottom: var(--mantine-spacing-sm); +} + .patientInfoContainer { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; text-align: center; - gap: 8px; + gap: var(--mantine-spacing-sm); } .patientInfoContainer p:nth-child(-n + 3) { - font-weight: bold; + font-weight: 600; margin-bottom: 0; } @@ -22,10 +28,6 @@ margin-bottom: var(--mantine-spacing-md); } -.contactInfo { - width: 100%; -} - .titleRow { display: grid; grid-template-columns: 1fr 1fr; @@ -45,22 +47,10 @@ } .contactInfoColumnTitle { - font-weight: bold; + font-weight: 600; font-size: var(--mantine-font-size-lg); } -.contactInfoTitle { - font-weight: bold; - margin-top: var(--mantine-spacing-sm); - margin-bottom: var(--mantine-spacing-sm); -} - -.medicalInfoText { - font-weight: bold; - margin-top: var(--mantine-spacing-xs); - margin-bottom: var(--mantine-spacing-xs); -} - .medicalInfoPills { margin-right: var(--mantine-spacing-sm); margin-bottom: var(--mantine-spacing-sm); From 6c5fcf8e5dc4a9075b7850e4fcc3a843dc5064a9 Mon Sep 17 00:00:00 2001 From: samau3 Date: Mon, 28 Oct 2024 22:23:53 -0700 Subject: [PATCH 10/22] Remove console logs --- client/src/pages/patients/patient-details/PatientDetails.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 094a4c09..a0582257 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -27,8 +27,7 @@ export default function PatientDetails() { } }, }); - console.log(data, isSuccess, isError, isLoading); - + useEffect(() => { if (isError) { navigate('/patients/register/' + patientId, { @@ -42,8 +41,6 @@ export default function PatientDetails() { return ; } - console.log(data?.allergies); - return (
    From 391d4f496653fe224a9a762cad7c1dd64a3e8d82 Mon Sep 17 00:00:00 2001 From: samau3 Date: Mon, 28 Oct 2024 22:24:16 -0700 Subject: [PATCH 11/22] Format file --- client/src/pages/patients/patient-details/PatientDetails.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index a0582257..3d7e918b 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -27,7 +27,7 @@ export default function PatientDetails() { } }, }); - + useEffect(() => { if (isError) { navigate('/patients/register/' + patientId, { From d0e939636f3df6dda69605e6a98cbf985dc7244b Mon Sep 17 00:00:00 2001 From: samau3 Date: Mon, 28 Oct 2024 22:25:49 -0700 Subject: [PATCH 12/22] Remove unused variable --- client/src/pages/patients/patient-details/PatientDetails.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 3d7e918b..372d7c30 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -16,7 +16,7 @@ export default function PatientDetails() { const { patientId } = useParams(); const navigate = useNavigate(); - const { data, isSuccess, isError, isLoading } = useQuery({ + const { data, isError, isLoading } = useQuery({ queryKey: ['patient'], queryFn: async () => { const res = await LifelineAPI.getPatient(patientId); From 83cd395e8f4f13d4ea88b1f6aff321b345440662 Mon Sep 17 00:00:00 2001 From: samau3 Date: Tue, 29 Oct 2024 11:55:26 -0700 Subject: [PATCH 13/22] Refactor PatientDetails into smaller components --- .../patient-details/PatientDetails.jsx | 120 ++---------------- .../components/ContactInfo.jsx | 58 +++++++++ .../components/MedicalInfo.jsx | 50 ++++++++ .../components/Preferences.jsx | 18 +++ 4 files changed, 140 insertions(+), 106 deletions(-) create mode 100644 client/src/pages/patients/patient-details/components/ContactInfo.jsx create mode 100644 client/src/pages/patients/patient-details/components/MedicalInfo.jsx create mode 100644 client/src/pages/patients/patient-details/components/Preferences.jsx diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 372d7c30..1a56ce80 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -6,7 +6,11 @@ import { StatusCodes } from 'http-status-codes'; import { humanize } from 'inflection'; import LifelineAPI from '../LifelineAPI.js'; +import ContactInfo from './components/ContactInfo.jsx'; + import classes from './PatientDetails.module.css'; +import MedicalInfo from './components/MedicalInfo.jsx'; +import Preferences from './components/Preferences.jsx'; /** * @@ -56,114 +60,18 @@ export default function PatientDetails() { {humanize(data?.language)}
    -
    - Contact Information - -
    - - Emergency Contact - - - Primary care physician (PCP) contact - -
    -
    -
    -
    - Name - - {data?.emergencyContact?.firstName}{' '} - {data?.emergencyContact?.lastName} - -
    -
    - Phone - {data?.emergencyContact?.phone} -
    -
    - Relationship - - {data.emergencyContact && - humanize(data?.emergencyContact?.relationship)} - -
    -
    + -
    -
    - Name - - {data?.physician?.firstName} {data?.physician?.lastName} - -
    -
    - Phone - {data?.physician?.phone} -
    -
    - Hospital - {data?.physician?.hospitals[0]?.name} -
    -
    -
    -     -
    + -
    - Medical Information - -
    - Allergies - {data?.allergies.length === 0 && None} - {data?.allergies.map((entry) => ( - - {entry.allergy.name} - - ))} -
    -
    - Medications - {data?.medications.length === 0 && None} - {data?.medications.map((entry) => ( - - {entry.medication.name} - - ))} -
    -
    - Conditions - {data?.conditions?.length === 0 ? ( - None - ) : ( -
      - {data?.conditions.map((entry) => ( -
    • {entry.condition.name}
      • - ))} -
    - )} -
    -     -
    - -
    - Preferences - -
    - Code status - {data?.codeStatus || 'Not provided'} - Hospital - {data?.hospital?.name} -
    -     -
    +
    ); diff --git a/client/src/pages/patients/patient-details/components/ContactInfo.jsx b/client/src/pages/patients/patient-details/components/ContactInfo.jsx new file mode 100644 index 00000000..af0937c2 --- /dev/null +++ b/client/src/pages/patients/patient-details/components/ContactInfo.jsx @@ -0,0 +1,58 @@ +import { Paper, Text } from '@mantine/core'; +import { humanize } from 'inflection'; +import classes from '../PatientDetails.module.css'; + +export default function ContactInfo({ emergencyContact, physician }) { + return ( +
    + Contact Information + +
    + + Emergency Contact + + + Primary care physician (PCP) contact + +
    +
    +
    +
    + Name + + {emergencyContact?.firstName} + {emergencyContact?.lastName} + +
    +
    + Phone + {emergencyContact?.phone} +
    +
    + Relationship + + {emergencyContact && humanize(emergencyContact?.relationship)} + +
    +
    +
    +
    + Name + + {physician?.firstName} {physician?.lastName} + +
    +
    + Phone + {physician?.phone} +
    +
    + Hospital + {physician?.hospitals[0]?.name} +
    +
    +
    +     +
    + ); +} diff --git a/client/src/pages/patients/patient-details/components/MedicalInfo.jsx b/client/src/pages/patients/patient-details/components/MedicalInfo.jsx new file mode 100644 index 00000000..e4990852 --- /dev/null +++ b/client/src/pages/patients/patient-details/components/MedicalInfo.jsx @@ -0,0 +1,50 @@ +import { Paper, Text, Pill } from '@mantine/core'; +import classes from '../PatientDetails.module.css'; + +export default function MedicalInfo({ allergies, medications, conditions }) { + return ( +
    + Medical Information + +
    + Allergies + {allergies.length === 0 && None} + {allergies.map((entry) => ( + + {entry.allergy.name} + + ))} +
    +
    + Medications + {medications.length === 0 && None} + {medications.map((entry) => ( + + {entry.medication.name} + + ))} +
    +
    + Conditions + {conditions?.length === 0 ? ( + None + ) : ( +
      + {conditions.map((entry) => ( +
    • {entry.condition.name}
      • + ))} +
    + )} +
    +     +
    + ); +} diff --git a/client/src/pages/patients/patient-details/components/Preferences.jsx b/client/src/pages/patients/patient-details/components/Preferences.jsx new file mode 100644 index 00000000..7e24a146 --- /dev/null +++ b/client/src/pages/patients/patient-details/components/Preferences.jsx @@ -0,0 +1,18 @@ +import { Paper, Text } from '@mantine/core'; +import classes from '../PatientDetails.module.css'; + +export default function Preferences({ codeStatus, hospital }) { + return ( +
    + Preferences + +
    + Code status + {codeStatus || 'Not provided'} + Hospital + {hospital?.name} +
    +     +
    + ); +} From 870edbe9341bd565b099a03bf675eb68de2e1943 Mon Sep 17 00:00:00 2001 From: samau3 Date: Tue, 29 Oct 2024 12:59:18 -0700 Subject: [PATCH 14/22] Add JSDoc comment and prop types --- .../patient-details/components/ContactInfo.jsx | 13 +++++++++++++ .../patient-details/components/MedicalInfo.jsx | 14 ++++++++++++++ .../patient-details/components/Preferences.jsx | 12 ++++++++++++ 3 files changed, 39 insertions(+) diff --git a/client/src/pages/patients/patient-details/components/ContactInfo.jsx b/client/src/pages/patients/patient-details/components/ContactInfo.jsx index af0937c2..54878b20 100644 --- a/client/src/pages/patients/patient-details/components/ContactInfo.jsx +++ b/client/src/pages/patients/patient-details/components/ContactInfo.jsx @@ -1,7 +1,20 @@ +import PropTypes from 'prop-types'; + import { Paper, Text } from '@mantine/core'; import { humanize } from 'inflection'; import classes from '../PatientDetails.module.css'; +const contactInfoProps = { + emergencyContact: PropTypes.object, + physician: PropTypes.object, +}; + +ContactInfo.propTypes = contactInfoProps; + +/** + * + * @param {PropTypes.InferProps} props + */ export default function ContactInfo({ emergencyContact, physician }) { return (
    diff --git a/client/src/pages/patients/patient-details/components/MedicalInfo.jsx b/client/src/pages/patients/patient-details/components/MedicalInfo.jsx index e4990852..ba1b08e8 100644 --- a/client/src/pages/patients/patient-details/components/MedicalInfo.jsx +++ b/client/src/pages/patients/patient-details/components/MedicalInfo.jsx @@ -1,6 +1,20 @@ +import PropTypes from 'prop-types'; + import { Paper, Text, Pill } from '@mantine/core'; import classes from '../PatientDetails.module.css'; +const medicalInfoProps = { + allergies: PropTypes.array, + medications: PropTypes.array, + conditions: PropTypes.array, +}; + +MedicalInfo.propTypes = medicalInfoProps; + +/** + * + * @param {PropTypes.InferProps} props + */ export default function MedicalInfo({ allergies, medications, conditions }) { return (
    diff --git a/client/src/pages/patients/patient-details/components/Preferences.jsx b/client/src/pages/patients/patient-details/components/Preferences.jsx index 7e24a146..c6f3bc01 100644 --- a/client/src/pages/patients/patient-details/components/Preferences.jsx +++ b/client/src/pages/patients/patient-details/components/Preferences.jsx @@ -1,6 +1,18 @@ +import PropTypes from 'prop-types'; import { Paper, Text } from '@mantine/core'; import classes from '../PatientDetails.module.css'; +const preferencesProps = { + codeStatus: PropTypes.string, + hospital: PropTypes.object, +}; + +Preferences.propTypes = preferencesProps; + +/** + * Preferences section of patient details + * @param {PropTypes.InferProps} props + */ export default function Preferences({ codeStatus, hospital }) { return (
    From 10a5adcdccda65289163c1f2651b1bb2f15bbf2e Mon Sep 17 00:00:00 2001 From: samau3 Date: Tue, 29 Oct 2024 13:00:05 -0700 Subject: [PATCH 15/22] Clean up imports --- client/src/pages/patients/patient-details/PatientDetails.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 1a56ce80..5927cda5 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -1,5 +1,5 @@ import { useParams, useNavigate } from 'react-router-dom'; -import { Loader, Container, Paper, Text, Pill } from '@mantine/core'; +import { Loader, Container, Text } from '@mantine/core'; import { useQuery } from '@tanstack/react-query'; import { useEffect } from 'react'; import { StatusCodes } from 'http-status-codes'; @@ -59,18 +59,15 @@ export default function PatientDetails() { {humanize(data?.gender)} {humanize(data?.language)}
    - - -
From 860ab8ab021ab06981e9a5e4592f6e2f71edfce3 Mon Sep 17 00:00:00 2001 From: samau3 Date: Tue, 29 Oct 2024 16:15:47 -0700 Subject: [PATCH 16/22] Allow Pill text highlighting --- .../src/pages/patients/patient-details/PatientDetails.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/pages/patients/patient-details/PatientDetails.module.css b/client/src/pages/patients/patient-details/PatientDetails.module.css index 7451778d..33257737 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.module.css +++ b/client/src/pages/patients/patient-details/PatientDetails.module.css @@ -54,6 +54,7 @@ .medicalInfoPills { margin-right: var(--mantine-spacing-sm); margin-bottom: var(--mantine-spacing-sm); + user-select: text; } @media (min-width: 768px) { From fa5bf99cbe4fcf70163136553653e706950cf7b0 Mon Sep 17 00:00:00 2001 From: samau3 Date: Tue, 29 Oct 2024 17:51:41 -0700 Subject: [PATCH 17/22] Display dashes if any information is blank --- .../components/ContactInfo.jsx | 25 +++++++++++++------ 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/client/src/pages/patients/patient-details/components/ContactInfo.jsx b/client/src/pages/patients/patient-details/components/ContactInfo.jsx index 54878b20..fe21a9fe 100644 --- a/client/src/pages/patients/patient-details/components/ContactInfo.jsx +++ b/client/src/pages/patients/patient-details/components/ContactInfo.jsx @@ -33,18 +33,23 @@ export default function ContactInfo({ emergencyContact, physician }) {
Name - {emergencyContact?.firstName} - {emergencyContact?.lastName} + {emergencyContact + ? `${emergencyContact?.firstName} ${emergencyContact?.lastName}` + : '-'}
Phone - {emergencyContact?.phone} + + {emergencyContact?.phone ? emergencyContact?.phone : '-'} +
Relationship - {emergencyContact && humanize(emergencyContact?.relationship)} + {emergencyContact?.relationship + ? humanize(emergencyContact?.relationship) + : '-'}
@@ -52,16 +57,22 @@ export default function ContactInfo({ emergencyContact, physician }) {
Name - {physician?.firstName} {physician?.lastName} + {physician + ? `${physician?.firstName} ${physician?.lastName}` + : '-'}
Phone - {physician?.phone} + {physician?.phone ? physician?.phone : '-'}
Hospital - {physician?.hospitals[0]?.name} + + {physician?.hospitals[0]?.name + ? physician?.hospitals[0]?.name + : '-'} +
From 1de0930a03bf2055d037e54ef8d8a14470b2627e Mon Sep 17 00:00:00 2001 From: samau3 Date: Tue, 29 Oct 2024 18:04:50 -0700 Subject: [PATCH 18/22] Utilize consistent syntax for fallback text rendering --- .../components/MedicalInfo.jsx | 46 +++++++++++-------- .../components/Preferences.jsx | 6 +-- 2 files changed, 29 insertions(+), 23 deletions(-) diff --git a/client/src/pages/patients/patient-details/components/MedicalInfo.jsx b/client/src/pages/patients/patient-details/components/MedicalInfo.jsx index ba1b08e8..6916c2f8 100644 --- a/client/src/pages/patients/patient-details/components/MedicalInfo.jsx +++ b/client/src/pages/patients/patient-details/components/MedicalInfo.jsx @@ -22,29 +22,35 @@ export default function MedicalInfo({ allergies, medications, conditions }) {
Allergies - {allergies.length === 0 && None} - {allergies.map((entry) => ( - - {entry.allergy.name} - - ))} + {allergies.length === 0 ? ( + None + ) : ( + allergies.map((entry) => ( + + {entry.allergy.name} + + )) + )}
Medications - {medications.length === 0 && None} - {medications.map((entry) => ( - - {entry.medication.name} - - ))} + {medications.length === 0 ? ( + None + ) : ( + medications.map((entry) => ( + + {entry.medication.name} + + )) + )}
Conditions diff --git a/client/src/pages/patients/patient-details/components/Preferences.jsx b/client/src/pages/patients/patient-details/components/Preferences.jsx index c6f3bc01..26ed2a43 100644 --- a/client/src/pages/patients/patient-details/components/Preferences.jsx +++ b/client/src/pages/patients/patient-details/components/Preferences.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import { Paper, Text } from '@mantine/core'; import classes from '../PatientDetails.module.css'; - +import { humanize } from 'inflection'; const preferencesProps = { codeStatus: PropTypes.string, hospital: PropTypes.object, @@ -20,9 +20,9 @@ export default function Preferences({ codeStatus, hospital }) {
Code status - {codeStatus || 'Not provided'} + {codeStatus ? humanize(codeStatus) : 'Not provided'} Hospital - {hospital?.name} + {hospital ? hospital.name : 'Not provided'}
From ceb975cb25fec0059f6a03e146f1f1d2a6638d05 Mon Sep 17 00:00:00 2001 From: samau3 Date: Wed, 30 Oct 2024 20:24:37 -0700 Subject: [PATCH 19/22] Redirect register patient form after successful submission to patient details page --- client/src/pages/patients/register/PatientRegistration.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/pages/patients/register/PatientRegistration.jsx b/client/src/pages/patients/register/PatientRegistration.jsx index d4b9dcfd..e9cb3b27 100644 --- a/client/src/pages/patients/register/PatientRegistration.jsx +++ b/client/src/pages/patients/register/PatientRegistration.jsx @@ -279,7 +279,7 @@ export default function PatientRegistration() { ); if (updateRes.status === StatusCodes.OK) { showSuccessNotification('Successfully registered patient.'); - navigate('/dashboard', { replace: true }); + navigate(`/patients/${patientId}`, { replace: true }); return; } } @@ -299,7 +299,7 @@ export default function PatientRegistration() { showSuccessNotification( 'Patient basic information has been successfully updated.', ); - navigate('/dashboard', { replace: true }); + navigate(`/patients/${patientId}`, { replace: true }); return; } } From a9c158fc543bd1d6efcfb9da0629ff74842072c1 Mon Sep 17 00:00:00 2001 From: samau3 Date: Fri, 1 Nov 2024 15:55:10 -0700 Subject: [PATCH 20/22] Display QR code to link to patient details page --- .../patient-details/PatientDetails.jsx | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index 5927cda5..c135778a 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -1,17 +1,18 @@ -import { useParams, useNavigate } from 'react-router-dom'; -import { Loader, Container, Text } from '@mantine/core'; -import { useQuery } from '@tanstack/react-query'; import { useEffect } from 'react'; +import { useParams, useNavigate, useLocation } from 'react-router-dom'; +import { useQuery } from '@tanstack/react-query'; import { StatusCodes } from 'http-status-codes'; import { humanize } from 'inflection'; -import LifelineAPI from '../LifelineAPI.js'; +import { QRCode } from 'react-qrcode-logo'; +import { Loader, Container, Text, Flex, Title } from '@mantine/core'; +import LifelineAPI from '../LifelineAPI.js'; import ContactInfo from './components/ContactInfo.jsx'; - -import classes from './PatientDetails.module.css'; import MedicalInfo from './components/MedicalInfo.jsx'; import Preferences from './components/Preferences.jsx'; +import classes from './PatientDetails.module.css'; + /** * * Patient page component @@ -19,6 +20,7 @@ import Preferences from './components/Preferences.jsx'; export default function PatientDetails() { const { patientId } = useParams(); const navigate = useNavigate(); + const location = useLocation(); const { data, isError, isLoading } = useQuery({ queryKey: ['patient'], @@ -48,9 +50,15 @@ export default function PatientDetails() { return (
-

- {data?.firstName} {data?.lastName} -

+ + + {data?.firstName} {data?.lastName} + + +
Date of birth Gender From 36e4d78cfd45382ca19f5776c6fe166fcfe4e0ce Mon Sep 17 00:00:00 2001 From: samau3 Date: Fri, 1 Nov 2024 17:28:14 -0700 Subject: [PATCH 21/22] Increase size of QR code to become scanable --- client/src/pages/patients/patient-details/PatientDetails.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index c135778a..b22702cb 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -56,7 +56,7 @@ export default function PatientDetails() {
From ae6b88191908ad46e4c33f65df9161669399e418 Mon Sep 17 00:00:00 2001 From: Francis Li Date: Wed, 6 Nov 2024 19:41:54 -0800 Subject: [PATCH 22/22] Display a bigger QR code --- client/index.html | 2 +- .../patient-details/PatientDetails.jsx | 37 ++++++++++--------- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/client/index.html b/client/index.html index d4d9548d..b0dee087 100644 --- a/client/index.html +++ b/client/index.html @@ -7,7 +7,7 @@ name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> - SF Life line + SF Life Line
diff --git a/client/src/pages/patients/patient-details/PatientDetails.jsx b/client/src/pages/patients/patient-details/PatientDetails.jsx index b22702cb..ecb941cd 100644 --- a/client/src/pages/patients/patient-details/PatientDetails.jsx +++ b/client/src/pages/patients/patient-details/PatientDetails.jsx @@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query'; import { StatusCodes } from 'http-status-codes'; import { humanize } from 'inflection'; import { QRCode } from 'react-qrcode-logo'; -import { Loader, Container, Text, Flex, Title } from '@mantine/core'; +import { Container, Grid, Loader, Text, Title } from '@mantine/core'; import LifelineAPI from '../LifelineAPI.js'; import ContactInfo from './components/ContactInfo.jsx'; @@ -50,23 +50,24 @@ export default function PatientDetails() { return (
- - - {data?.firstName} {data?.lastName} - - - -
- Date of birth - Gender - Preferred language - {data?.dateOfBirth} - {humanize(data?.gender)} - {humanize(data?.language)} -
+ + + + {data?.firstName} {data?.lastName} + +
+ Date of birth + Gender + Preferred language + {data?.dateOfBirth} + {humanize(data?.gender)} + {humanize(data?.language)} +
+ + + + +