Sort wards by ward number in filters + adds utility method: compareBy

src/Components/Diagnosis/LegacyDiagnosesList.tsx

@@ -6,6 +6,7 @@ import {
 } from "./types";
 import { useTranslation } from "react-i18next";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import { compareBy } from "../../Utils/utils";
 
 interface Props {
   diagnoses: ConsultationDiagnosis[];
@@ -22,7 +23,7 @@ function groupDiagnoses(diagnoses: ConsultationDiagnosis[]) {
   for (const status of ActiveConditionVerificationStatuses) {
     groupedDiagnoses[status] = diagnoses
       .filter((d) => d.verification_status === status)
-      .sort((a, b) => Number(b.is_principal) - Number(a.is_principal));
+      .sort(compareBy("is_principal"));
   }
 
   return groupedDiagnoses;

src/Components/ExternalResult/ListFilter.tsx

@@ -6,11 +6,12 @@ import TextFormField from "../Form/FormFields/TextFormField";
 import { MultiSelectFormField } from "../Form/FormFields/SelectFormField";
 import DateRangeFormField from "../Form/FormFields/DateRangeFormField";
 import dayjs from "dayjs";
-import { dateQueryString } from "../../Utils/utils";
+import { dateQueryString, compareBy } from "../../Utils/utils";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import Loading from "../Common/Loading";
+import { LocalBodyModel, WardModel } from "../Facility/models";
 
 const clearFilterState = {
   created_date_before: "",
@@ -27,10 +28,10 @@ const getDate = (value: any) =>
 
 export default function ListFilter(props: any) {
   const { filter, onChange, closeFilter, dataList, removeFilters } = props;
-  const [wardList, setWardList] = useState<any[]>([]);
-  const [lsgList, setLsgList] = useState<any[]>([]);
-  const [wards, setWards] = useState<any[]>([]);
-  const [selectedLsgs, setSelectedLsgs] = useState<any[]>([]);
+  const [wardList, setWardList] = useState<WardModel[]>([]);
+  const [lsgList, setLsgList] = useState<LocalBodyModel[]>([]);
+  const [wards, setWards] = useState<WardModel[]>([]);
+  const [selectedLsgs, setSelectedLsgs] = useState<LocalBodyModel[]>([]);
   const authUser = useAuthUser();
   const [filterState, setFilterState] = useMergeState({
     created_date_before: filter.created_date_before || null,
@@ -47,32 +48,32 @@ export default function ListFilter(props: any) {
     pathParams: { id: String(authUser.district) },
     onResponse: ({ res, data }) => {
       if (res && data) {
-        let allWards: any[] = [];
-        let allLsgs: any[] = [];
+        const allWards: any[] = [];
+        const allLsgs: any[] = [];
+
         if (res && data) {
           data.forEach((local: any) => {
-            allLsgs = [...allLsgs, { id: local.id, name: local.name }];
+            allLsgs.push({ id: local.id, name: local.name });
             if (local.wards) {
               local.wards.forEach((ward: any) => {
-                allWards = [
-                  ...allWards,
-                  {
-                    id: ward.id,
-                    name: ward.number + ": " + ward.name,
-                    panchayath: local.name,
-                    number: ward.number,
-                    local_body_id: local.id,
-                  },
-                ];
+                allWards.push({
+                  id: ward.id,
+                  name: ward.number + ": " + ward.name,
+                  panchayath: local.name,
+                  number: ward.number,
+                  local_body_id: local.id,
+                });
               });
             }
           });
         }
 
-        sortByName(allWards);
-        sortByName(allLsgs);
-        setWardList(allWards || []);
-        setLsgList(allLsgs || []);
+        allWards.sort(compareBy("number"));
+        allLsgs.sort(compareBy("name"));
+
+        setWardList(allWards);
+        setLsgList(allLsgs);
+
         const filteredWard = filter?.wards?.split(",").map(Number);
         const selectedWards: any =
           filteredWard && allWards
@@ -106,13 +107,6 @@ export default function ListFilter(props: any) {
     setFilterState(filterData);
   };
 
-  const handleWardChange = (value: any) => {
-    setWards(value);
-  };
-  const handleLsgChange = (value: any) => {
-    setSelectedLsgs(value);
-  };
-
   const field = (name: string) => ({
     name,
     label: t(name),
@@ -161,12 +155,6 @@ export default function ListFilter(props: any) {
     dataList(selectedLsgs, wards);
   };
 
-  const sortByName = (items: any) => {
-    items.sort(function (a: any, b: any) {
-      return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
-    });
-  };
-
   const filterWards = () => {
     const selectedLsgIds: any = selectedLsgs.map((e) => {
       return e.id;
@@ -205,29 +193,27 @@ export default function ListFilter(props: any) {
         closeFilter();
       }}
     >
-      <div>
-        <MultiSelectFormField
-          name="local_bodies"
-          options={lsgList}
-          label={t("Local Body")}
-          placeholder={t("select_local_body")}
-          value={selectedLsgs}
-          optionLabel={(option: any) => option.name}
-          onChange={(e: any) => handleLsgChange(e.value)}
-        />
-      </div>
+      <MultiSelectFormField
+        name="local_bodies"
+        options={lsgList}
+        label={t("Local Body")}
+        placeholder={t("select_local_body")}
+        value={selectedLsgs}
+        optionLabel={(option) => option.name}
+        optionDescription={(option) => option.localbody_code}
+        onChange={({ value }) => setSelectedLsgs(value)}
+      />
 
-      <div>
-        <MultiSelectFormField
-          name="wards"
-          options={filterWards()}
-          label={t("Ward")}
-          placeholder={t("select_wards")}
-          value={wards}
-          optionLabel={(option: any) => option.name}
-          onChange={(e: any) => handleWardChange(e.value)}
-        />
-      </div>
+      <MultiSelectFormField
+        name="wards"
+        options={filterWards() as WardModel[]}
+        label={t("Ward")}
+        placeholder={t("select_wards")}
+        value={wards}
+        optionLabel={(option) => option.name}
+        optionDescription={(option) => option.panchayath}
+        onChange={({ value }) => setWards(value)}
+      />
       <DateRangeFormField
         name="created_date"
         id="created_date"

src/Components/ExternalResult/ResultUpdate.tsx

@@ -11,6 +11,7 @@ import Page from "../Common/components/Page.js";
 import useQuery from "../../Utils/request/useQuery.js";
 import routes from "../../Redux/api.js";
 import request from "../../Utils/request/request.js";
+import { compareBy } from "../../Utils/utils.js";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -265,11 +266,9 @@ export default function UpdateResult(props: any) {
                     name="ward"
                     label="Ward/Division of respective LSGI"
                     required
-                    options={ward
-                      .sort((a, b) => a.number - b.number)
-                      .map((e) => {
-                        return { id: e.id, name: e.number + ": " + e.name };
-                      })}
+                    options={ward.sort(compareBy("number")).map((e) => {
+                      return { id: e.id, name: e.number + ": " + e.name };
+                    })}
                     value={state.form.ward}
                     optionLabel={(ward) => ward.name}
                     optionValue={(ward) => ward.id}

src/Components/Facility/FacilityCreate.tsx

@@ -1,7 +1,14 @@
 import * as Notification from "../../Utils/Notifications.js";
 
 import ButtonV2, { Cancel, Submit } from "../Common/components/ButtonV2";
-import { CapacityModal, DoctorModal } from "./models";
+import {
+  CapacityModal,
+  DistrictModel,
+  DoctorModal,
+  LocalBodyModel,
+  StateModel,
+  WardModel,
+} from "./models";
 import { DraftSection, useAutoSaveReducer } from "../../Utils/AutoSave.js";
 import {
   FACILITY_FEATURE_TYPES,
@@ -30,6 +37,7 @@ import {
   getPincodeDetails,
   includesIgnoreCase,
   parsePhoneNumber,
+  compareBy,
 } from "../../Utils/utils";
 import {
   phonePreg,
@@ -67,15 +75,6 @@ interface FacilityProps {
   facilityId?: string;
 }
 
-interface StateObj {
-  id: number;
-  name: string;
-}
-
-interface WardObj extends StateObj {
-  number: number;
-}
-
 type FacilityForm = {
   facility_type: string;
   name: string;
@@ -162,10 +161,10 @@ export const FacilityCreate = (props: FacilityProps) => {
   const [isDistrictLoading, setIsDistrictLoading] = useState(false);
   const [isLocalbodyLoading, setIsLocalbodyLoading] = useState(false);
   const [isWardLoading, setIsWardLoading] = useState(false);
-  const [states, setStates] = useState<StateObj[]>([]);
-  const [districts, setDistricts] = useState<StateObj[]>([]);
-  const [localBodies, setLocalBodies] = useState<StateObj[]>([]);
-  const [ward, setWard] = useState<WardObj[]>([]);
+  const [states, setStates] = useState<StateModel[]>([]);
+  const [districts, setDistricts] = useState<DistrictModel[]>([]);
+  const [localBodies, setLocalBodies] = useState<LocalBodyModel[]>([]);
+  const [ward, setWard] = useState<WardModel[]>([]);
   const [currentStep, setCurrentStep] = useState(1);
   const [createdFacilityId, setCreatedFacilityId] = useState("");
   const [showAutoFilledPincode, setShowAutoFilledPincode] = useState(false);
@@ -855,14 +854,12 @@ export const FacilityCreate = (props: FacilityProps) => {
                     className={isWardLoading ? "animate-pulse" : ""}
                     disabled={isWardLoading}
                     placeholder="Choose Ward"
-                    options={ward
-                      .sort((a, b) => a.number - b.number)
-                      .map((e) => {
-                        return {
-                          id: e.id,
-                          name: e.number + ": " + e.name,
-                        };
-                      })}
+                    options={ward.sort(compareBy("number")).map((e) => {
+                      return {
+                        id: e.id,
+                        name: e.number + ": " + e.name,
+                      };
+                    })}
                     optionLabel={(o) => o.name}
                     optionValue={(o) => o.id}
                   />

src/Components/Facility/models.tsx

@@ -29,7 +29,8 @@ export interface WardModel {
   id: number;
   name: string;
   number: number;
-  local_body: number;
+  panchayath: string;
+  local_body_id: LocalBodyModel["id"];
 }
 
 export interface FacilityModel {

src/Components/Form/FormFields/RangeAutocompleteFormField.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import AutocompleteFormField from "./Autocomplete";
 import { FormFieldBaseProps } from "./Utils";
-import { classNames } from "../../../Utils/utils";
+import { classNames, compareBy } from "../../../Utils/utils";
 import ButtonV2 from "../../Common/components/ButtonV2";
 
 interface Threshold {
@@ -23,8 +23,7 @@ type Props = FormFieldBaseProps<number> & {
 
 export default function RangeAutocompleteFormField(props: Props) {
   const options = useMemo(() => {
-    const sortedThresholds =
-      props.thresholds?.sort((a, b) => a.value - b.value) || [];
+    const sortedThresholds = props.thresholds?.sort(compareBy("value")) || [];
 
     const getThreshold = (value: number) => {
       const threshold = sortedThresholds.findLast(

src/Components/Patient/PatientRegister.tsx

@@ -27,6 +27,7 @@ import {
   includesIgnoreCase,
   parsePhoneNumber,
   scrollTo,
+  compareBy,
 } from "../../Utils/utils";
 import { navigate, useQueryParams } from "raviger";
 import { statusType, useAbortableEffect } from "../../Common/utils";
@@ -1507,7 +1508,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                     {...field("ward")}
                                     label="Ward"
                                     options={ward
-                                      .sort((a, b) => a.number - b.number)
+                                      .sort(compareBy("number"))
                                       .map((e) => {
                                         return {
                                           id: e.id,

src/Utils/utils.ts

@@ -455,3 +455,9 @@ export const invalidateFiltersCache = () => {
     }
   }
 };
+
+export const compareBy = <T extends object>(key: keyof T) => {
+  return (a: T, b: T) => {
+    return a[key] < b[key] ? -1 : a[key] > b[key] ? 1 : 0;
+  };
+};