Reduce lodash bundle size. Fixes ohcnetwork#6004

package.json

@@ -72,7 +72,7 @@
     "events": "^3.3.0",
     "i18next": "^23.2.7",
     "i18next-browser-languagedetector": "^7.1.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "postcss-loader": "^7.3.3",
     "qrcode.react": "^3.1.0",
     "raviger": "^4.1.2",
@@ -113,7 +113,7 @@
     "@types/cypress": "^1.1.3",
     "@types/echarts": "^4.9.18",
     "@types/google.maps": "^3.53.4",
-    "@types/lodash": "^4.14.195",
+    "@types/lodash-es": "^4.17.9",
     "@types/lodash.get": "^4.4.7",
     "@types/node": "^20.4.0",
     "@types/prop-types": "*",

src/Common/hooks/useAsyncOptions.ts

@@ -1,4 +1,4 @@
-import { debounce } from "lodash";
+import { debounce } from "lodash-es";
 import { useMemo, useState } from "react";
 import { useDispatch } from "react-redux";
 

src/Components/Auth/Login.tsx

@@ -4,7 +4,7 @@ import { postForgotPassword, postLogin } from "../../Redux/actions";
 import { useTranslation } from "react-i18next";
 import ReCaptcha from "react-google-recaptcha";
 import * as Notification from "../../Utils/Notifications.js";
-import { get } from "lodash";
+import { get } from "lodash-es";
 import LegendInput from "../../CAREUI/interactive/LegendInput";
 import LanguageSelectorLogin from "../Common/LanguageSelectorLogin";
 import CareIcon from "../../CAREUI/icons/CareIcon";

src/Components/Common/Uptime.tsx

@@ -4,7 +4,7 @@ import { listAssetAvailability } from "../../Redux/actions";
 import { useDispatch } from "react-redux";
 import * as Notification from "../../Utils/Notifications.js";
 import { AssetStatus, AssetUptimeRecord } from "../Assets/AssetTypes";
-import { reverse } from "lodash";
+import { reverse } from "lodash-es";
 import { classNames } from "../../Utils/utils";
 import dayjs from "../../Utils/dayjs";
 

src/Components/ExternalResult/ExternalResultUpload.tsx

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import { startCase, camelCase } from "lodash-es";
 import { navigate } from "raviger";
 import { lazy, useState } from "react";
 import CSVReader from "react-csv-reader";
