Merge branch 'master' into organize-routes

ff14-advanced-market-search · Dec 1, 2024 · 807c419 · 807c419
2 parents fb99cf7 + 6e62a00
commit 807c419
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 48 deletions.
diff --git a/app/components/form/Filter/index.tsx b/app/components/form/Filter/index.tsx
@@ -5,28 +5,36 @@ import { FFXIVModalContent } from '../ffxiv/FFXIVModalContent'
 
 const noop = () => {}
 
+interface FilterProps {
+  formName: string
+  defaultValue: number[]
+  options: Array<{ value: number; label: string }>
+  title: string
+  onChange?: (selectedValues: number[]) => void
+}
+
 const Filter = ({
   formName,
-  filterButtonText = 'Choose Filters',
-  selectedCountText = 'Filters',
   defaultValue,
-  title,
   options,
+  title,
   onChange
-}: {
-  formName: string
-  filterButtonText?: string
-  selectedCountText?: string
-  defaultValue: Array<number>
-  title: string
-  options?: Array<{ value: number; label: string }>
-  onChange?: (newIds: Array<number>) => void
-}) => {
-  const [ids, setIds] = useState(defaultValue)
+}: FilterProps) => {
+  const [selected, setSelected] = useState<number[]>(defaultValue)
   const [isOpen, setIsOpen] = useState(false)
 
   const handleOpen = () => setIsOpen(true)
   const handleClose = () => setIsOpen(false)
+
+  const handleChange = (value: number) => {
+    const newSelected = selected.includes(value)
+      ? selected.filter((v) => v !== value)
+      : [...selected, value]
+
+    setSelected(newSelected)
+    onChange?.(newSelected)
+  }
+
   return (
     <>
       <div className="col-span-6 sm:col-span-3 xl:col-span-2">
@@ -38,7 +46,7 @@ const Filter = ({
         <div className={`mt-1 flex rounded-md shadow-sm`}>
           <input
             name={formName}
-            value={ids.map((job) => job.toString())}
+            value={selected.map((job) => job.toString())}
             hidden
             onChange={noop}
           />
@@ -47,36 +55,25 @@ const Filter = ({
             aria-label="Choose filters"
             type="button"
             onClick={handleOpen}>
-            {filterButtonText}
+            Choose Filters
           </button>
         </div>
-        <p className="mt-2 text-sm text-gray-400">{`${selectedCountText} applied: ${ids.length}`}</p>
+        <p className="mt-2 text-sm text-gray-400">{`Filters applied: ${selected.length}`}</p>
       </div>
       {isOpen && (
-        <Modal
-          onClose={handleClose}
-          title={`${selectedCountText} Selected: ${ids.length}`}>
+        <Modal onClose={handleClose} title="Filters Selected: 1">
           {options ? (
             <>
               {options?.map((option) => {
-                const isSelected = ids.includes(option.value)
+                const isSelected = selected.includes(option.value)
                 return (
                   <CheckBoxRow
                     key={`${option.label}-${option.value}`}
                     title={option.label}
                     selected={isSelected}
                     onChange={(e) => {
                       e.stopPropagation()
-                      if (isSelected) {
-                        const newIds = ids.filter((id) => id !== option.value)
-                        setIds(newIds)
-                        onChange?.(newIds)
-                        return
-                      }
-
-                      const newIds = [...ids, option.value]
-                      setIds(newIds)
-                      onChange?.(newIds)
+                      handleChange(option.value)
                     }}
                     id={option.value}
                   />
@@ -85,9 +82,9 @@ const Filter = ({
             </>
           ) : (
             <FFXIVModalContent
-              ids={ids}
+              ids={selected}
               setIds={(newIds) => {
-                setIds(newIds)
+                setSelected(newIds)
                 onChange?.(newIds)
               }}
             />

diff --git a/app/components/form/WoW/OutOfStockForm/index.tsx b/app/components/form/WoW/OutOfStockForm/index.tsx
@@ -7,19 +7,21 @@ const OutOfStockForm = ({
   defaultValues,
   onFormChange
 }: {
-  defaultValues: Record<string, string | number | number[]>
+  defaultValues: Record<string, string>
   onFormChange: (name: string, value: string) => void
 }) => {
-  // Helper function to safely convert value to array of numbers
-  const parseCategories = (value: string | number | number[]): number[] => {
-    if (Array.isArray(value)) return value
-    if (typeof value === 'string' && value.trim() !== '') {
-      return value
-        .split(',')
-        .map(Number)
-        .filter((n) => !isNaN(n))
-    }
-    return []
+  // Helper function to safely convert string to array of numbers
+  const parseCategories = (value: string): number[] => {
+    if (!value || value.trim() === '') return []
+    return value
+      .split(',')
+      .map(Number)
+      .filter((n) => !isNaN(n))
+  }
+
+  // Helper function to convert array back to string
+  const categoriesToString = (categories: number[]): string => {
+    return categories.join(',')
   }
 
   return (
@@ -33,12 +35,18 @@ const OutOfStockForm = ({
         defaultValue={parseCategories(defaultValues.includeCategories)}
         options={wowCategories}
         title={'Item Categories (Include)'}
+        onChange={(categories) =>
+          onFormChange('includeCategories', categoriesToString(categories))
+        }
       />
       <Filter
         formName="excludeCategories"
         defaultValue={parseCategories(defaultValues.excludeCategories)}
         options={wowCategories}
         title={'Item Categories (Exclude)'}
+        onChange={(categories) =>
+          onFormChange('excludeCategories', categoriesToString(categories))
+        }
       />
       <InputWithLabel
         defaultValue={defaultValues.salesPerDay}

diff --git a/app/routes/wow.out-of-stock.tsx b/app/routes/wow.out-of-stock.tsx
@@ -156,7 +156,18 @@ const OutOfStock = () => {
   }>()
   const transition = useNavigation()
   const isSubmitting = transition.state === 'submitting'
-  const [searchParams, setSearchParams] = useState(loaderData)
+  const [searchParams, setSearchParams] = useState<Record<string, string>>(
+    Object.fromEntries(
+      Object.entries(loaderData).map(([key, value]) => [
+        key,
+        typeof value === 'number'
+          ? value.toString()
+          : Array.isArray(value)
+          ? value.join(',')
+          : String(value)
+      ])
+    )
+  )
   const error = result?.exception
 
   if (result?.data?.length === 0) {
@@ -173,10 +184,7 @@ const OutOfStock = () => {
     }
   }
 
-  const handleFormChange = (
-    name: keyof typeof defaultFormValues,
-    value: string
-  ) => {
+  const handleFormChange = (name: string, value: string) => {
     handleSearchParamChange(name, value)
     setSearchParams((prev) => ({ ...prev, [name]: value }))
   }