import React, { useEffect, useReducer } from "react"; import "../styles/Home.css"; // import data from "./data"; import Product from "../components/Product"; import axios from "axios"; import { Helmet } from "react-helmet-async"; import { getError } from "../components/utils"; import { useLocation, useNavigate, useParams } from "react-router-dom"; import Form from "react-bootstrap/Form"; import Button from "react-bootstrap/Button"; import LinkContainer from "react-router-bootstrap/LinkContainer"; const reducer = (state, action) => { switch (action.type) { case "FETCH_REQUEST": return { ...state, loading: true }; case "FETCH_SUCCESS": return { ...state, products: action.payload.products, page: action.payload.page, pages: action.payload.pages, countProducts: action.payload.countProducts, loading: false, }; case "FETCH_FAIL": return { ...state, loading: false, error: action.payload }; default: return state; } }; function Home() { const params = useParams(); const { category, subCategory } = params; const navigate = useNavigate(); const { search } = useLocation(); const sp = new URLSearchParams(search); //const category = sp.get("category") || "all"; const query = sp.get("query") || "all"; //const subCategory = sp.get("subCategory") || "all"; //const name = sp.get("name") || "all"; const order = sp.get("order") || "newest"; const page = sp.get("page") || 1; const [{ loading, error, products, pages, countProducts }, dispatch] = useReducer(reducer, { loading: true, error: "" }); useEffect(() => { const fetchData = async () => { try { dispatch({ type: "FETCH_REQUEST" }); /* const { data } = await axios.get( `/api/products/search?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}` );*/ const { data } = await axios.get( `/api/products?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}` ); dispatch({ type: "FETCH_SUCCESS", payload: data }); } catch (err) { dispatch({ type: "FETCH_FAIL", payload: getError(err) }); } }; fetchData(); }, [category, page, query, order, subCategory, error]); const getFilterUrl = (filter) => { const filterPage = filter.page || page; const filterCategorry = filter.category || category; const filterQuery = filter.query || query; const filterSubCategory = filter.subCategory || subCategory; const sortOrder = filter.order || order; return `?category=${filterCategorry}&query=${filterQuery}&subCategory=${filterSubCategory}&page=${filterPage}&order=${sortOrder}`; }; return (