@@ -122,7 +122,7 @@ export default function ExternalResultUpload() {
                       ? errors.map((error: any) => {
                           return (
                             <div key={error[0][0]}>
-                              {_.startCase(_.camelCase(error[0][0]))} -{" "}
+                              {startCase(camelCase(error[0][0]))} -{" "}
                               {error[0][1]}
                             </div>
                           );

src/Components/Facility/Investigations/InvestigationTable.tsx

@@ -2,7 +2,6 @@ import ButtonV2 from "../../Common/components/ButtonV2";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { SelectFormField } from "../../Form/FormFields/SelectFormField";
 import TextFormField from "../../Form/FormFields/TextFormField";
-import _ from "lodash";
 import { classNames } from "../../../Utils/utils";
 import { useState } from "react";
 

src/Components/Facility/Investigations/Reports/index.tsx

@@ -17,7 +17,7 @@ import { InvestigationResponse } from "./types";
 import Loading from "../../../Common/Loading";
 import Page from "../../../Common/components/Page";
 import ReportTable from "./ReportTable";
-import _ from "lodash";
+import { chain } from "lodash-es";
 import { useDispatch } from "react-redux";
 import { useRef } from "react";
 
@@ -175,7 +175,7 @@ const InvestigationReports = ({ id }: any) => {
       })
     );
 
-    const investigationList = _.chain(data)
+    const investigationList = chain(data)
       .compact()
       .flatten()
       .map((i) => ({

src/Components/Facility/Investigations/Reports/utils.tsx

@@ -1,20 +1,20 @@
-import _ from "lodash";
+import { memoize, chain, findIndex } from "lodash-es";
 import { InvestigationResponse } from "./types";
 
-export const transformData = _.memoize((data: InvestigationResponse) => {
-  const sessions = _.chain(data)
+export const transformData = memoize((data: InvestigationResponse) => {
+  const sessions = chain(data)
     .map((value) => value.session_object)
     .uniqBy("session_external_id")
     .orderBy("session_created_date", "desc")
     .value();
-  const groupByInvestigation = _.chain(data)
+  const groupByInvestigation = chain(data)
     .groupBy("investigation_object.external_id")
     .values()
     .value();
   const reqData = groupByInvestigation.map((value) => {
     const sessionValues = Array.from({ length: sessions.length });
     value.forEach((val) => {
-      const sessionIndex = _.findIndex(sessions, [
+      const sessionIndex = findIndex(sessions, [
         "session_external_id",
         val.session_object.session_external_id,
       ]);
@@ -55,7 +55,7 @@ export const transformData = _.memoize((data: InvestigationResponse) => {
   return { sessions, data: reqData };
 });
 
-export const getColorIndex = _.memoize(
+export const getColorIndex = memoize(
   ({ max, min, value }: { min?: number; max?: number; value?: number }) => {
     if (!max && min && value) {
       // 1 => yellow color

src/Components/Facility/Investigations/ShowInvestigation.tsx

@@ -9,7 +9,7 @@ import {
 import PageTitle from "../../Common/PageTitle";
 import InvestigationTable from "./InvestigationTable";
 
-import _ from "lodash";
+import { set, chain } from "lodash-es";
 import { navigate } from "raviger";
 import * as Notification from "../../../Utils/Notifications.js";
 
@@ -110,7 +110,7 @@ export default function ShowInvestigation(props: any) {
 
   const handleValueChange = (value: any, name: string) => {
     const changedFields = { ...state.changedFields };
-    _.set(changedFields, name, value);
+    set(changedFields, name, value);
     dispatch({ type: "set_changed_fields", changedFields });
   };
 
@@ -147,7 +147,7 @@ export default function ShowInvestigation(props: any) {
   };
 
   const handleUpdateCancel = useCallback(() => {
-    const changedValues = _.chain(state.initialValues)
+    const changedValues = chain(state.initialValues)
       .map((val: any, _key: string) => ({
         id: val?.id,
         initialValue: val?.notes || val?.value || null,

src/Components/Facility/Investigations/Table.tsx

@@ -1,7 +1,7 @@
 import { FieldChangeEvent } from "../../Form/FormFields/Utils";
 import { SelectFormField } from "../../Form/FormFields/SelectFormField";
 import TextFormField from "../../Form/FormFields/TextFormField";
-import _ from "lodash";
+import { set } from "lodash-es";
 import { useState } from "react";
 
 const TestRow = ({ data, value, onChange, i }: any) => {
@@ -59,7 +59,7 @@ export const TestTable = ({ title, data, state, dispatch }: any) => {
 
   const handleValueChange = (value: any, name: string) => {
     const form = { ...state };
-    _.set(form, name, value);
+    set(form, name, value);
     dispatch({ type: "set_form", form });
   };
 

src/Components/Facility/LegacyFacilityCNS.tsx

@@ -16,7 +16,7 @@ import Pagination from "../Common/Pagination";
 import { PatientModel } from "../Patient/models";
 import { FacilityModel } from "./models";
 import AutocompleteFormField from "../Form/FormFields/Autocomplete";
-import { uniqBy } from "lodash";
+import { uniqBy } from "lodash-es";
 import DialogModal from "../Common/Dialog";
 import { LegacyMonitorCard } from "./LegacyMonitorCard";
 

src/Components/Form/AutoCompleteAsync.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo } from "react";
 import { Combobox } from "@headlessui/react";
-import { debounce } from "lodash";
+import { debounce } from "lodash-es";
 import { DropdownTransition } from "../Common/components/HelperComponents";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import {

src/Components/Form/Form.tsx

@@ -1,4 +1,4 @@
-import { isEmpty, omitBy } from "lodash";
+import { isEmpty, omitBy } from "lodash-es";
 import { useEffect, useMemo, useState } from "react";
 import { classNames } from "../../Utils/utils";
 import { Cancel, Submit } from "../Common/components/ButtonV2";

src/Components/Patient/PatientRegister.tsx

@@ -61,7 +61,7 @@ import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
 import TransferPatientDialog from "../Facility/TransferPatientDialog";
 import countryList from "../../Common/static/countries.json";
-import { debounce } from "lodash";
+import { debounce } from "lodash-es";
 
 import useAppHistory from "../../Common/hooks/useAppHistory";
 import useConfig from "../../Common/hooks/useConfig";

src/Components/Patient/SampleDetails.tsx

@@ -7,7 +7,7 @@ import ButtonV2 from "../Common/components/ButtonV2";
 import Card from "../../CAREUI/display/Card";
 import { FileUpload } from "./FileUpload";
 import Page from "../Common/components/Page";
-import _ from "lodash";
+import { startCase, camelCase } from "lodash-es";
 import { formatAge, formatDateTime } from "../../Utils/utils";
 import { getTestSample } from "../../Redux/actions";
 
@@ -262,11 +262,11 @@ export const SampleDetails = ({ id }: SampleDetailsProps) => {
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div>
             <span className="font-semibold leading-relaxed">Status: </span>{" "}
-            {_.startCase(_.camelCase(flow.status))}
+            {startCase(camelCase(flow.status))}
           </div>
           <div>
             <span className="font-semibold leading-relaxed">Label:</span>{" "}
-            {_.capitalize(flow.notes)}
+            {capitalize(flow.notes)}
           </div>
           <div>
             <span className="font-semibold leading-relaxed">Created On :</span>{" "}
@@ -346,7 +346,7 @@ export const SampleDetails = ({ id }: SampleDetailsProps) => {
               <span className="font-semibold leading-relaxed">
                 Doctor&apos;s Name:{" "}
               </span>
-              {_.startCase(_.camelCase(sampleDetails.doctor_name))}
+              {startCase(camelCase(sampleDetails.doctor_name))}
             </div>
           )}
           {sampleDetails.diagnosis && (
@@ -429,7 +429,7 @@ export const SampleDetails = ({ id }: SampleDetailsProps) => {
               <span className="font-semibold leading-relaxed">
                 Sample Type:{" "}
               </span>
-              {_.startCase(_.camelCase(sampleDetails.sample_type))}
+              {startCase(camelCase(sampleDetails.sample_type))}
             </div>
           )}
         </div>

src/Components/Patient/SampleTestCard.tsx

@@ -6,7 +6,7 @@ import { SAMPLE_TEST_STATUS } from "../../Common/constants";
 import { patchSample } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications";
 import UpdateStatusDialog from "./UpdateStatusDialog";
-import _ from "lodash";
+import { startCase, camelCase } from "lodash-es";
 import { formatDateTime } from "../../Utils/utils";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
@@ -92,7 +92,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
               Status{" "}
             </div>
             <div className="mt-1 overflow-x-scroll whitespace-normal break-words text-sm font-medium leading-5">
-              {_.startCase(_.camelCase(itemData.status))}
+              {startCase(camelCase(itemData.status))}
             </div>
           </div>
         </div>
@@ -126,7 +126,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
               Result{" "}
             </div>
             <div className="mt-1 overflow-x-scroll whitespace-normal break-words text-sm font-medium leading-5">
-              {_.startCase(_.camelCase(itemData.result))}
+              {startCase(camelCase(itemData.result))}
             </div>
           </div>
         </div>

src/Redux/fireRequest.tsx

@@ -1,6 +1,6 @@
 import * as Notification from "../Utils/Notifications.js";
 
-import { isEmpty, omitBy } from "lodash";
+import { isEmpty, omitBy } from "lodash-es";
 
 import { LocalStorageKeys } from "../Common/constants";
 import api from "./api";

src/Utils/Notifications.js

@@ -1,6 +1,6 @@
 import { alert, Stack, defaultModules } from "@pnotify/core";
 import * as PNotifyMobile from "@pnotify/mobile";
-import _ from "lodash";
+import { startCase, camelCase } from "lodash-es";
 
 defaultModules.set(PNotifyMobile, {});
 
@@ -43,7 +43,7 @@ const notifyError = (error) => {
     errorMsg = error.detail;
   } else {
     for (let [key, value] of Object.entries(error)) {
-      let keyName = _.startCase(_.camelCase(key));
+      let keyName = startCase(camelCase(key));
       if (Array.isArray(value)) {
         const uniques = [...new Set(value)];
         errorMsg += `${keyName} - ${uniques.splice(0, 5).join(", ")}`;