Refactor rendering of array of strings to utilise humanizeStrings utility method

src/Common/hooks/useFilters.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import GenericFilterBadge from "../../CAREUI/display/FilterBadge";
 import PaginationComponent from "../../Components/Common/Pagination";
 import useConfig from "./useConfig";
-import { classNames } from "../../Utils/utils";
+import { classNames, humanizeStrings } from "../../Utils/utils";
 import FiltersCache from "../../Utils/FiltersCache";
 
 export type FilterState = Record<string, unknown>;
@@ -87,10 +87,7 @@ export default function useFilters({
           name={name}
           value={
             value === undefined
-              ? paramKey
-                  .map((k) => qParams[k])
-                  .filter(Boolean)
-                  .join(", ")
+              ? humanizeStrings(paramKey.map((k) => qParams[k]).filter(Boolean))
               : value
           }
           onRemove={() => removeFilters(paramKey)}

src/Common/utils.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect } from "react";
 import { OptionsType } from "./constants";
+import { humanizeStrings } from "../Utils/utils";
 
 export interface statusType {
   aborted?: boolean;
@@ -34,14 +35,15 @@ export const parseOptionId: (
   options: readonly OptionsType[],
   id: string | string[],
 ) => string = (options, id) => {
-  const textArray = options
-    .filter((option) => {
-      return id instanceof Array
-        ? id.map((i) => String(i)).includes(String(option.id))
-        : String(option.id) === String(id);
-    })
-    .map((option) => option.text);
-  return textArray.join(", ");
+  return humanizeStrings(
+    options
+      .filter((option) => {
+        return id instanceof Array
+          ? id.map((i) => String(i)).includes(String(option.id))
+          : String(option.id) === String(id);
+      })
+      .map((option) => option.text),
+  );
 };
 
 export const deepEqual = (x: any, y: any): boolean => {

src/Components/Common/prescription-builder/InvestigationBuilder.tsx

@@ -4,6 +4,7 @@ import { PrescriptionMultiDropdown } from "./PrescriptionMultiselect";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import request from "../../../Utils/request/request";
 import routes from "../../../Redux/api";
+import { humanizeStrings } from "../../../Utils/utils";
 
 export type InvestigationType = {
   type?: string[];
@@ -86,9 +87,9 @@ export default function InvestigationBuilder(
     return (
       data?.results.map(
         (investigation) =>
-          `${investigation.name} -- ${investigation.groups
-            .map((group) => ` ( ${group.name} ) `)
-            .join(", ")}`,
+          `${investigation.name} -- ${humanizeStrings(
+            investigation.groups.map((group) => ` ( ${group.name} ) `),
+          )}`,
       ) ?? []
     );
   };

src/Components/DeathReport/DeathReport.tsx

@@ -6,7 +6,11 @@ import TextFormField from "../Form/FormFields/TextFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import DateFormField from "../Form/FormFields/DateFormField";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
-import { formatDateTime, patientAgeInYears } from "../../Utils/utils";
+import {
+  formatDateTime,
+  humanizeStrings,
+  patientAgeInYears,
+} from "../../Utils/utils";
 import Page from "../Common/components/Page";
 import Form from "../Form/Form";
 import { useTranslation } from "react-i18next";
@@ -89,8 +93,9 @@ export default function PrintDeathReport(props: { id: string }) {
       patientData.medical_history &&
       patientData.medical_history.length
     ) {
-      const medHis = patientData.medical_history;
-      return medHis.map((item: any) => item.disease).join(", ");
+      return humanizeStrings(
+        patientData.medical_history.map((item: any) => item.disease),
+      );
     } else {
       return "None";
     }

src/Components/Facility/ConsultationDetails/index.tsx

@@ -11,7 +11,11 @@ import { lazy, useCallback, useState } from "react";
 import DoctorVideoSlideover from "../DoctorVideoSlideover";
 import { make as Link } from "../../Common/components/Link.bs";
 import { PatientModel } from "../../Patient/models";
-import { formatDateTime, relativeTime } from "../../../Utils/utils";
+import {
+  formatDateTime,
+  humanizeStrings,
+  relativeTime,
+} from "../../../Utils/utils";
 
 import { navigate, useQueryParams } from "raviger";
 import { useDispatch } from "react-redux";
@@ -93,8 +97,9 @@ export const ConsultationDetails = (props: any) => {
 
   const getPatientComorbidities = (patientData: any) => {
     if (patientData?.medical_history?.length) {
-      const medHis = patientData.medical_history;
-      return medHis.map((item: any) => item.disease).join(", ");
+      return humanizeStrings(
+        patientData.medical_history.map((item: any) => item.disease),
+      );
     } else {
       return "None";
     }
@@ -113,15 +118,6 @@ export const ConsultationDetails = (props: any) => {
             ...res.data,
             symptoms_text: "",
           };
-          // if (res.data.symptoms?.length) {
-          //   const symptoms = res.data.symptoms
-          //     .filter((symptom: number) => symptom !== 9)
-          //     .map((symptom: number) => {
-          //       const option = symptomChoices.find((i) => i.id === symptom);
-          //       return option ? option.text.toLowerCase() : symptom;
-          //     });
-          //   data.symptoms_text = symptoms.join(", ");
-          // }
           if (facilityId != data.facility || patientId != data.patient) {
             navigate(
               `/facility/${data.facility}/patient/${data.patient}/consultation/${data?.id}`,

src/Components/Facility/Consultations/Mews.tsx

@@ -1,5 +1,5 @@
 import { DailyRoundsModel } from "../../Patient/models";
-import { formatDateTime } from "../../../Utils/utils";
+import { formatDateTime, humanizeStrings } from "../../../Utils/utils";
 
 const getRespScore = (value?: number) => {
   if (typeof value !== "number") return;
@@ -78,7 +78,9 @@ export const Mews = ({ dailyRound }: { dailyRound: DailyRoundsModel }) => {
             </div>
             <span className="mt-1 text-xs font-medium text-gray-700">MEWS</span>
             <div className="tooltip-text tooltip-bottom w-48 -translate-x-1/2 translate-y-3 whitespace-pre-wrap text-xs font-medium lg:w-64">
-              <span className="font-bold">{(data as string[]).join(", ")}</span>{" "}
+              <span className="font-bold">
+                {humanizeStrings(data as string[])}
+              </span>{" "}
               data is missing from the last log update.
               <br /> Last Updated: {formatDateTime(dailyRound.modified_date)}
             </div>

src/Components/Facility/DischargedPatientsList.tsx

@@ -15,7 +15,7 @@ import {
 } from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
-import { formatPatientAge } from "../../Utils/utils";
+import { formatPatientAge, humanizeStrings } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
 import SwitchTabs from "../Common/components/SwitchTabs";
 import SortDropdownMenu from "../Common/SortDropdown";
@@ -360,7 +360,7 @@ const DischargedPatientsList = ({
               value(
                 DIAGNOSES_FILTER_LABELS[key],
                 key,
-                getDiagnosisFilterValue(key).join(", "),
+                humanizeStrings(getDiagnosisFilterValue(key)),
               ),
             ),
             badge("Declared Status", "is_declared_positive"),

src/Components/Medicine/MedicinePrescriptionSummary.tsx

@@ -6,6 +6,7 @@ import { lazy } from "react";
 import Timeline, { TimelineNode } from "../../CAREUI/display/Timeline";
 import { MedibaseMedicine, Prescription } from "../Medicine/models";
 import { useTranslation } from "react-i18next";
+import { humanizeStrings } from "../../Utils/utils";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -310,7 +311,7 @@ export default function ConsultationMedicineLogs({
 
       // If there are changes, add them to the changes array
       if (changesForPrescription.length > 0 && !prevPrescription.discontinued) {
-        const message = `Changes: ${changesForPrescription.join(", ")}`;
+        const message = `Changes: ${humanizeStrings(changesForPrescription)}`;
         changes.push({
           prescriptionId: currentPrescription.id,
           changeMessage: message,

src/Components/Patient/ManagePatients.tsx

@@ -33,6 +33,7 @@ import SortDropdownMenu from "../Common/SortDropdown";
 import SwitchTabs from "../Common/components/SwitchTabs";
 import {
   formatPatientAge,
+  humanizeStrings,
   isAntenatal,
   parsePhoneNumber,
 } from "../../Utils/utils.js";
@@ -1027,7 +1028,7 @@ export const PatientManager = () => {
               value(
                 DIAGNOSES_FILTER_LABELS[key],
                 key,
-                getDiagnosisFilterValue(key).join(", "),
+                humanizeStrings(getDiagnosisFilterValue(key)),
               ),
             ),
             badge("Declared Status", "is_declared_positive"),

src/Components/Patient/PatientInfoCard.tsx

@@ -19,6 +19,7 @@ import {
   formatDate,
   formatDateTime,
   formatPatientAge,
+  humanizeStrings,
 } from "../../Utils/utils.js";
 import ABHAProfileModal from "../ABDM/ABHAProfileModal.js";
 import LinkABHANumberModal from "../ABDM/LinkABHANumberModal.js";
@@ -45,16 +46,8 @@ import { AuthorizedForConsultationRelatedActions } from "../../CAREUI/misc/Autho
 const formatSkills = (arr: SkillModel[]) => {
   const skills = arr.map((skill) => skill.skill_object.name);
 
-  if (skills.length === 1) {
-    return skills[0];
-  }
-
-  if (skills.length === 2) {
-    return `${skills[0]} and ${skills[1]}`;
-  }
-
-  if (skills.length === 3) {
-    return `${skills[0]}, ${skills[1]} and ${skills[2]}`;
+  if (skills.length <= 3) {
+    return humanizeStrings(skills);
   }
 
   return `${skills[0]}, ${skills[1]} and ${skills.length - 2} other skills...`;

src/Components/Patient/SampleDetails.tsx

@@ -409,7 +409,7 @@ export const SampleDetails = ({ id }: DetailRoute) => {
                 <span className="font-semibold leading-relaxed">
                   Countries travelled:{" "}
                 </span>
-                {sampleDetails.patient_travel_history.join(", ")}
+                {sampleDetails.patient_travel_history}
               </div>
             )}
           {sampleDetails?.sample_type && (

src/Components/Patient/SamplePreview.tsx

@@ -1,4 +1,4 @@
-import { classNames, formatDateTime } from "../../Utils/utils";
+import { classNames, formatDateTime, humanizeStrings } from "../../Utils/utils";
 
 import { lazy } from "react";
 
@@ -331,7 +331,8 @@ export default function SampleReport(props: ISamplePreviewProps) {
                     {
                       title: "Symptoms",
                       value:
-                        sampleData?.medical_conditions?.symptoms?.join(", "),
+                        sampleData?.medical_conditions?.symptoms &&
+                        humanizeStrings(sampleData.medical_conditions.symptoms),
                     },
                     { title: "First Symptom", value: "............." },
                     {