Make new input conditionally use debounce (#274)

ff14-advanced-market-search · Jun 27, 2023 · 126a465 · 126a465
1 parent eae80d0
commit 126a465
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 24 deletions.
diff --git a/app/components/Common/DebouncedSelectInput.tsx b/app/components/Common/DebouncedSelectInput.tsx
@@ -41,6 +41,8 @@ interface Props {
   placeholder?: string
   containerClassNames?: string
   label?: string
+  useDebounce?: boolean
+  debounceTimer?: number
 }
 
 const DebouncedSelectInput = forwardRef<HTMLInputElement, Props>(
@@ -55,18 +57,27 @@ const DebouncedSelectInput = forwardRef<HTMLInputElement, Props>(
       placeholder,
       containerClassNames,
       label,
-      id
+      id,
+      useDebounce = false,
+      debounceTimer
     },
     ref
   ) => {
     const [name, setName] = useState('')
 
     const items = getItems(name, selectOptions)
+
     const handleDebounceChange = (debouncedValue: string) => {
       setName(debouncedValue)
       onSelect?.(debouncedValue)
     }
 
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value
+      setName(value)
+      onSelect?.(value)
+    }
+
     const className = classNames(
       'flex flex-col rounded-md shadow-sm',
       error ? 'border-red-500' : '',
@@ -92,15 +103,28 @@ const DebouncedSelectInput = forwardRef<HTMLInputElement, Props>(
           </>
         )}
         <div className="flex rounded-md shadow-sm border border-gray-300 dark:border-gray-400 mt-1">
-          <DebouncedInput
-            ref={ref}
-            id={id}
-            onDebouncedChange={handleDebounceChange}
-            className={inputClassname}
-            list={'items-' + id}
-            name={formName}
-            placeholder={placeholder}
-          />
+          {useDebounce ? (
+            <DebouncedInput
+              ref={ref}
+              id={id}
+              onDebouncedChange={handleDebounceChange}
+              className={inputClassname}
+              list={'items-' + id}
+              name={formName}
+              placeholder={placeholder}
+              debounceTimer={debounceTimer}
+            />
+          ) : (
+            <input
+              ref={ref}
+              id={id}
+              onChange={handleChange}
+              className={inputClassname}
+              list={'items-' + id}
+              name={formName}
+              placeholder={placeholder}
+            />
+          )}
           {label && (
             <span
               className={`inline-flex items-center justify-center text-center px-3 rounded-r-md bg-gray-50 text-gray-500 sm:text-sm dark:text-gray-300 dark:bg-gray-700`}>

diff --git a/app/components/navigation/sidebar/Sidebar.tsx b/app/components/navigation/sidebar/Sidebar.tsx
@@ -773,6 +773,7 @@ const ItemSearch = () => {
               error={searchError}
               placeholder="Search items..."
               containerClassNames="w-40"
+              useDebounce={true}
             />
 
             <SubmitButton

diff --git a/app/routes/wow/price-alert/index.tsx b/app/routes/wow/price-alert/index.tsx
@@ -12,8 +12,8 @@ import RegionAndServerSelect from '~/components/form/WoW/RegionAndServerSelect'
 import { getUserSessionData } from '~/sessions'
 import type { WoWLoaderData, WoWServerRegion } from '~/requests/WoW/types'
 import { useTypedSelector } from '~/redux/useTypedSelector'
-import type { ItemSelected } from '~/components/Common/ItemSelect'
-import ItemSelect from '~/components/Common/ItemSelect'
+import DebouncedSelectInput from '~/components/Common/DebouncedSelectInput'
+import { getItemIDByName } from '~/utils/items'
 
 interface Auction {
   itemName: string
@@ -119,19 +119,21 @@ const Index = () => {
 
   const priceOrQuantity = isPrice ? 'price' : 'quantity'
 
-  const handleInputChange = (item: ItemSelected | undefined) => {
+  const handleInputChange = (name: string) => {
     if (error) {
       setError(undefined)
     }
 
-    if (!item) {
+    const itemID = getItemIDByName(name, wowItems)
+
+    if (!itemID) {
       setFormState(null)
       return
     }
 
     setFormState({
-      itemName: item.name,
-      itemID: parseInt(item.id, 10),
+      itemName: name,
+      itemID: parseInt(itemID, 10),
       desiredState: 'below',
       price: 1000
     })
@@ -199,15 +201,17 @@ const Index = () => {
               </div>
             </div>
             <div className="px-4">
-              <ItemSelect
-                itemList={wowItems}
-                onTextChange={() => {
-                  if (error) {
-                    setError(undefined)
-                  }
-                }}
-                onSelectChange={handleInputChange}
+              <DebouncedSelectInput
+                id="wow-item-search"
+                title="Search for item by name"
                 tooltip="Select items to generate an alert for"
+                placeholder="Search for items..."
+                label="Item"
+                selectOptions={wowItems.map(([value, label]) => ({
+                  value,
+                  label
+                }))}
+                onSelect={handleInputChange}
               />
             </div>
             {formState && (