use updated patient age formatting

ohcnetwork · Mar 14, 2024 · d115c07 · d115c07
1 parent 3be630a
commit d115c07
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 44 deletions.
diff --git a/cypress/pageobject/Patient/PatientCreation.ts b/cypress/pageobject/Patient/PatientCreation.ts
@@ -56,8 +56,8 @@ export class PatientPage {
     cy.get("#date-input").click().type(dateOfBirth);
   }
   typePatientAge(age: string) {
-    cy.get("#select-menu").click();
-    cy.get("#select-menu").contains("Age").click();
+    cy.get("#age-input-type-selector").click();
+    cy.get("#age-input-type-selector").contains("Age").click();
     cy.get("button").contains("Confirm").click();
     cy.get("#age-div").click().type(age);
   }

diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -10,7 +10,11 @@ import useVitalsAspectRatioConfig from "../../VitalsMonitor/useVitalsAspectRatio
 import { DISCHARGE_REASONS, SYMPTOM_CHOICES } from "../../../Common/constants";
 import PrescriptionsTable from "../../Medicine/PrescriptionsTable";
 import Chip from "../../../CAREUI/display/Chip";
-import { formatAge, formatDate, formatDateTime } from "../../../Utils/utils";
+import {
+  formatDate,
+  formatDateTime,
+  formatPatientAge,
+} from "../../../Utils/utils";
 import ReadMore from "../../Common/components/Readmore";
 import DailyRoundsList from "../Consultations/DailyRoundsList";
 import EventsList from "./Events/EventsList";
@@ -629,12 +633,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                   <div>
                     Age {" - "}
                     <span className="font-semibold">
-                      {props.patientData.age !== undefined // 0 is a valid age, so we need to check for undefined
-                        ? formatAge(
-                            props.patientData.age,
-                            props.patientData.date_of_birth
-                          )
-                        : "-"}
+                      {formatPatientAge(props.patientData)}
                     </span>
                   </div>
                   <div id="patient-weight">

diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
@@ -7,10 +7,10 @@ import { PatientModel } from "../Patient/models";
 import useQuery from "../../Utils/request/useQuery";
 import { debounce } from "lodash-es";
 import SearchInput from "../Form/SearchInput";
-import { formatAge } from "../../Utils/utils";
 import { GENDER_TYPES } from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
