Reset filter button

Author: w3bdesign

src/components/Product/ProductFilters.component.tsx

@@ -29,6 +29,7 @@ interface ProductFiltersProps {
   productTypes: ProductType[];
   toggleProductType: (id: string) => void;
   products: Product[];
+  resetFilters: () => void;
 }
 
 const ProductFilters = ({
@@ -41,6 +42,7 @@ const ProductFilters = ({
   productTypes,
   toggleProductType,
   products,
+  resetFilters,
 }: ProductFiltersProps) => {
   // Get unique sizes from all products
   const sizes = Array.from(new Set(
@@ -156,10 +158,17 @@ const ProductFilters = ({
                 title={color.name}
               />
             ))}
-          </div>
         </div>
+
+        <button
+          onClick={resetFilters}
+          className="w-full mt-8 py-2 px-4 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+        >
+          Resett filter
+        </button>
       </div>
     </div>
+    </div>
   );
 };
 

src/pages/products2.tsx

@@ -7,77 +7,8 @@ import client from '@/utils/apollo/ApolloClient';
 import { FETCH_ALL_PRODUCTS_QUERY } from '@/utils/gql/GQL_QUERIES';
 import type { NextPage, GetStaticProps, InferGetStaticPropsType } from 'next';
 
-interface Image {
-  __typename: string;
-  sourceUrl?: string;
-}
-
-interface Node {
-  __typename: string;
-  price: string;
-  regularPrice: string;
-  salePrice?: string;
-}
-
-interface Variations {
-  __typename: string;
-  nodes: Node[];
-}
-
-interface ProductCategory {
-  name: string;
-  slug: string;
-}
-
-interface ColorNode {
-  name: string;
-}
-
-interface SizeNode {
-  name: string;
-}
-
-interface AttributeNode {
-  name: string;
-  value: string;
-}
-
-interface Product {
-  __typename: string;
-  databaseId: number;
-  name: string;
-  onSale: boolean;
-  slug: string;
-  image: Image;
-  price: string;
-  regularPrice: string;
-  salePrice?: string;
-  productCategories?: {
-    nodes: ProductCategory[];
-  };
-  allPaColors?: {
-    nodes: ColorNode[];
-  };
-  allPaSizes?: {
-    nodes: SizeNode[];
-  };
-  variations: {
-    nodes: Array<{
-      price: string;
-      regularPrice: string;
-      salePrice?: string;
-      attributes?: {
-        nodes: AttributeNode[];
-      };
-    }>;
-  };
-}
-
-interface ProductType {
-  id: string;
-  name: string;
-  checked: boolean;
-}
+import { Product, ProductCategory, ProductType, SizeNode, ColorNode } from '@/types/product';
+import { getUniqueProductTypes } from '@/utils/functions/productUtils';
 
 const Products2: NextPage = ({
   products,
@@ -87,18 +18,9 @@ const Products2: NextPage = ({
   const [selectedSizes, setSelectedSizes] = useState<string[]>([]);
   const [selectedColors, setSelectedColors] = useState<string[]>([]);
   const [priceRange, setPriceRange] = useState<[number, number]>([0, 1000]);
-  // Get unique product types from products
-  const initialProductTypes = Array.from(new Set(
-    products?.flatMap(product => 
-      product.productCategories?.nodes.map(cat => ({
-        id: cat.slug,
-        name: cat.name,
-        checked: false
-      })) || []
-    ) || []
-  )).sort((a, b) => a.name.localeCompare(b.name));
-
-  const [productTypes, setProductTypes] = useState<ProductType[]>(initialProductTypes);
+  const [productTypes, setProductTypes] = useState<ProductType[]>(() => 
+    products ? getUniqueProductTypes(products) : []
+  );
 
   const toggleProductType = (id: string) => {
     setProductTypes(prev => prev.map(type => 

src/types/product.ts

@@ -0,0 +1,66 @@
+export interface Image {
+  __typename: string;
+  sourceUrl?: string;
+}
+
+export interface Node {
+  __typename: string;
+  price: string;
+  regularPrice: string;
+  salePrice?: string;
+}
+
+export interface ProductCategory {
+  name: string;
+  slug: string;
+}
+
+export interface ColorNode {
+  name: string;
+}
+
+export interface SizeNode {
+  name: string;
+}
+
+export interface AttributeNode {
+  name: string;
+  value: string;
+}
+
+export interface Product {
+  __typename: string;
+  databaseId: number;
+  name: string;
+  onSale: boolean;
+  slug: string;
+  image: Image;
+  price: string;
+  regularPrice: string;
+  salePrice?: string;
+  productCategories?: {
+    nodes: ProductCategory[];
+  };
+  allPaColors?: {
+    nodes: ColorNode[];
+  };
+  allPaSizes?: {
+    nodes: SizeNode[];
+  };
+  variations: {
+    nodes: Array<{
+      price: string;
+      regularPrice: string;
+      salePrice?: string;
+      attributes?: {
+        nodes: AttributeNode[];
+      };
+    }>;
+  };
+}
+
+export interface ProductType {
+  id: string;
+  name: string;
+  checked: boolean;
+}

src/utils/functions/productUtils.ts

@@ -0,0 +1,23 @@
+import { Product, ProductCategory, ProductType } from '@/types/product';
+
+export const getUniqueProductTypes = (products: Product[]): ProductType[] => {
+  // Use Map to ensure unique categories by slug
+  const categoryMap = new Map<string, ProductType>();
+
+  products?.forEach((product) => {
+    product.productCategories?.nodes.forEach((cat: ProductCategory) => {
+      if (!categoryMap.has(cat.slug)) {
+        categoryMap.set(cat.slug, {
+          id: cat.slug,
+          name: cat.name,
+          checked: false,
+        });
+      }
+    });
+  });
+
+  // Convert Map values to array and sort by name
+  return Array.from(categoryMap.values()).sort((a, b) =>
+    a.name.localeCompare(b.name),
+  );
+};