From 2136248d2a3cd8a00c86164464e5a65b238b0b95 Mon Sep 17 00:00:00 2001
From: myj009 <mohammad.jagora@deliveroo.com>
Date: Mon, 26 Aug 2024 09:39:30 +0530
Subject: [PATCH] fix: filters UX #267

---
 src/layouts/job-filters.tsx | 15 +++++++--------
 src/layouts/jobs-header.tsx | 24 +++++++++++++++---------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/layouts/job-filters.tsx b/src/layouts/job-filters.tsx
index 9389ff4d..a2784617 100644
--- a/src/layouts/job-filters.tsx
+++ b/src/layouts/job-filters.tsx
@@ -13,7 +13,6 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '../components/ui/accordion';
-import { Button } from '../components/ui/button';
 import { Checkbox } from '../components/ui/checkbox';
 import {
   Form,
@@ -63,7 +62,7 @@ const JobFilters = ({
     );
   }
   return (
-    <aside className="rounded-lg border bg-background  max-w-[320px] w-full p-6 h-fit sticky top-20">
+    <aside className="rounded-lg border bg-background  max-w-[320px] w-full h-fit p-6 sticky top-20">
       <div className="flex items-center justify-between">
         <h3 className="font-medium text-base text-primary-text">All Filters</h3>
       </div>
@@ -111,7 +110,7 @@ const JobFilters = ({
                                         item.value as WorkModeEnums
                                       )}
                                       onCheckedChange={(checked) => {
-                                        return checked
+                                        checked
                                           ? field.onChange([
                                               ...(field.value || []),
                                               item.value,
@@ -121,6 +120,7 @@ const JobFilters = ({
                                                 (value) => value !== item.value
                                               )
                                             );
+                                        form.handleSubmit(handleFormSubmit)();
                                       }}
                                     />
                                   </FormControl>
@@ -165,7 +165,7 @@ const JobFilters = ({
                                         item.value
                                       )}
                                       onCheckedChange={(checked) => {
-                                        return checked
+                                        checked
                                           ? field.onChange([
                                               ...(field.value || []),
                                               item.value,
@@ -175,6 +175,7 @@ const JobFilters = ({
                                                 (value) => value !== item.value
                                               )
                                             );
+                                        form.handleSubmit(handleFormSubmit)();
                                       }}
                                     />
                                   </FormControl>
@@ -222,7 +223,7 @@ const JobFilters = ({
                                         item.value
                                       )}
                                       onCheckedChange={(checked) => {
-                                        return checked
+                                        checked
                                           ? field.onChange([
                                               ...(field.value || []),
                                               item.value,
@@ -232,6 +233,7 @@ const JobFilters = ({
                                                 (value) => value !== item.value
                                               )
                                             );
+                                        form.handleSubmit(handleFormSubmit)();
                                       }}
                                       hidden
                                     />
@@ -252,9 +254,6 @@ const JobFilters = ({
               </AccordionItem>
             </Accordion>
           </ScrollArea>
-          <Button type="submit" disabled={form.formState.isSubmitting}>
-            Apply Filters
-          </Button>
         </form>
       </Form>
     </aside>
diff --git a/src/layouts/jobs-header.tsx b/src/layouts/jobs-header.tsx
index 0119fbed..e0e3b0b6 100644
--- a/src/layouts/jobs-header.tsx
+++ b/src/layouts/jobs-header.tsx
@@ -17,7 +17,6 @@ import { JobQuerySchemaType } from '@/lib/validators/jobs.validator';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { Button } from '@/components/ui/button';
 import {
   Form,
   FormControl,
@@ -30,10 +29,12 @@ import { usePathname } from 'next/navigation';
 import JobFilters from './job-filters';
 import Icon from '@/components/ui/icon';
 import APP_PATHS from '@/config/path.config';
+import { Button } from '@/components/ui/button';
 
 const FormSchema = z.object({
   search: z.string().optional(),
 });
+
 const JobsHeader = ({
   searchParams,
   baseUrl,
@@ -44,6 +45,8 @@ const JobsHeader = ({
   const pathname = usePathname();
   const isHome = pathname === APP_PATHS.HOME;
 
+  let debounceTimeout: NodeJS.Timeout;
+
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
@@ -56,6 +59,7 @@ const JobsHeader = ({
   function sortChangeHandler(value: SortByEnums) {
     jobFilterQuery({ ...searchParams, sortby: value, page: 1 }, baseUrl);
   }
+
   return (
     <div className="flex flex-col  gap-5 ">
       <Form {...form}>
@@ -73,19 +77,21 @@ const JobsHeader = ({
                     placeholder="Search by title or company name"
                     {...field}
                     className="rounded-full p-5 py-6 dark:bg-neutral-900 truncate"
+                    onChange={(e) => {
+                      field.onChange(e);
+                      if (debounceTimeout) {
+                        clearTimeout(debounceTimeout);
+                      }
+                      debounceTimeout = setTimeout(() => {
+                        form.handleSubmit(onSubmit)();
+                      }, 300);
+                    }}
                   />
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
-          <Button
-            type="submit"
-            className="rounded-full absolute right-3 top-2"
-            size="sm"
-          >
-            Search
-          </Button>
         </form>
       </Form>
 
@@ -93,7 +99,7 @@ const JobsHeader = ({
         {isHome && (
           <Popover>
             <PopoverTrigger className="bg-neutral-100 dark:bg-neutral-900 rounded-full p-3 cursor-pointer">
-              <Icon icon="filter" className="cursor-pointe" size="20" />
+              <Icon icon="filter" className="cursor-pointer" size="20" />
             </PopoverTrigger>
             <PopoverContent className="bg-transparent border-none">
               <JobFilters searchParams={searchParams} baseUrl={baseUrl} />