import React, { useEffect, useReducer, useState } 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; var HF = 0; var HT = 1000; var WF = 0; var WT = 1000; var LF = 0; var LT = 1000; //const [HT, setHT] = useState(1000); //const [WF, setWF] = useState(0); //const [WT, setWT] = useState(1000); //const [LF, setLF] = useState(0); //const [LT, setLT] = useState(1000); 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}&HF=${HF}&HT=${HT}&WF=${WF}&WT=${WT}&LF=${LF}<=${LT}` ); dispatch({ type: "FETCH_SUCCESS", payload: data }); } catch (err) { dispatch({ type: "FETCH_FAIL", payload: getError(err) }); } }; fetchData(); }, [ category, page, query, order, subCategory, error, HF, HT, WF, WT, LF, LT, ]); 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; const filterHF = filter.HF || HF; const filterHT = filter.HT || HT; const filterWF = filter.WF || WF; const filterWT = filter.WT || WT; const filterLF = filter.LF || LF; const filterLT = filter.LT || LT; return `?category=${filterCategorry}&query=${filterQuery}&subCategory=${filterSubCategory}&page=${filterPage}&order=${sortOrder}&HF=${filterHF}&HT=${filterHT}&WF=${filterWF}&WT=${filterWT}&LF=${filterLF}<=${filterLT}`; }; const filterHandler = (e) => { e.preventDefault(); HF = document.getElementById("HF").value; HT = document.getElementById("HT").value; WF = document.getElementById("WF").value; WT = document.getElementById("WT").value; LF = document.getElementById("LF").value; LT = document.getElementById("LT").value; console.log(HT); 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}&HF=${HF}&HT=${HT}&WF=${WF}&WT=${WT}&LF=${LF}<=${LT}` ); dispatch({ type: "FETCH_SUCCESS", payload: data }); } catch (err) { dispatch({ type: "FETCH_FAIL", payload: getError(err) }); } }; fetchData(); }; return (