Add filter functionality to ProductsFilter component

apps/web/src/app/(public)/products/components/filter.component.tsx

@@ -6,10 +6,29 @@ import {
   Input,
   Label,
 } from "@/components";
-import { useBrand, useCategory } from "@/hooks";
-import React, { useState } from "react";
+import { useBrand, useCategory, useQueryParams } from "@/hooks";
+import { buildQuery, ensureArrayValues, getQueries } from "@/utils";
+import { isEmpty } from "lodash";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import React, { useCallback, useEffect, useState } from "react";
+
+type HandleFilterToggle = { name: "categories" | "brands"; slug: string };
+
+interface FilterState {
+  categories: string[];
+  brands: string[];
+}
+
+const INITIAL_FILTER = {
+  categories: [],
+  brands: [],
+};
 
 export const ProductsFilter = () => {
+  const [filter, setFilter] = useState<FilterState>(INITIAL_FILTER);
+  const searchParams = useSearchParams();
+  const { setQuery } = useQueryParams();
+
   const {
     data: { categories },
   } = useCategory({ fetch: true });
@@ -18,6 +37,32 @@ export const ProductsFilter = () => {
     data: { brands },
   } = useBrand({ fetch: true });
 
+  useEffect(() => {
+    const queries = ensureArrayValues<FilterState>(getQueries(searchParams));
+    setFilter(isEmpty(queries) ? INITIAL_FILTER : queries);
+  }, [searchParams]);
+
+  useEffect(() => {
+    setQuery(filter);
+  }, [filter, setQuery]);
+
+  const handleFilterToggle = useCallback(
+    ({ slug, name }: HandleFilterToggle) => {
+      if (filter[name]?.includes(slug)) {
+        setFilter((prev) => ({
+          ...prev,
+          [name]: prev[name].filter((item) => item !== slug),
+        }));
+      } else {
+        setFilter((prev) => ({
+          ...prev,
+          [name]: [...(isEmpty(prev[name]) ? [] : prev[name]), slug],
+        }));
+      }
+    },
+    [filter]
+  );
+
   return (
     <div className="shadow-box lg:w-64 xxl:w-72 bg-white">
       <div className="divide-y">
@@ -37,7 +82,18 @@ export const ProductsFilter = () => {
                     htmlFor={category.id}
                     key={category.id}
                   >
-                    <Checkbox value={category.slug} id={category.id} />{" "}
+                    <Checkbox
+                      name="categories"
+                      value={category.slug}
+                      id={category.id}
+                      onCheckedChange={() =>
+                        handleFilterToggle({
+                          name: "categories",
+                          slug: category.slug,
+                        })
+                      }
+                      checked={filter["categories"]?.includes(category.slug)}
+                    />{" "}
                     <span>{category.name}</span>
                   </Label>
                 ))}
@@ -58,7 +114,21 @@ export const ProductsFilter = () => {
                     htmlFor={brand.id}
                     key={brand.id}
                   >
-                    <Checkbox value={brand.id} id={brand.id} />
+                    <Checkbox
+                      name="categories"
+                      // TODO: Fix the value to be brand.slug
+                      value={brand.id}
+                      id={brand.id}
+                      onCheckedChange={() =>
+                        handleFilterToggle({
+                          name: "brands",
+                          // TODO: Fix the value to be brand.slug
+                          slug: brand.id,
+                        })
+                      }
+                      // TODO: Fix the value to be brand.slug
+                      checked={filter["brands"]?.includes(brand.id)}
+                    />
                     <span>{brand.name}</span>
                   </Label>
                 ))}

apps/web/src/components/header/index.tsx

@@ -9,11 +9,11 @@ import {
   ShoppingBagIcon,
   UserIcon,
 } from "@heroicons/react/24/outline";
-import { Navigation } from "./navigation";
 import { UserMenu } from "../menu";
 import { useReadLocalStorage } from "usehooks-ts";
 import { LOGGED_IN } from "@/constants";
 import { useProfile } from "@/hooks";
+import Navigation from "./navigation";
 
 export const Header = () => {
   const loggedIn = useReadLocalStorage<boolean>(LOGGED_IN);

apps/web/src/components/header/navigation.tsx

@@ -4,7 +4,6 @@ import {
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
-  NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
 } from "..";
@@ -29,7 +28,7 @@ export const NAVIGATION = [
   },
 ];
 
-export const Navigation = () => {
+const Navigation = () => {
   const {
     data: { categories },
   } = useCategory({ fetch: true });
@@ -84,3 +83,5 @@ export const Navigation = () => {
     </nav>
   );
 };
+
+export default Navigation;

apps/web/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from "./useCategory";
 export * from "./useBrand";
 export * from "./useProduct";
 export * from "./useUploader";
+export * from "./useQueryParams";