"use client"; import { products } from "@/data/products"; import React, { useEffect, useReducer } from "react"; import Image from "next/image"; import FilteringOptions from "./FilteringOptions"; import Link from "next/link"; import { initialState, reducer } from "@/reducer/FilterReducer"; import { useContextElement } from "@/context/Context"; export default function Shop() { const { addProductToCart, isAddedToCartProducts } = useContextElement(); const [state, dispatch] = useReducer(reducer, initialState); const { price, brands, filtered, sortingOption, sorted, currentPage, itemPerPage, } = state; const allProps = { ...state, setPrice: (value) => dispatch({ type: "SET_PRICE", payload: value }), setBrands: (newBrand) => { let newBrands = [...brands]; if (newBrands.includes(newBrand)) { newBrands = newBrands.filter((brand) => brand != newBrand); } else { newBrands = [...newBrands, newBrand]; } console.log(newBrands); dispatch({ type: "SET_BRANDS", payload: newBrands }); }, setSortingOption: (value) => dispatch({ type: "SET_SORTING_OPTION", payload: value }), setCurrentPage: (value) => dispatch({ type: "SET_CURRENT_PAGE", payload: value }), setItemPerPage: (value) => { dispatch({ type: "SET_CURRENT_PAGE", payload: 1 }), dispatch({ type: "SET_ITEM_PER_PAGE", payload: value }); }, clearFilter: () => { dispatch({ type: "CLEAR_FILTER" }); }, }; useEffect(() => { let filteredArrays = []; if (brands.length) { const filteredByBrands = [...products].filter((elm) => brands.every((brand) => elm.filterBrands.includes(brand)) ); filteredArrays = [...filteredArrays, filteredByBrands]; } const filteredByPrice = [...products].filter( (elm) => elm.price >= price[0] && elm.price <= price[1] ); filteredArrays = [...filteredArrays, filteredByPrice]; const commonItems = [...products].filter((item) => filteredArrays.every((array) => array.includes(item)) ); dispatch({ type: "SET_FILTERED", payload: commonItems }); }, [price, brands]); useEffect(() => { if (sortingOption === "Price Ascending") { dispatch({ type: "SET_SORTED", payload: [...filtered].sort((a, b) => a.price - b.price), }); } else if (sortingOption === "Price Descending") { dispatch({ type: "SET_SORTED", payload: [...filtered].sort((a, b) => b.price - a.price), }); } else if (sortingOption === "Title Ascending") { dispatch({ type: "SET_SORTED", payload: [...filtered].sort((a, b) => a.title.localeCompare(b.title)), }); } else if (sortingOption === "Title Descending") { dispatch({ type: "SET_SORTED", payload: [...filtered].sort((a, b) => b.title.localeCompare(a.title)), }); } else { dispatch({ type: "SET_SORTED", payload: filtered }); } dispatch({ type: "SET_CURRENT_PAGE", payload: 1 }); }, [filtered, sortingOption]); return (
Showing 1–6 of 8 results
Sort by
{sorted.map((product) => (
item
{product.title}
{product.oldPrice ? ( <> $ {product.price.toFixed( product.price % 1 === 0 ? 0 : 2 )} $ {product.oldPrice.toFixed( product.oldPrice % 1 === 0 ? 0 : 2 )} ) : ( `$${product.price.toFixed( product.price % 1 === 0 ? 0 : 2 )}` )}
{ e.preventDefault(); addProductToCart(product.id); }} className={`add-cart ${ isAddedToCartProducts(product.id) ? "cart-added" : "" }`} >
))}
{sorted.map((product, i) => (
item
{product.title}
{product.oldPrice ? ( <> $ {product.price.toFixed( product.price % 1 === 0 ? 0 : 2 )} $ {product.oldPrice.toFixed( product.oldPrice % 1 === 0 ? 0 : 2 )} ) : ( `$${product.price.toFixed( product.price % 1 === 0 ? 0 : 2 )}` )}
))}
Filters
); }