Function useSearchForm

Example

 const {
   search,
   submitSearch,
   searching,
   setSearchField,
   setGeolocate,
   setChannel,
   setMinPrice,
   setMaxPrice,
   minPriceOptions,
   maxPriceOptions,
   setMinBedrooms,
   setMaxBedrooms,
   minBedroomOptions,
   maxBedroomOptions,
   setStatus,
   setDistance,
   distanceOptions,
   setPropertyType,
 } = useSearchForm();

 <form onSubmit={submitSearch}>
   <input
     name="channel"
     value="sales"
     type="radio"
     checked={search.channel === 'sales'}
     onChange={() => setChannel('sales')}
   />

   <input
     name="channel"
     value="lettings"
     type="radio"
     checked={search.channel === 'lettings'}
     onChange={() => setChannel('lettings')}
   />

   <LocationInput
     setSearchField={setSearchField}
     search={search}
   />
   <button type="button" onClick={setGeoocate}>+</button>

   <select
     value={search.minBedrooms || ''}
     onChange={({ target }: { target: HTMLSelectElement }) =>
       setMinBedrooms(target.value)
     }
   >
     <option value="">Min beds</option>
     {minBedroomOptions.map((option) => (
       <option key={option.value} value={option.value}>
         {option.label}
       </option>
      ))}
   </select>

   <select
     value={search.maxPrice || ''}
     onChange={({ target }: { target: HTMLSelectElement }) =>
       setMaxPrice(target.value)
     }
   >
     <option value="">Max Price</option>
     {maxPriceOptions.map((option) => (
       <option key={option.value} value={option.value}>
         {option.label}
       </option>
      ))}
   </select>

    <select
     value={search.within || ''}
     onChange={({ target }: { target: HTMLSelectElement }) => setDistance(target.value)}
   >
     {distanceOptions.map((option: { value: number | string; label: string }) => (
       <option key={option.value} value={option.value}>
         {option.label}
       </option>
      ))}
   </select>

   <button type="submit" disabled={searching}>Search</button>
 </form>
Copy