File structure changed, removed products placeholder file and removed…

… its contexts

src/components/Header/BurgerMenu.jsx

@@ -5,8 +5,8 @@ import { Popover, Transition } from "@headlessui/react"
 import { Fragment, useState } from "react"
 import { HiChevronLeft, HiChevronRight } from "react-icons/hi"
 import { Link } from "react-router-dom"
-import { useMainMenuContext } from "../../contexts/MainMenuContext"
-import { useHeaderMenuContext } from "../../contexts/HeaderMenuContext"
+import { useMainMenuContext } from "../../hooks/useMainMenuContext"
+import { useHeaderMenuContext } from "../../hooks/useHeaderMenuContext"
 
 const BurgerMenu = () => {
  return (

src/components/Header/Header.jsx

@@ -2,50 +2,17 @@ import { Typography } from "@material-tailwind/react"
 import { Link } from "react-router-dom"
 import SearchBar from "./SearchBar"
 import { useEffect, useRef, useState } from "react"
-import createUnique from "../../hooks/createUnique"
-import { response } from "../../assets/disposable"
 import MainMenuContext from "../../contexts/MainMenuContext"
 import HeaderMenuContext from "../../contexts/HeaderMenuContext"
 import { Desktop, Mobile } from "../common/ReactResponsive"
 import { HeaderToolBar } from "./HeaderToolBar"
 import { MainMenuDesktop } from "./MainMenuDesktop"
 import { TopMiniMenuDesktop } from "./TopMiniMenuDesktop"
-
-const mainMenu = [
- {
- id: 1,
- label: "Shop",
- items: ["Dress", "Phones"],
- },
- {
- id: 2,
- label: "Brands",
- items: createUnique(response.products, "brand"),
- },
- {
- id: 3,
- label: "Categories",
- items: createUnique(response.products, "category"),
- },
-]
-
-const headerMenu = [
- {
- id: 1,
- label: "Order Status",
- link: "#",
- },
- {
- id: 2,
- label: "Blog",
- link: "#",
- },
- {
- id: 3,
- label: "Best Buy Business",
- link: "#",
- },
-]
+import { useSelector } from "react-redux"
+import {
+ selectProductBrands,
+ selectProductCategories,
+} from "../../features/products/productsSlice"
 
 const Header = () => {
  const headerRef = useRef(null)
@@ -78,6 +45,42 @@ const Header = () => {
  return () => removeEventListener("scroll", handleScroll)
  }, [stickyHeaderRef, headerRef])
 
+ const mainMenu = [
+ {
+ id: 1,
+ label: "Shop",
+ items: ["All Products", "Dress", "Phones"],
+ },
+ {
+ id: 2,
+ label: "Brands",
+ items: useSelector((state) => selectProductBrands(state)),
+ },
+ {
+ id: 3,
+ label: "Categories",
+ items: useSelector((state) => selectProductCategories(state)),
+ },
+ ]
+
+ const headerMenu = [
+ {
+ id: 1,
+ label: "Order Status",
+ link: "#",
+ },
+ {
+ id: 2,
+ label: "Blog",
+ link: "#",
+ },
+ {
+ id: 3,
+ label: "Best Buy Business",
+ link: "#",
+ },
+ ]
+
  return (
  <MainMenuContext.Provider value={mainMenu}>
  <HeaderMenuContext.Provider value={headerMenu}>

src/components/Header/MainMenuDesktop.jsx

@@ -5,7 +5,7 @@ import { FloatingOverlay, FloatingPortal, size } from "@floating-ui/react"
 import { Popover } from "@headlessui/react"
 import { Float } from "@headlessui-float/react"
 import { HiChevronDown } from "react-icons/hi"
-import { useMainMenuContext } from "../../contexts/MainMenuContext"
+import { useMainMenuContext } from "../../hooks/useMainMenuContext"
 
 export const MainMenuDesktop = () => {
  const mainMenu = useMainMenuContext()
@@ -51,8 +51,8 @@ export const MainMenuDesktop = () => {
  <div
  className={`relative max-h-full w-80 overflow-y-scroll border border-t-transparent bg-white py-2 text-black`}
  >
- {menu.items.map((item) => (
- <li key={item}>
+ {menu.items.map((item, i) => (
+ <li key={i}>
  <Link
  to={item}
  className="block px-3 py-1 transition-colors hover:bg-gray-100 hover:text-theme"

src/components/Header/TopMiniMenuDesktop.jsx

@@ -1,13 +1,13 @@
 import { Typography } from "@material-tailwind/react"
 import { Link } from "react-router-dom"
-import { useHeaderMenuContext } from "../../contexts/HeaderMenuContext"
+import { useHeaderMenuContext } from "../../hooks/useHeaderMenuContext"
 
 export const TopMiniMenuDesktop = () => {
  const headerMenu = useHeaderMenuContext()
  return (
  <div className="container hidden flex-wrap justify-end gap-3 lg:flex">
- {headerMenu.map((menu) => (
- <Link key={menu.id} to={menu.link} className="hover:underline">
+ {headerMenu.map((menu, i) => (
+ <Link key={i} to={menu.link} className="hover:underline">
  <Typography variant="small">{menu.label}</Typography>
  </Link>
  ))}

src/components/common/Filters.jsx

@@ -9,13 +9,15 @@ import {
 import { useRef } from "react"
 import { Link } from "react-router-dom"
 import RatingBar from "./RatingBar"
-import createUnique from "../../hooks/createUnique"
 import { MdKeyboardArrowDown } from "react-icons/md"
-import { useProductsContext } from "../../contexts/ProductsContext"
 import useLocalStorage from "../../hooks/useLocalStorage"
+import { useSelector } from "react-redux"
+import {
+ selectProductBrands,
+ selectProductCategories,
+} from "../../features/products/productsSlice"
 
 const Filters = () => {
- const products = useProductsContext()
  const [openObj, setOpenObj] = useLocalStorage("openFilters", {
  category: true,
  // brands: true,
@@ -35,6 +37,9 @@ const Filters = () => {
  const minPriceRef = useRef(null)
  const maxPriceRef = useRef(null)
 
+ const categories = useSelector((state) => selectProductCategories(state))
+ const brands = useSelector((state) => selectProductBrands(state))
+
  const handlePriceBtn = () => {
  priceBtnRef.current.disabled =
  minPriceRef.current.value === "" && maxPriceRef.current.value === ""
@@ -60,8 +65,8 @@ const Filters = () => {
  </AccordionHeader>
  <AccordionBody className="capitalize text-body">
  <ul className="flex flex-col gap-2">
- {createUnique(products, "category").map((category) => (
- <Link to={"/" + category} key={category}>
+ {categories.map((category, i) => (
+ <Link to={"/" + category} key={i}>
  <Typography className="hover:underline">{category}</Typography>
  </Link>
  ))}
@@ -87,8 +92,8 @@ const Filters = () => {
  </AccordionHeader>
  <AccordionBody className=" text-body">
  <ul className="flex flex-col gap-2">
- {createUnique(products, "brand").map((brand) => (
- <Link to={"/" + brand} key={brand}>
+ {brands.map((brand, i) => (
+ <Link to={"/" + brand} key={i}>
  <Typography className="hover:underline">{brand}</Typography>
  </Link>
  ))}

src/contexts/HeaderMenuContext.jsx

@@ -1,5 +1,4 @@
-import { createContext, useContext } from "react"
+import { createContext } from "react"
 
 const HeaderMenuContext = createContext(null)
-export const useHeaderMenuContext = () => useContext(HeaderMenuContext)
 export default HeaderMenuContext

src/contexts/MainMenuContext.jsx

@@ -1,5 +1,4 @@
-import { createContext, useContext } from "react"
+import { createContext } from "react"
 
 const MainMenuContext = createContext(null)
-export const useMainMenuContext = () => useContext(MainMenuContext)
 export default MainMenuContext

src/features/products/productsSlice.js

@@ -74,6 +74,9 @@ export const selectExclusiveProducts = createSelector([
  product.category === "laptops"))
 })
 
+export const selectProductCategories = state => state.products.categories
+export const selectProductBrands = state => state.products.brands
+
 export const fetchProducts = createAsyncThunk('products/fetchProducts', async () => {
  const response = await axios('https://dummyjson.com/products')
  return response.data

src/hooks/useHeaderMenuContext.jsx

@@ -0,0 +1,4 @@
+import { useContext } from "react"
+import HeaderMenuContext from "../contexts/HeaderMenuContext"
+
+export const useHeaderMenuContext = () => useContext(HeaderMenuContext)

src/hooks/useMainMenuContext.jsx

@@ -0,0 +1,4 @@
+import { useContext } from "react"
+import MainMenuContext from "../contexts/MainMenuContext"
+
+export const useMainMenuContext = () => useContext(MainMenuContext)

src/routes/HomePage.jsx

@@ -1,17 +1,14 @@
-import { response } from "../assets/disposable"
-import ProductsContext from "../contexts/ProductsContext"
 import ProductsGallery from "../features/products/ProductsGallery"
 import Hero from "../components/Hero"
 import PinnedProducts from "../components/PinnedProducts"
-const { products } = response
 
 const HomePage = () => {
  return (
- <ProductsContext.Provider value={products}>
+ <>
  <Hero />
  <PinnedProducts />
  <ProductsGallery />
- </ProductsContext.Provider>
+ </>
  )
 }