fix: filters UX code100x#267 (code100x#268)

* fix: filters UX code100x#267 * Build lint fix
pratiiikkk · Aug 28, 2024 · 2c155cb · 2c155cb
1 parent a6b738f
commit 2c155cb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git 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
@@ -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,
@@ -34,6 +33,7 @@ import APP_PATHS from '@/config/path.config';
 const FormSchema = z.object({
   search: z.string().optional(),
 });
+
 const JobsHeader = ({
   searchParams,
   baseUrl,
@@ -44,6 +44,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 +58,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,27 +76,29 @@ 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>
 
       <div className="flex gap-5 justify-end items-center">
         {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} />