O3-2908 List Display Delay on Bill Form During Search (#22)

* O3-2908 List Display Delay on Bill Form During Search * code review
openmrs · Mar 14, 2024 · dbea0e8 · dbea0e8
1 parent fa039f0
commit dbea0e8
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 58 deletions.
diff --git a/src/billing-form/billing-form.component.tsx b/src/billing-form/billing-form.component.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import {
   ButtonSet,
   Button,
@@ -14,12 +14,14 @@ import {
 } from '@carbon/react';
 import styles from './billing-form.scss';
 import { useTranslation } from 'react-i18next';
-import { restBaseUrl, showSnackbar, showToast, useConfig } from '@openmrs/esm-framework';
+import { restBaseUrl, showSnackbar, showToast, useConfig, useDebounce } from '@openmrs/esm-framework';
 import { useFetchSearchResults, processBillItems } from '../billing.resource';
 import { mutate } from 'swr';
 import { convertToCurrency } from '../helpers';
 import { z } from 'zod';
 import { TrashCan } from '@carbon/react/icons';
+import fuzzy from 'fuzzy';
+import { type BillabeItem } from '../types';
 
 type BillingFormProps = {
   patientUuid: string;
@@ -37,6 +39,8 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
   const [category, setCategory] = useState('');
   const [saveDisabled, setSaveDisabled] = useState<boolean>(false);
   const [addedItems, setAddedItems] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
 
   const toggleSearch = (choiceSelected) => {
     (document.getElementById('searchField') as HTMLInputElement).disabled = false;
@@ -115,42 +119,41 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
     setGrandTotal(updatedGrandTotal);
   };
 
-  const { data, error, isLoading, isValidating } = useFetchSearchResults(searchVal, category);
-
-  const filterItems = (val) => {
-    setSearchVal(val);
-
-    if (!isLoading && data) {
-      const res = data as { results: any[] };
-
-      const options = res.results.map((o) => {
-        if (!addedItems.some((item) => item.uuid === o.uuid)) {
-          if (o.commonName && o.commonName !== '') {
-            return {
-              uuid: o.uuid || '',
-              Item: o.commonName,
-              Qnty: 1,
-              Price: 10,
-              Total: 10,
-              category: 'StockItem',
-            };
-          } else if (o.name.toLowerCase().includes(val.toLowerCase())) {
-            return {
-              uuid: o.uuid || '',
-              Item: o.name,
-              Qnty: 1,
-              Price: o.servicePrices[0].price,
-              Total: o.servicePrices[0].price,
-              category: 'Service',
-            };
-          }
-        }
-        return null;
-      });
+  const { data, error, isLoading, isValidating } = useFetchSearchResults(debouncedSearchTerm, category);
+
+  const handleSearchTermChange = (e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value);
 
-      setSearchOptions(options.filter((option) => option)); // Filter out undefined/null values
+  const filterItems = useMemo(() => {
+    if (!debouncedSearchTerm || isLoading || error) {
+      return [];
     }
-  };
+
+    const res = data as { results: BillabeItem[] };
+
+    const preprocessedData = res?.results?.map((item) => {
+      return {
+        uuid: item.uuid || '',
+        Item: item.commonName ? item.commonName : item.name,
+        Qnty: 1,
+        Price: item.commonName ? 10 : item.servicePrices[0]?.price,
+        Total: item.commonName ? 10 : item.servicePrices[0]?.price,
+        category: item.commonName ? 'StockItem' : 'Service',
+      };
+    });
+
+    return debouncedSearchTerm
+      ? fuzzy
+          .filter(debouncedSearchTerm, preprocessedData, {
+            extract: (o) => `${o.Item}`,
+          })
+          .sort((r1, r2) => r1.score - r2.score)
+          .map((result) => result.original)
+      : searchOptions;
+  }, [debouncedSearchTerm, data]);
+
+  useEffect(() => {
+    setSearchOptions(filterItems);
+  }, [filterItems]);
 
   const postBillItems = () => {
     const bill = {
@@ -207,36 +210,38 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
         defaultSelected="radio-1"
         className={styles.billingItem}
         onChange={toggleSearch}>
-        <RadioButton labelText={t('stockItem', 'Stock Item')} value="Stock Item" id="radio-1" />
-        <RadioButton labelText={t('service', 'Service')} value="Service" id="radio-2" />
+        <RadioButton labelText={t('stockItem', 'Stock Item')} value="Stock Item" id="stockItem" />
+        <RadioButton labelText={t('service', 'Service')} value="Service" id="service" />
       </RadioButtonGroup>
 
       <div>
         <Search
-          id="searchField"
           size="lg"
-          placeholder="Find your drugs here..."
-          labelText="Search"
+          id="searchField"
           disabled
-          closeButtonLabelText="Clear search input"
-          onChange={() => {}}
+          closeButtonLabelText={t('clearSearchInput', 'Clear search input')}
           className={styles.billingItem}
-          onKeyUp={(e) => {
-            filterItems(e.target.value);
-          }}
+          placeholder={t('searchItems', 'Search items and services')}
+          labelText={t('searchItems', 'Search items and services')}
+          onKeyUp={handleSearchTermChange}
         />
 
         <ul className={styles.searchContent}>
-          {searchOptions.map((row) => (
-            <li key={row.uuid} className={styles.searchItem}>
-              <Button
-                id={row.uuid}
-                onClick={(e) => addItemToBill(e, row.uuid, row.Item, row.category, row.Price)}
-                style={{ background: 'inherit', color: 'black' }}>
-                {row.Item} Qnty.{row.Qnty} Ksh.{row.Price}
-              </Button>
-            </li>
-          ))}
+          {searchOptions?.length > 0 &&
+            searchOptions?.map((row) => (
+              <li key={row.uuid} className={styles.searchItem}>
+                <Button
+                  id={row.uuid}
+                  onClick={(e) => addItemToBill(e, row.uuid, row.Item, row.category, row.Price)}
+                  style={{ background: 'inherit', color: 'black' }}>
+                  {row.Item} Qnty.{row.Qnty} Ksh.{row.Price}
+                </Button>
+              </li>
+            ))}
+
+          {searchOptions?.length === 0 && !isLoading && !!debouncedSearchTerm && (
+            <p>{t('noResultsFound', 'No results found')}</p>
+          )}
         </ul>
       </div>
 
@@ -292,15 +297,15 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
 
       <ButtonSet className={styles.billingItem}>
         <Button kind="secondary" onClick={closeWorkspace}>
-          Discard
+          {t('discard', 'Discard')}
         </Button>
         <Button
           kind="primary"
           disabled={saveDisabled}
           onClick={() => {
             postBillItems();
           }}>
-          Save & Close
+          {t('save', 'Save')}
         </Button>
       </ButtonSet>
     </div>

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -165,3 +165,16 @@ export type ServiceConcept = {
   };
   display: string;
 };
+
+export type BillabeItem = {
+  uuid: string;
+  id?: number;
+  name?: string;
+  commonName?: string;
+  servicePrices?: ServicePrice[];
+};
+
+export type ServicePrice = {
+  price: string;
+  uuid: string;
+};
diff --git a/translations/am.json b/translations/am.json
@@ -31,6 +31,7 @@
   "billWaiverSuccess": "Bill waiver successful",
   "cancel": "Cancel",
   "checkFilters": "Check the filters above",
+  "clearSearchInput": "Clear search input",
   "discard": "Discard",
   "discount": "Discount",
   "enterAmount": "Enter amount",
@@ -62,6 +63,7 @@
   "noMatchingItemsToDisplay": "No matching items to display",
   "noMatchingServicesToDisplay": "No matching services to display",
   "noResultsFor": "No results for",
+  "noResultsFound": "No results found",
   "noServicesToDisplay": "There are no services to display",
   "ok": "OK",
   "patientBillingAlert": "Patient Billing Alert",
@@ -86,6 +88,7 @@
   "save": "Save",
   "searchConcepts": "Search associated concept",
   "searching": "Searching",
+  "searchItems": "Search items and services",
   "searchThisTable": "Search this table",
   "selectBillableService": "Select a billable service...",
   "selectCategory": "Select category",

diff --git a/translations/en.json b/translations/en.json
@@ -31,6 +31,7 @@
   "billWaiverSuccess": "Bill waiver successful",
   "cancel": "Cancel",
   "checkFilters": "Check the filters above",
+  "clearSearchInput": "Clear search input",
   "discard": "Discard",
   "discount": "Discount",
   "enterAmount": "Enter amount",
@@ -62,6 +63,7 @@
   "noMatchingItemsToDisplay": "No matching items to display",
   "noMatchingServicesToDisplay": "No matching services to display",
   "noResultsFor": "No results for",
+  "noResultsFound": "No results found",
   "noServicesToDisplay": "There are no services to display",
   "ok": "OK",
   "patientBillingAlert": "Patient Billing Alert",
@@ -86,6 +88,7 @@
   "save": "Save",
   "searchConcepts": "Search associated concept",
   "searching": "Searching",
+  "searchItems": "Search items and services",
   "searchThisTable": "Search this table",
   "selectBillableService": "Select a billable service...",
   "selectCategory": "Select category",

diff --git a/translations/es.json b/translations/es.json
@@ -31,6 +31,7 @@
   "billWaiverSuccess": "Bill waiver successful",
   "cancel": "Cancel",
   "checkFilters": "Check the filters above",
+  "clearSearchInput": "Clear search input",
   "discard": "Discard",
   "discount": "Discount",
   "enterAmount": "Enter amount",
@@ -62,6 +63,7 @@
   "noMatchingItemsToDisplay": "No matching items to display",
   "noMatchingServicesToDisplay": "No matching services to display",
   "noResultsFor": "No results for",
+  "noResultsFound": "No results found",
   "noServicesToDisplay": "There are no services to display",
   "ok": "OK",
   "patientBillingAlert": "Patient Billing Alert",
@@ -86,6 +88,7 @@
   "save": "Save",
   "searchConcepts": "Search associated concept",
   "searching": "Searching",
+  "searchItems": "Search items and services",
   "searchThisTable": "Search this table",
   "selectBillableService": "Select a billable service...",
   "selectCategory": "Select category",

diff --git a/translations/fr.json b/translations/fr.json
@@ -31,6 +31,7 @@
   "billWaiverSuccess": "Bill waiver successful",
   "cancel": "Cancel",
   "checkFilters": "Check the filters above",
+  "clearSearchInput": "Clear search input",
   "discard": "Discard",
   "discount": "Discount",
   "enterAmount": "Enter amount",
@@ -62,6 +63,7 @@
   "noMatchingItemsToDisplay": "No matching items to display",
   "noMatchingServicesToDisplay": "No matching services to display",
   "noResultsFor": "No results for",
+  "noResultsFound": "No results found",
   "noServicesToDisplay": "There are no services to display",
   "ok": "OK",
   "patientBillingAlert": "Patient Billing Alert",
@@ -86,6 +88,7 @@
   "save": "Save",
   "searchConcepts": "Search associated concept",
   "searching": "Searching",
+  "searchItems": "Search items and services",
   "searchThisTable": "Search this table",
   "selectBillableService": "Select a billable service...",
   "selectCategory": "Select category",

diff --git a/translations/he.json b/translations/he.json
@@ -31,6 +31,7 @@
   "billWaiverSuccess": "Bill waiver successful",
   "cancel": "Cancel",
   "checkFilters": "Check the filters above",
+  "clearSearchInput": "Clear search input",
   "discard": "Discard",
   "discount": "Discount",
   "enterAmount": "Enter amount",
@@ -62,6 +63,7 @@
   "noMatchingItemsToDisplay": "No matching items to display",
   "noMatchingServicesToDisplay": "No matching services to display",
   "noResultsFor": "No results for",
+  "noResultsFound": "No results found",
   "noServicesToDisplay": "There are no services to display",
   "ok": "OK",
   "patientBillingAlert": "Patient Billing Alert",
@@ -86,6 +88,7 @@
   "save": "Save",
   "searchConcepts": "Search associated concept",
   "searching": "Searching",
+  "searchItems": "Search items and services",
   "searchThisTable": "Search this table",
   "selectBillableService": "Select a billable service...",
   "selectCategory": "Select category",

diff --git a/translations/km.json b/translations/km.json
@@ -31,6 +31,7 @@
   "billWaiverSuccess": "Bill waiver successful",
   "cancel": "Cancel",
   "checkFilters": "Check the filters above",
+  "clearSearchInput": "Clear search input",
   "discard": "Discard",
   "discount": "Discount",
   "enterAmount": "Enter amount",
@@ -62,6 +63,7 @@
   "noMatchingItemsToDisplay": "No matching items to display",
   "noMatchingServicesToDisplay": "No matching services to display",
   "noResultsFor": "No results for",
+  "noResultsFound": "No results found",
   "noServicesToDisplay": "There are no services to display",
   "ok": "OK",
   "patientBillingAlert": "Patient Billing Alert",
@@ -86,6 +88,7 @@
   "save": "Save",
   "searchConcepts": "Search associated concept",
   "searching": "Searching",
+  "searchItems": "Search items and services",
   "searchThisTable": "Search this table",
   "selectBillableService": "Select a billable service...",
   "selectCategory": "Select category",