filter feature added using redux and json server api

Author: murtazatankiwala456

src/features/product/components/ProductList.js

@@ -1,6 +1,10 @@
 import React, { useState, Fragment, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { fetchAllProductsAsync, selectAllProducts } from "../productSlice";
+import {
+  fetchAllProductsAsync,
+  fetchProductsByFiltersAsync,
+  selectAllProducts,
+} from "../productSlice";
 import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
 import { StarIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
@@ -22,52 +26,36 @@ const sortOptions = [
 ];
 
 const filters = [
+  {
+    id: "category",
+    name: "Category",
+    options: [
+      { value: "beauty", label: "Beauty", checked: false },
+      { value: "fragrances", label: "Fragrances", checked: false },
+      { value: "furniture", label: "Furniture", checked: false },
+      { value: "groceries", label: "Groceries", checked: false },
+    ],
+  },
   {
     id: "brand",
     name: "Brands",
     options: [
       { value: "Essence", label: "Essence", checked: false },
-
       { value: "Glamour Beauty", label: "Glamour Beauty", checked: false },
-
       { value: "Velvet Touch", label: "Velvet Touch", checked: false },
-
       { value: "Chic Cosmetics", label: "Chic Cosmetics", checked: false },
-
       { value: "Nail Couture", label: "Nail Couture", checked: false },
-
       { value: "Calvin Klein", label: "Calvin Klein", checked: false },
-
       { value: "Chanel", label: "Chanel", checked: false },
-
       { value: "Dior", label: "Dior", checked: false },
-
       { value: "Dolce & Gabbana", label: "Dolce & Gabbana", checked: false },
-
       { value: "Gucci", label: "Gucci", checked: false },
-
       { value: "Annibale Colombo", label: "Annibale Colombo", checked: false },
-
       { value: "Furniture Co.", label: "Furniture Co.", checked: false },
-
       { value: "Knoll", label: "Knoll", checked: false },
-
       { value: "Bath Trends", label: "Bath Trends", checked: false },
     ],
   },
-  {
-    id: "category",
-    name: "Category",
-    options: [
-      { value: "beauty", label: "Beauty", checked: false },
-
-      { value: "fragrances", label: "Fragrances", checked: false },
-
-      { value: "furniture", label: "Furniture", checked: false },
-
-      { value: "groceries", label: "Groceries", checked: false },
-    ],
-  },
 ];
 
 function classNames(...classes) {
@@ -78,10 +66,18 @@ export default function ProductList() {
   const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
   const products = useSelector(selectAllProducts);
   const dispatch = useDispatch();
+  const [filter, setFilter] = useState({});
+  const handleFilter = (e, section, option) => {
+    const newFilter = { ...filter, [section.id]: option.value };
+    setFilter(newFilter);
+    dispatch(fetchProductsByFiltersAsync(newFilter));
+    console.log(section.id, option.value);
+  };
 
   useEffect(() => {
     dispatch(fetchAllProductsAsync());
   }, [dispatch]);
+
   return (
     <div className="bg-white">
       <div>
@@ -314,6 +310,9 @@ export default function ProductList() {
                                   defaultValue={option.value}
                                   type="checkbox"
                                   defaultChecked={option.checked}
+                                  onChange={(e) => {
+                                    handleFilter(e, section, option);
+                                  }}
                                   className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                                 />
                                 <label

src/features/product/productAPI.js

@@ -6,3 +6,19 @@ export function fetchAllProducts() {
     resolve({ data });
   });
 }
+export function fetchProductsByFilters(filter) {
+  // filter ={"category":"frangrances"}
+  // filter ={"brand":"Essence"}
+  let queryString = "";
+  for (let key in filter) {
+    queryString += `${key}=${filter[key]}&`;
+  }
+  return new Promise(async (resolve) => {
+    // TODO: we will not hard coded server url here...
+    const response = await fetch(
+      "http://localhost:8080/products?" + queryString
+    );
+    const data = await response.json();
+    resolve({ data });
+  });
+}

src/features/product/productSlice.js

@@ -1,5 +1,5 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
-import { fetchAllProducts } from "./productAPI";
+import { fetchAllProducts, fetchProductsByFilters } from "./productAPI";
 
 const initialState = {
   products: [],
@@ -14,6 +14,14 @@ export const fetchAllProductsAsync = createAsyncThunk(
     return response.data;
   }
 );
+export const fetchProductsByFiltersAsync = createAsyncThunk(
+  "product/fetchProductsByFilters",
+  async (filter) => {
+    const response = await fetchProductsByFilters(filter);
+    // The value we return becomes the `fulfilled` action payload
+    return response.data;
+  }
+);
 
 export const productSlice = createSlice({
   name: "product",
@@ -31,6 +39,13 @@ export const productSlice = createSlice({
       .addCase(fetchAllProductsAsync.fulfilled, (state, action) => {
         state.status = "idle";
         state.products = action.payload;
+      })
+      .addCase(fetchProductsByFiltersAsync.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchProductsByFiltersAsync.fulfilled, (state, action) => {
+        state.status = "idle";
+        state.products = action.payload;
       });
   },
 });

test.js

@@ -1772,13 +1772,13 @@ const products = [
   },
 ];
 
-// const categories = [...new Set([...products.map((p) => p.category)])];
+const categories = [...new Set([...products.map((p) => p.category)])];
 
-// categories.map((c) => ({
-//   value: c,
-//   label: c.split("-").join(" "),
-//   checked: false,
-// }));
+categories.map((c) => ({
+  value: c,
+  label: c.split("-").join(" "),
+  checked: false,
+}));
 
 //categories results:-
 // {value: 'beauty', label: 'beauty', checked: false},