calling categories and brand through API

Author: murtazatankiwala456

data.json

@@ -1719,5 +1719,99 @@
       ],
       "thumbnail": "https://cdn.dummyjson.com/products/images/groceries/Kiwi/thumbnail.png"
     }
+  ],
+  "brands": [
+    {
+      "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
+    }
+  ],
+  "categories": [
+    {
+      "value": "beauty",
+      "label": "Beauty",
+      "checked": false
+    },
+    {
+      "value": "fragrances",
+      "label": "Fragrances",
+      "checked": false
+    },
+    {
+      "value": "furniture",
+      "label": "Furniture",
+      "checked": false
+    },
+    {
+      "value": "groceries",
+      "label": "Groceries",
+      "checked": false
+    }
   ]
 }

src/features/product/components/ProductList.js

@@ -2,8 +2,12 @@ import React, { useState, Fragment, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import {
   fetchAllProductsAsync,
+  fetchBrandsAsync,
+  fetchCategoriesAsync,
   fetchProductsByFiltersAsync,
   selectAllProducts,
+  selectBrands,
+  selectCategories,
   selectTotalItems,
 } from "../productSlice";
 import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
@@ -25,47 +29,29 @@ const sortOptions = [
   { name: "Price: High to Low", sort: "price", order: "desc", current: false },
 ];
 
-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 },
-    ],
-  },
-];
-
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
 export default function ProductList() {
   const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
   const products = useSelector(selectAllProducts);
+  const categories = useSelector(selectCategories);
+  const brands = useSelector(selectBrands);
   const totalItems = useSelector(selectTotalItems);
+  const filters = [
+    {
+      id: "category",
+      name: "Category",
+      options: categories,
+    },
+    {
+      id: "brand",
+      name: "Brands",
+      options: brands,
+    },
+  ];
+
   const dispatch = useDispatch();
   const [filter, setFilter] = useState({});
   const [sort, setSort] = useState({});
@@ -114,6 +100,11 @@ export default function ProductList() {
     setPage(1);
   }, [totalItems, sort]);
 
+  useEffect(() => {
+    dispatch(fetchBrandsAsync());
+    dispatch(fetchCategoriesAsync());
+  }, []);
+
   return (
     <div className="bg-white">
       <div>
@@ -122,6 +113,7 @@ export default function ProductList() {
           handleFilter={handleFilter}
           mobileFiltersOpen={mobileFiltersOpen}
           setMobileFiltersOpen={setMobileFiltersOpen}
+          filters={filters}
         />
 
         <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -202,7 +194,7 @@ export default function ProductList() {
             </h2>
 
             <div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
-              <DesktopFilter handleFilter={handleFilter} />
+              <DesktopFilter handleFilter={handleFilter} filters={filters} />
 
               {/* Product grid */}
               <div className="lg:col-span-3">
@@ -230,6 +222,7 @@ function MobileFilter({
   mobileFiltersOpen,
   setMobileFiltersOpen,
   handleFilter,
+  filters,
 }) {
   return (
     <Transition.Root show={mobileFiltersOpen} as={Fragment}>
@@ -343,7 +336,7 @@ function MobileFilter({
     </Transition.Root>
   );
 }
-function DesktopFilter({ handleFilter }) {
+function DesktopFilter({ handleFilter, filters }) {
   return (
     <form className="hidden lg:block">
       {filters.map((section) => (

src/features/product/productAPI.js

@@ -54,3 +54,17 @@ export function fetchProductsByFilters(filter, sort, pagination) {
     resolve({ data: { products: data.data, totalItems: data.items } });
   });
 }
+export function fetchCategories() {
+  return new Promise(async (resolve) => {
+    const response = await fetch("http://localhost:8080/categories");
+    const data = await response.json();
+    resolve({ data });
+  });
+}
+export function fetchBrands() {
+  return new Promise(async (resolve) => {
+    const response = await fetch("http://localhost:8080/brands");
+    const data = await response.json();
+    resolve({ data });
+  });
+}

src/features/product/productSlice.js

@@ -1,8 +1,15 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
-import { fetchAllProducts, fetchProductsByFilters } from "./productAPI";
+import {
+  fetchAllProducts,
+  fetchProductsByFilters,
+  fetchBrands,
+  fetchCategories,
+} from "./productAPI";
 
 const initialState = {
   products: [],
+  brands: [],
+  categories: [],
   status: "idle",
   totalItems: 0,
 };
@@ -25,6 +32,24 @@ export const fetchProductsByFiltersAsync = createAsyncThunk(
   }
 );
 
+export const fetchBrandsAsync = createAsyncThunk(
+  "product/fetchBrands",
+  async () => {
+    const response = await fetchBrands();
+    // The value we return becomes the `fulfilled` action payload
+    return response.data;
+  }
+);
+
+export const fetchCategoriesAsync = createAsyncThunk(
+  "product/fetchCategories",
+  async () => {
+    const response = await fetchCategories();
+    // The value we return becomes the `fulfilled` action payload
+    return response.data;
+  }
+);
+
 export const productSlice = createSlice({
   name: "product",
   initialState,
@@ -49,13 +74,29 @@ export const productSlice = createSlice({
         state.status = "idle";
         state.products = action.payload.products;
         state.totalItems = action.payload.totalItems;
+      })
+      .addCase(fetchBrandsAsync.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchBrandsAsync.fulfilled, (state, action) => {
+        state.status = "idle";
+        state.brands = action.payload;
+      })
+      .addCase(fetchCategoriesAsync.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchCategoriesAsync.fulfilled, (state, action) => {
+        state.status = "idle";
+        state.categories = action.payload;
       });
   },
 });
 
 export const { increment } = productSlice.actions;
 
 export const selectAllProducts = (state) => state.product.products;
+export const selectBrands = (state) => state.product.brands;
+export const selectCategories = (state) => state.product.categories;
 export const selectTotalItems = (state) => state.product.totalItems;
 
 export default productSlice.reducer;