Filter Products by Category

components/Checkbox.jsx

@@ -0,0 +1,7 @@
+export default function Checkbox({label, id, getSelectedCategories}) {
+    return (
+        <label className="inline-flex items-center mt-3 mr-3">
+            <input type="checkbox" className="h-5 w-5" value={id} onChange={e => getSelectedCategories(+e.target.value)}/><span className="ml-2 text-gray-700">{label}</span>
+        </label>
+    )
+}

components/Filters.jsx

@@ -0,0 +1,14 @@
+import Checkbox from "./Checkbox";
+
+export default function Filters({categories, getSelectedCategories}) {
+    return (
+        <div className="flex items-center mt-5">
+            {categories.map(category => <Checkbox
+                key={category.id}
+                label={category.category_name}
+                id={category.id}
+                getSelectedCategories={getSelectedCategories}
+            />)}
+        </div>
+    )
+}

pages/index.jsx

@@ -1,13 +1,40 @@
 import Head from 'next/head'
 import {useQuery} from 'react-query'
-import {getHomepagePosts, getHomepageProducts} from "../queries/queries";
+import {getHomepagePosts, getHomepageProducts, getHomepageCategories, getHomepageFilteredProducts} from "../queries/queries";
 import PostCard from "../components/PostCard";
 import ProductCard from "../components/ProductCard";
+import Filters from "../components/Filters";
+import {useEffect, useState} from "react";
+
+
+async function handleProductFiltering({queryKey}) {
+    console.log(queryKey);
+    const [_] = queryKey
+    if(_.length) {
+        return await getHomepageFilteredProducts(queryKey[0])
+    }
+
+    return await getHomepageProducts()
+}
 
 export default function Home() {
-    const {data: products, isSuccess} = useQuery("products", async () => await getHomepageProducts())
+    const [selectedCategories, setSelectedCategories] = useState([])
+    const {data: products, isSuccess} = useQuery([selectedCategories], handleProductFiltering)
+    const {data: categories, isSuccess: categoriesSuccess } = useQuery("categories", async () => await getHomepageCategories())
 
-    console.log(products);
+
+    const getSelectedCategories = (category) => {
+        // console.log(category);
+        if(selectedCategories.includes(category)){
+            setSelectedCategories(selectedCategories.filter(item => item !== category))
+            return
+        }
+        setSelectedCategories([...selectedCategories, category])
+    }
+
+    useEffect(() => {
+        console.log(selectedCategories)
+    },[selectedCategories])
 
     return (
         <div className="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
@@ -18,6 +45,8 @@ export default function Home() {
 
             <h2 className="text-2xl font-extrabold tracking-tight text-gray-900">Latest products</h2>
 
+            {categoriesSuccess && <Filters categories={categories} getSelectedCategories={getSelectedCategories}/> }
+
             <div className="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
                 {isSuccess && products.map(product => <ProductCard
                     product_name={product.product_name}

queries/HomepageQueries.js

@@ -32,3 +32,33 @@ export const HomepageProductsQuery = `
         }
     }
 `
+
+export const HomepageCategoriesQuery = `
+    #graphql
+    query HomepageCategories {
+        categories {
+            id
+            category_name
+        }
+    }
+`
+
+export const HomepageFilteredProductsQuery = `
+    #graphql
+    query HomepageProducts($categories: [Float]) {
+        products(filter: { category: { categories_id: { id: {_in: $categories}} } }) {
+            id
+            product_name
+            price
+            product_image {
+                id
+            }
+            category {
+                categories_id {
+                    id
+                    category_name
+                }
+            }
+        }
+    }
+`

queries/queries.js

@@ -1,5 +1,5 @@
 import fetchData from "../helpers/fetchData";
-import {HomepagePostsQuery, HomepageProductsQuery} from "./HomepageQueries"
+import {HomepagePostsQuery, HomepageProductsQuery, HomepageCategoriesQuery, HomepageFilteredProductsQuery} from "./HomepageQueries"
 
 export const getHomepagePosts = async () => {
     const data = await fetchData(
@@ -22,3 +22,27 @@ export const getHomepageProducts = async () => {
 
     return data.data.products
 }
+
+export const getHomepageCategories = async () => {
+    const data = await fetchData(
+        HomepageCategoriesQuery,
+        {
+            variables: {}
+        }
+    )
+
+    return data.data.categories
+}
+
+export const getHomepageFilteredProducts = async (categories) => {
+    const data = await fetchData(
+        HomepageFilteredProductsQuery,
+        {
+            variables: {
+                categories
+            }
+        }
+    )
+
+    return data.data.products
+}