fix: filters UX #267

code100x · Aug 26, 2024 · f4c95b8 · f4c95b8
1 parent 9113a79
commit f4c95b8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 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,
@@ -50,7 +49,7 @@ const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
     });
   }
   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>
@@ -98,7 +97,7 @@ const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
                                         item.value as WorkModeEnums
                                       )}
                                       onCheckedChange={(checked) => {
-                                        return checked
+                                        checked
                                           ? field.onChange([
                                               ...(field.value || []),
                                               item.value,
@@ -108,6 +107,7 @@ const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
                                                 (value) => value !== item.value
                                               )
                                             );
+                                        form.handleSubmit(handleFormSubmit)();
                                       }}
                                     />
                                   </FormControl>
@@ -152,7 +152,7 @@ const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
                                         item.value
                                       )}
                                       onCheckedChange={(checked) => {
-                                        return checked
+                                        checked
                                           ? field.onChange([
                                               ...(field.value || []),
                                               item.value,
@@ -162,6 +162,7 @@ const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
                                                 (value) => value !== item.value
                                               )
                                             );
+                                        form.handleSubmit(handleFormSubmit)();
                                       }}
                                     />
                                   </FormControl>
@@ -209,7 +210,7 @@ const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
                                         item.value
                                       )}
                                       onCheckedChange={(checked) => {
-                                        return checked
+                                        checked
                                           ? field.onChange([
                                               ...(field.value || []),
                                               item.value,
@@ -219,6 +220,7 @@ const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
                                                 (value) => value !== item.value
                                               )
                                             );
+                                        form.handleSubmit(handleFormSubmit)();
                                       }}
                                       hidden
                                     />
@@ -239,9 +241,6 @@ const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
               </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
@@ -12,7 +12,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,
@@ -24,6 +23,9 @@ import { Input } from '@/components/ui/input';
 const FormSchema = z.object({
   search: z.string().optional(),
 });
+
+let debounceTimeout: NodeJS.Timeout;
+
 const JobsHeader = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
@@ -37,6 +39,7 @@ const JobsHeader = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
   function sortChangeHandler(value: SortByEnums) {
     jobFilterQuery({ ...searchParams, sortby: value, page: 1 });
   }
+
   return (
     <div className="flex gap-5">
       <Form {...form}>
@@ -53,13 +56,21 @@ const JobsHeader = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
                   <Input
                     placeholder="Search by title or company name"
                     {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+                      if (debounceTimeout) {
+                        clearTimeout(debounceTimeout);
+                      }
+                      debounceTimeout = setTimeout(() => {
+                        form.handleSubmit(onSubmit)();
+                      }, 300);
+                    }}
                   />
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
-          <Button type="submit">Submit</Button>
         </form>
       </Form>
       <Select