+import { formatPatientAge } from "../../Utils/utils";
 
 const DischargedPatientsList = ({
   facility_external_id,
@@ -88,7 +88,7 @@ const PatientListItem = ({ patient }: { patient: PatientModel }) => {
         <h2 className="text-lg font-bold text-black">{patient.name}</h2>
         <span className="text-sm font-medium text-gray-800">
           {GENDER_TYPES.find((g) => g.id === patient.gender)?.text} -{" "}
-          {formatAge(patient.age, patient.date_of_birth)}
+          {formatPatientAge(patient)}
         </span>
         <div className="flex-1" />
         <RecordMeta

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
@@ -31,7 +31,7 @@ import RecordMeta from "../../CAREUI/display/RecordMeta";
 import SearchInput from "../Form/SearchInput";
 import SortDropdownMenu from "../Common/SortDropdown";
 import SwitchTabs from "../Common/components/SwitchTabs";
-import { formatAge, parsePhoneNumber } from "../../Utils/utils.js";
+import { formatPatientAge, parsePhoneNumber } from "../../Utils/utils.js";
 import useFilters from "../../Common/hooks/useFilters";
 import { useTranslation } from "react-i18next";
 import Page from "../Common/components/Page.js";
@@ -526,7 +526,7 @@ export const PatientManager = () => {
                 >
                   <span className="text-xl capitalize">{patient.name}</span>
                   <span className="text-gray-800">
-                    {formatAge(patient.age, patient.date_of_birth, true)}
+                    {formatPatientAge(patient, true)}
                   </span>
                 </div>
               </div>

diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
@@ -1304,6 +1304,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                             </FieldLabel>
                             <div className="flex w-full items-center gap-2">
                               <SelectMenuV2
+                                id="age-input-type-selector"
                                 className="w-32"
                                 options={
                                   [

diff --git a/src/Components/Patient/SampleDetails.tsx b/src/Components/Patient/SampleDetails.tsx
@@ -7,7 +7,7 @@ import Card from "../../CAREUI/display/Card";
 import { FileUpload } from "./FileUpload";
 import Page from "../Common/components/Page";
 import _ from "lodash-es";
-import { formatAge, formatDateTime } from "../../Utils/utils";
+import { formatDateTime, formatPatientAge } from "../../Utils/utils";
 
 import { navigate } from "raviger";
 import { DetailRoute } from "../../Routers/types";
@@ -102,7 +102,7 @@ export const SampleDetails = ({ id }: DetailRoute) => {
             ) : (
               <div>
                 <span className="font-semibold leading-relaxed">Age: </span>
-                {formatAge(patientData?.age, patientData?.date_of_birth)}
+                {formatPatientAge(patientData)}
               </div>
             )}
             <div>

diff --git a/src/Components/Shifting/ListView.tsx b/src/Components/Shifting/ListView.tsx
@@ -8,7 +8,7 @@ import { ExportButton } from "../Common/Export";
 import ListFilter from "./ListFilter";
 import Page from "../Common/components/Page";
 import SearchInput from "../Form/SearchInput";
-import { formatAge, formatDateTime } from "../../Utils/utils";
+import { formatDateTime, formatPatientAge } from "../../Utils/utils";
 import { formatFilter } from "./Commons";
 import { navigate } from "raviger";
 
@@ -90,11 +90,7 @@ export default function ListView() {
               <div className="flex justify-between">
                 <div className="mb-2 text-xl font-bold capitalize">
                   {shift.patient_object.name} -{" "}
-                  {formatAge(
-                    shift.patient_object.age,
-                    shift.patient_object.date_of_birth,
-                    true
-                  )}
+                  {formatPatientAge(shift.patient_object, true)}
                 </div>
                 <div>
                   {shift.emergency && (

diff --git a/src/Components/Shifting/ShiftDetails.tsx b/src/Components/Shifting/ShiftDetails.tsx
@@ -15,7 +15,7 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 import Page from "../Common/components/Page";
 import QRCode from "qrcode.react";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
-import { formatAge, formatDateTime } from "../../Utils/utils";
+import { formatDateTime, formatPatientAge } from "../../Utils/utils";
 import useConfig from "../../Common/hooks/useConfig";
 
 import { useTranslation } from "react-i18next";
@@ -24,6 +24,7 @@ import routes from "../../Redux/api.js";
 import request from "../../Utils/request/request.js";
 import { ConsultationModel } from "../Facility/models.js";
 import CareIcon from "../../CAREUI/icons/CareIcon.js";
+import { PatientModel } from "../Patient/models.js";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -94,13 +95,7 @@ export default function ShiftDetails(props: { id: string }) {
       "\n" +
       t("age") +
       ":" +
-      +(
-        formatAge(
-          data?.patient_object?.age,
-          data?.patient_object?.date_of_birth,
-          true
-        ) ?? "-"
-      ) +
+      +formatPatientAge(data.patient_object, true) +
       "\n" +
       t("origin_facility") +
       ":" +
@@ -128,7 +123,7 @@ export default function ShiftDetails(props: { id: string }) {
     setIsCopied(false);
   }, 5000);
 
-  const showPatientCard = (patientData: any) => {
+  const showPatientCard = (patientData: PatientModel) => {
     const patientGender = GENDER_TYPES.find(
       (i) => i.id === patientData?.gender
     )?.text;
@@ -185,7 +180,7 @@ export default function ShiftDetails(props: { id: string }) {
               <span className="font-semibold leading-relaxed">
                 {t("age")}:{" "}
               </span>
-              {formatAge(patientData?.age, patientData?.date_of_birth, true)}
+              {formatPatientAge(patientData, true)}
             </div>
           )}
           {patientData?.gender === 2 && patientData?.is_antenatal && (
@@ -370,7 +365,7 @@ export default function ShiftDetails(props: { id: string }) {
               <span className="font-semibold leading-relaxed">
                 {t("age")}:{" "}
               </span>
-              {formatAge(patientData.age, patientData.date_of_birth, true)}
+              {formatPatientAge(patientData, true)}
             </div>
             <div>
               <span className="font-semibold leading-relaxed">

diff --git a/src/Components/Shifting/ShiftingBoard.tsx b/src/Components/Shifting/ShiftingBoard.tsx
@@ -6,7 +6,11 @@ import {
   useRef,
   useState,
 } from "react";
-import { classNames, formatAge, formatDateTime } from "../../Utils/utils";
+import {
+  classNames,
+  formatDateTime,
+  formatPatientAge,
+} from "../../Utils/utils";
 import { downloadShiftRequests } from "../../Redux/actions";
 import { useDrag, useDrop } from "react-dnd";
 
@@ -88,11 +92,7 @@ const ShiftCard = ({ shift, filter }: any) => {
             <div className="flex justify-between">
               <div className="mb-2 text-xl font-bold capitalize">
                 {shift.patient_object.name} -{" "}
-                {formatAge(
-                  shift.patient_object?.age,
-                  shift.patient_object?.age.date_of_birth,
-                  true
-                )}
+                {formatPatientAge(shift.patient_object, true)}
               </div>
               <div>
                 {shift.emergency && (

diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
@@ -6,6 +6,7 @@ import {
 import phoneCodesJson from "../Common/static/countryPhoneAndFlags.json";
 import dayjs from "./dayjs";
 import { UserModel } from "../Components/Users/models";
+import { PatientModel } from "../Components/Patient/models";
 
 interface ApacheParams {
   age: number;
@@ -396,6 +397,14 @@ export const getCountryCode = (phoneNumber: string) => {
   return undefined;
 };
 
+const getRelativeDateSuffix = (abbreviated: boolean) => {
+  return {
+    day: abbreviated ? "d" : "days",
+    month: abbreviated ? "mo" : "months",
+    year: abbreviated ? "yr" : "years",
+  };
+};
+
 export const formatAge = (
   age?: number,
   date_of_birth?: string,
@@ -404,9 +413,7 @@ export const formatAge = (
   if (!age && !date_of_birth) return undefined;
   if (!age) age = 0;
 
-  const daySuffix = abbreviated ? "d" : "days";
-  const monthSuffix = abbreviated ? "mo" : "months";
-  const yearSuffix = abbreviated ? "yr" : "years";
+  const suffixes = getRelativeDateSuffix(abbreviated);
 
   if (age < 1 && date_of_birth) {
     const dob = new Date(date_of_birth);
@@ -416,11 +423,54 @@ export const formatAge = (
     const months = Math.floor(diffDays / 30);
     const days = diffDays % 30;
     if (months === 0) {
-      return `${days} ${daySuffix}`;
+      return `${days} ${suffixes.day}`;
     }
-    return `${months} ${monthSuffix} ${days} ${daySuffix}`;
+    return `${months} ${suffixes.month} ${days} ${suffixes.day}`;
   }
-  return `${age} ${yearSuffix}`;
+  return `${age} ${suffixes.year}`;
+};
+
+export const formatPatientAge = (
+  data: Pick<
+    PatientModel,
+    "date_of_birth" | "year_of_birth" | "age" | "age_days"
+  >,
+  abbreviated = false
+) => {
+  const suffixes = getRelativeDateSuffix(abbreviated);
+
+  if (data.age) {
+    return `${data.age}${suffixes.year}`;
+  }
+
+  const formatAgeFromDays = (ageDays: number) => {
+    const months = Math.floor(ageDays / 30);
+    const days = ageDays % 30;
+
+    if (months) {
+      return `${months}${suffixes.month} ${days}${suffixes.day}`;
+    }
+    return `${days}${suffixes.day}`;
+  };
+
+  // Voluntarily checking if `date_of_birth` non null as age_days could have
+  // value if date_of_birth is null but has `year_of_birth`.
+  if (data.age_days != null && data.date_of_birth) {
+    return formatAgeFromDays(data.age_days);
+  }
+
+  if (data.date_of_birth) {
+    return formatAgeFromDays(
+      dayjs(new Date()).diff(dayjs(data.date_of_birth), "days")
+    );
+  }
+
+  const years = new Date().getFullYear() - data.year_of_birth!;
+  if (years) {
+    return `${years}${suffixes.year}`;
+  }
+
+  return `${data.year_of_birth} (birth year)`;
 };
 
 export const scrollTo = (id: string | boolean) => {