1 | import React, { useEffect, useReducer, useState } from "react";
|
---|
2 | import "../styles/Home.css";
|
---|
3 | // import data from "./data";
|
---|
4 | import Product from "../components/Product";
|
---|
5 | import axios from "axios";
|
---|
6 | import { Helmet } from "react-helmet-async";
|
---|
7 | import { getError } from "../components/utils";
|
---|
8 | import { useLocation, useNavigate, useParams } from "react-router-dom";
|
---|
9 | import Form from "react-bootstrap/Form";
|
---|
10 | import Button from "react-bootstrap/Button";
|
---|
11 | import LinkContainer from "react-router-bootstrap/LinkContainer";
|
---|
12 |
|
---|
13 | const reducer = (state, action) => {
|
---|
14 | switch (action.type) {
|
---|
15 | case "FETCH_REQUEST":
|
---|
16 | return { ...state, loading: true };
|
---|
17 | case "FETCH_SUCCESS":
|
---|
18 | return {
|
---|
19 | ...state,
|
---|
20 | products: action.payload.products,
|
---|
21 | page: action.payload.page,
|
---|
22 | pages: action.payload.pages,
|
---|
23 | countProducts: action.payload.countProducts,
|
---|
24 | loading: false,
|
---|
25 | };
|
---|
26 | case "FETCH_FAIL":
|
---|
27 | return { ...state, loading: false, error: action.payload };
|
---|
28 | default:
|
---|
29 | return state;
|
---|
30 | }
|
---|
31 | };
|
---|
32 |
|
---|
33 | function Home() {
|
---|
34 | const params = useParams();
|
---|
35 |
|
---|
36 | const navigate = useNavigate();
|
---|
37 | const { search } = useLocation();
|
---|
38 | const sp = new URLSearchParams(search);
|
---|
39 | const text = sp.get("text") || "";
|
---|
40 | const page = sp.get("page") || 1;
|
---|
41 | const [{ loading, error, products, pages, countProducts }, dispatch] =
|
---|
42 | useReducer(reducer, { loading: true, error: "" });
|
---|
43 |
|
---|
44 | useEffect(() => {
|
---|
45 | const fetchData = async () => {
|
---|
46 | try {
|
---|
47 | dispatch({ type: "FETCH_REQUEST" });
|
---|
48 | /*
|
---|
49 | const { data } = await axios.get(
|
---|
50 | `/api/products/search?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}`
|
---|
51 | );*/
|
---|
52 | const { data } = await axios.get(
|
---|
53 | `/api/products/search?page=${page}&text=${text}`
|
---|
54 | );
|
---|
55 | dispatch({ type: "FETCH_SUCCESS", payload: data });
|
---|
56 | } catch (err) {
|
---|
57 | dispatch({ type: "FETCH_FAIL", payload: getError(err) });
|
---|
58 | }
|
---|
59 | };
|
---|
60 | fetchData();
|
---|
61 | }, [page, error, text]);
|
---|
62 |
|
---|
63 | const getFilterUrl = (filter) => {
|
---|
64 | const filterPage = filter.page || page;
|
---|
65 | const filterText = filter.text || text;
|
---|
66 | return `?page=${filterPage}&text=${filterText}`;
|
---|
67 | };
|
---|
68 |
|
---|
69 | const filterHandler = (e) => {
|
---|
70 | e.preventDefault();
|
---|
71 |
|
---|
72 | const fetchData = async () => {
|
---|
73 | try {
|
---|
74 | dispatch({ type: "FETCH_REQUEST" });
|
---|
75 | /*
|
---|
76 | const { data } = await axios.get(
|
---|
77 | `/api/products/search?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}`
|
---|
78 | );*/
|
---|
79 | const { data } = await axios.get(
|
---|
80 | `/api/products/search?page=${page}&text=${text}`
|
---|
81 | );
|
---|
82 | dispatch({ type: "FETCH_SUCCESS", payload: data });
|
---|
83 | } catch (err) {
|
---|
84 | dispatch({ type: "FETCH_FAIL", payload: getError(err) });
|
---|
85 | }
|
---|
86 | };
|
---|
87 | fetchData();
|
---|
88 | };
|
---|
89 |
|
---|
90 | return (
|
---|
91 | <div style={{ width: "100%" }}>
|
---|
92 | <Helmet>
|
---|
93 | <title>MebelCity</title>
|
---|
94 | </Helmet>
|
---|
95 |
|
---|
96 | <div className="most-popular-products">
|
---|
97 | {loading ? (
|
---|
98 | <div>Loading...</div>
|
---|
99 | ) : error ? (
|
---|
100 | <div>{error}</div>
|
---|
101 | ) : (
|
---|
102 | <div style={{ width: "100%" }}>
|
---|
103 | <h1>Резултати од пребарување</h1>
|
---|
104 |
|
---|
105 | <div
|
---|
106 | style={{
|
---|
107 | width: "100%",
|
---|
108 | display: "flex",
|
---|
109 | justifyContent: "space-evenly",
|
---|
110 | alignItems: "center",
|
---|
111 | marginTop: "20px",
|
---|
112 | }}
|
---|
113 | ></div>
|
---|
114 | <div
|
---|
115 | style={{
|
---|
116 | display: "flex",
|
---|
117 | flexWrap: "wrap",
|
---|
118 | justifyContent: "space-evenly",
|
---|
119 | alignItems: "center",
|
---|
120 | marginTop: "10px",
|
---|
121 | }}
|
---|
122 | >
|
---|
123 | {products.map((product) => (
|
---|
124 | <Product key={product.slug} product={product} />
|
---|
125 | ))}
|
---|
126 | </div>
|
---|
127 | <div
|
---|
128 | style={{
|
---|
129 | marginTop: "20px",
|
---|
130 | display: "flex",
|
---|
131 | justifyContent: "center",
|
---|
132 | alignItems: "center",
|
---|
133 | }}
|
---|
134 | >
|
---|
135 | {[...Array(pages).keys()].map((x) => (
|
---|
136 | <LinkContainer
|
---|
137 | key={x + 1}
|
---|
138 | className="mx-1"
|
---|
139 | to={getFilterUrl({ page: x + 1 })}
|
---|
140 | >
|
---|
141 | <Button
|
---|
142 | className={Number(page) === x + 1 ? "text-bold" : ""}
|
---|
143 | variant={Number(page) === x + 1 ? "danger" : "light"}
|
---|
144 | >
|
---|
145 | {x + 1}
|
---|
146 | </Button>
|
---|
147 | </LinkContainer>
|
---|
148 | ))}
|
---|
149 | </div>
|
---|
150 | </div>
|
---|
151 | )}
|
---|
152 | </div>
|
---|
153 | </div>
|
---|
154 | );
|
---|
155 | }
|
---|
156 |
|
---|
157 | export default Home;
|
---|