fix: sorted supply search result by lenght to appear best results fir…

…st (#300)
SOS-RS · May 24, 2024 · 825536c · 825536c
1 parent d208bf1
commit 825536c
Showing 1 changed file with 22 additions and 14 deletions.
diff --git a/src/pages/EditShelterSupply/components/SupplySearch/SupplySearch.tsx b/src/pages/EditShelterSupply/components/SupplySearch/SupplySearch.tsx
@@ -3,17 +3,19 @@ import { IUseSuppliesData } from '@/hooks/useSupplies/types';
 import { Search, PlusCircle, X } from 'lucide-react';
 import { useState } from 'react';
 import { Fragment } from 'react/jsx-runtime';
-import {ISupplySearchProps} from './types';
+import { ISupplySearchProps } from './types';
 
 export const SupplySearch = ({
   supplyItems,
   limit = 10,
   onSearch,
   onSelectItem,
-  onAddNewItem
+  onAddNewItem,
 }: ISupplySearchProps) => {
   const [searchValue, setSearchValue] = useState<string>('');
-  const [selectedItem, setSelectedItem] = useState<IUseSuppliesData | null>(null);
+  const [selectedItem, setSelectedItem] = useState<IUseSuppliesData | null>(
+    null
+  );
 
   function onChangeInputHandler(event: React.ChangeEvent<HTMLInputElement>) {
     setSearchValue(event.target.value);
@@ -51,21 +53,27 @@ export const SupplySearch = ({
           value={searchValue}
           onChange={onChangeInputHandler}
         />
-        <X className="h-4 w-4 ml-2 hover:cursor-pointer" onClick={onClearClickHandler} />
+        <X
+          className="h-4 w-4 ml-2 hover:cursor-pointer"
+          onClick={onClearClickHandler}
+        />
       </div>
 
       {!!searchValue && !selectedItem ? (
         <div className="flex-col items-center rounded-md border border-input p-3 bg-slate-50 mt-1">
-          {supplyItems.slice(0, limit).map((item) => (
-            <div
-              key={item.id}
-              className="h-10 flex items-center rounded-md p-2 hover:bg-slate-100 hover:cursor-pointer"
-              onClick={() => onSelectItemHandler(item)}
-            >
-              <span className="text-sm">{item.name}</span>
-            </div>
-          ))}
-          <div 
+          {supplyItems
+            .sort((a, b) => a.name.length - b.name.length)
+            .slice(0, limit)
+            .map((item) => (
+              <div
+                key={item.id}
+                className="h-10 flex items-center rounded-md p-2 hover:bg-slate-100 hover:cursor-pointer"
+                onClick={() => onSelectItemHandler(item)}
+              >
+                <span className="text-sm">{item.name}</span>
+              </div>
+            ))}
+          <div
             className="h-10 flex items-center rounded-md p-2 hover:bg-slate-100 hover:cursor-pointer"
             onClick={onAddNewItemHandler}
           >