Ignore:
Timestamp:
10/25/22 11:03:34 (2 years ago)
Author:
Nace Gjorgjievski <nace.gorgievski123@…>
Branches:
master
Children:
a2e5735
Parents:
55ed171
Message:

Prototype

Location:
frontend/src/screens
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/screens/CardPaymentScreen.js

    r55ed171 r113029b  
    155155              </Form.Select>
    156156              <Form.Select style={{ width: "47%", margin: "auto" }}>
    157                 <option value="01">22</option>
    158157                <option value="02">23</option>
    159158                <option value="03">24</option>

  • frontend/src/screens/CategoryScreen.js

    r55ed171 r113029b  
    1 import React, { useEffect, useReducer, useState } from "react";
     1import React, { useEffect, useReducer } from "react";
    22import "../styles/Home.css";
    33// import data from "./data";
    … …  
    55import axios from "axios";
    66import { Helmet } from "react-helmet-async";
     7import { getError } from "../components/utils";
     8import { useLocation, useNavigate, useParams } from "react-router-dom";
     9import Form from "react-bootstrap/Form";
     10import Button from "react-bootstrap/Button";
     11import LinkContainer from "react-router-bootstrap/LinkContainer";
    712
    813const reducer = (state, action) => {
    … …  
    1116      return { ...state, loading: true };
    1217    case "FETCH_SUCCESS":
    13       return { ...state, products: action.payload, loading: false };
     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      };
    1426    case "FETCH_FAIL":
    1527      return { ...state, loading: false, error: action.payload };
    … …  
    2032
    2133function Home() {
    22   const [{ loading, error, products }, dispatch] = useReducer(reducer, {
    23     products: [],
    24     loading: true,
    25     error: "",
    26   });
    27   //const [products, setProducts] = useState([]);
     34  const params = useParams();
     35  const { category, subCategory } = params;
     36  const navigate = useNavigate();
     37  const { search } = useLocation();
     38  const sp = new URLSearchParams(search);
     39  //const category = sp.get("category") || "all";
     40  const query = sp.get("query") || "all";
     41  //const subCategory = sp.get("subCategory") || "all";
     42  //const name = sp.get("name") || "all";
     43  const order = sp.get("order") || "newest";
     44  const page = sp.get("page") || 1;
     45
     46  const [{ loading, error, products, pages, countProducts }, dispatch] =
     47    useReducer(reducer, { loading: true, error: "" });
     48
    2849  useEffect(() => {
    2950    const fetchData = async () => {
    30       dispatch({ type: "FETCH_REQUEST" });
    3151      try {
    32         const result = await axios.get("/api/products");
    33         dispatch({ type: "FETCH_SUCCESS", payload: result.data });
     52        dispatch({ type: "FETCH_REQUEST" });
     53        /*
     54        const { data } = await axios.get(
     55          `/api/products/search?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}`
     56        );*/
     57        const { data } = await axios.get(
     58          `/api/products?page=${page}&query=${query}&category=${category}&subCategory=${subCategory}&order=${order}`
     59        );
     60        dispatch({ type: "FETCH_SUCCESS", payload: data });
    3461      } catch (err) {
    35         dispatch({ type: "FETCH_FAIL", payload: err.message });
     62        dispatch({ type: "FETCH_FAIL", payload: getError(err) });
    3663      }
    37 
    38       //setProducts(result.data);
    3964    };
    4065    fetchData();
    41   }, []);
     66  }, [category, page, query, order, subCategory, error]);
     67
     68  const getFilterUrl = (filter) => {
     69    const filterPage = filter.page || page;
     70    const filterCategorry = filter.category || category;
     71    const filterQuery = filter.query || query;
     72    const filterSubCategory = filter.subCategory || subCategory;
     73    const sortOrder = filter.order || order;
     74    return `?category=${filterCategorry}&query=${filterQuery}&subCategory=${filterSubCategory}&page=${filterPage}&order=${sortOrder}`;
     75  };
    4276
    4377  return (
    44     <div>
     78    <div style={{ width: "100%" }}>
    4579      <Helmet>
    4680        <title>MebelCity</title>
    … …  
    5387          <div>{error}</div>
    5488        ) : (
    55           products.map((product) => (
    56             <Product key={product.slug} product={product} />
    57           ))
     89          <div style={{ width: "100%" }}>
     90            {category === "kancelarija" ? (
     91              <h1 style={{ textAlign: "center", marginTop: "10px" }}>
     92                Канцеларија
     93              </h1>
     94            ) : category === "dnevna" ? (
     95              <h1 style={{ textAlign: "center", marginTop: "10px" }}>Дневна</h1>
     96            ) : category === "spalna" ? (
     97              <h1 style={{ textAlign: "center", marginTop: "10px" }}>Спална</h1>
     98            ) : category === "hodnik" ? (
     99              <h1 style={{ textAlign: "center", marginTop: "10px" }}>Ходник</h1>
     100            ) : category === "kujna" ? (
     101              <h1 style={{ textAlign: "center", marginTop: "10px" }}>Кујна</h1>
     102            ) : category === "gradina" ? (
     103              <h1 style={{ textAlign: "center", marginTop: "10px" }}>
     104                Градина
     105              </h1>
     106            ) : category === "trpezarija" ? (
     107              <h1 style={{ textAlign: "center", marginTop: "10px" }}>
     108                Трпезарија
     109              </h1>
     110            ) : (
     111              <h1 style={{ textAlign: "center", marginTop: "10px" }}>
     112                Детска соба
     113              </h1>
     114            )}
     115
     116            <div
     117              style={{
     118                width: "100%",
     119                display: "flex",
     120                justifyContent: "space-evenly",
     121                alignItems: "center",
     122                marginTop: "20px",
     123              }}
     124            >
     125              <Form
     126                style={{
     127                  width: "100%",
     128                  display: "flex",
     129                  justifyContent: "end",
     130                  marginRight: "40px",
     131                  alignItems: "center",
     132                }}
     133              >
     134                {/*}
     135                <Form.Group>
     136                  <Form.Select
     137                    value={subCategory}
     138                    onChange={(e) => {
     139                      navigate(
     140                        getFilterUrl({ subCategory: e.target.value, page: 1 })
     141                      );
     142                    }}
     143                  >
     144                    <option value="all">Подкатегорија</option>
     145
     146                    {category === "dnevna" && (
     147                      <option value="agolni-garnituri">Аголни Гарнитури</option>
     148                    )}
     149                    {category === "dnevna" && (
     150                      <option value="sofi">Софи</option>
     151                    )}
     152                    {category === "dnevna" && (
     153                      <option value="fotelji">Фотелји</option>
     154                    )}
     155                    {category === "dnevna" && (
     156                      <option value="taburetki">Табуретки</option>
     157                    )}
     158                    {category === "dnevna" && (
     159                      <option value="klub-masi">Клуб маси</option>
     160                    )}
     161                    {category === "dnevna" && (
     162                      <option value="tv-komodi">ТВ комоди</option>
     163                    )}
     164                    {category === "dnevna" && (
     165                      <option value="komodi">Комоди</option>
     166                    )}
     167                    {category === "spalna" && (
     168                      <option value="spalni-kompleti">Спални Комплети</option>
     169                    )}
     170                    {category === "spalna" && (
     171                      <option value="lezai">Лежаи</option>
     172                    )}
     173                    {category === "spalna" && (
     174                      <option value="kreveti">Кревети</option>
     175                    )}
     176                    {category === "spalna" && (
     177                      <option value="plakari">Плакари</option>
     178                    )}
     179                    {category === "spalna" && (
     180                      <option value="nokni-skafcinja">Ноќни шкафчиња</option>
     181                    )}
     182                    {category === "spalna" && (
     183                      <option value="toaletni-masi">Тоалетни маси</option>
     184                    )}
     185                    {category === "kancelarija" && (
     186                      <option value="biroa">Бироа</option>
     187                    )}
     188                    {category === "kancelarija" && (
     189                      <option value="kancelariski-stolovi">
     190                        Канцелариски столови
     191                      </option>
     192                    )}
     193                    {category === "kancelarija" && (
     194                      <option value="gejmerski-stolovi">
     195                        Гејмерски столови
     196                      </option>
     197                    )}
     198                    {category === "kancelarija" && (
     199                      <option value="kancelariski-skafovi">
     200                        Канцелариски шкафови
     201                      </option>
     202                    )}
     203                    {category === "hodnik" && (
     204                      <option value="skafovi-za-cevli">Шкафови за чевли</option>
     205                    )}
     206                    {category === "hodnik" && (
     207                      <option value="zakacalki-i-ogledala">
     208                        Закачалки и огледала
     209                      </option>
     210                    )}
     211                    {category === "hodnik" && (
     212                      <option value="kolekcii-za-hodnik">
     213                        Колекции за ходник
     214                      </option>
     215                    )}
     216                    {category === "gradina" && (
     217                      <option value="gradinarski-kompleti">
     218                        Градинарски комплети
     219                      </option>
     220                    )}
     221                    {category === "gradina" && (
     222                      <option value="gradinarski-lulki">
     223                        Градинарски лулки
     224                      </option>
     225                    )}
     226                    {category === "gradina" && (
     227                      <option value="gradinarski-cadori">
     228                        Градинарски чадори
     229                      </option>
     230                    )}
     231                    {category === "gradina" && (
     232                      <option value="gradinarski-masi">Градинарски маси</option>
     233                    )}
     234                    {category === "gradina" && (
     235                      <option value="gradinarski-stolovi">
     236                        Градинарски столови
     237                      </option>
     238                    )}
     239                    {category === "gradina" && (
     240                      <option value="gradinarsko-osvetluvanje">
     241                        Градинарско осветлување
     242                      </option>
     243                    )}
     244                    {category === "trpezarija" && (
     245                      <option value="trpezariski-masi">Трпезариски маси</option>
     246                    )}
     247                    {category === "trpezarija" && (
     248                      <option value="trpezariski-stolovi">
     249                        Трпезариски столови
     250                      </option>
     251                    )}
     252                    {category === "trpezarija" && (
     253                      <option value="kujnski-garnituri">
     254                        Кујнски гарнитури
     255                      </option>
     256                    )}
     257                    {category === "trpezarija" && (
     258                      <option value="bar-stolovi-i-masi">
     259                        Бар столови и маси
     260                      </option>
     261                    )}
     262                    {category === "kujna" && (
     263                      <option value="kujnski-agolni-garnituri">
     264                        Кујнски аголни гарнитури
     265                      </option>
     266                    )}
     267                    {category === "kujna" && (
     268                      <option value="standardni-kujni">Стандардни кујни</option>
     269                    )}
     270                    {category === "detska" && (
     271                      <option value="kolekcii-za-detska-soba">
     272                        Колекции за детска соба
     273                      </option>
     274                    )}
     275                    {category === "detska" && (
     276                      <option value="detski-biroa">Детски бироа</option>
     277                    )}
     278                    {category === "detska" && (
     279                      <option value="detski-lezai">Детски лежаи</option>
     280                    )}
     281                  </Form.Select>
     282                    </Form.Group>*/}
     283                <Form.Group>
     284                  <Form.Select
     285                    id="sortOrder"
     286                    onChange={(e) => {
     287                      navigate(getFilterUrl({ order: e.target.value }));
     288                    }}
     289                  >
     290                    <option value={"newest"}>Сортирај по цена</option>
     291                    <option value={"lowFirst"}>Од ниска кон висока</option>
     292                    <option value={"highFirst"}>Од висока кон ниска</option>
     293                  </Form.Select>
     294                </Form.Group>
     295              </Form>
     296            </div>
     297            <div
     298              style={{
     299                display: "flex",
     300                flexWrap: "wrap",
     301                justifyContent: "space-evenly",
     302                alignItems: "center",
     303                marginTop: "10px",
     304              }}
     305            >
     306              {products.map((product) => (
     307                <Product key={product.slug} product={product} />
     308              ))}
     309            </div>
     310            <div
     311              style={{
     312                marginTop: "20px",
     313                display: "flex",
     314                justifyContent: "center",
     315                alignItems: "center",
     316              }}
     317            >
     318              {[...Array(pages).keys()].map((x) => (
     319                <LinkContainer
     320                  key={x + 1}
     321                  className="mx-1"
     322                  to={getFilterUrl({ page: x + 1 })}
     323                >
     324                  <Button
     325                    className={Number(page) === x + 1 ? "text-bold" : ""}
     326                    variant={Number(page) === x + 1 ? "danger" : "light"}
     327                  >
     328                    {x + 1}
     329                  </Button>
     330                </LinkContainer>
     331              ))}
     332            </div>
     333          </div>
    58334        )}
    59335      </div>

  • frontend/src/screens/Home.js

    r55ed171 r113029b  
    1414import axios from "axios";
    1515import { Helmet } from "react-helmet-async";
     16import { useNavigate } from "react-router-dom";
    1617
    1718const reducer = (state, action) => {
    … …  
    3435    error: "",
    3536  });
     37  const navigate = useNavigate();
    3638  //const [products, setProducts] = useState([]);
    3739  useEffect(() => {
    … …  
    148150      </div>
    149151      <div className="grid-container">
    150         <div className="grid-item item1">Дневна</div>
     152        <div
     153          className="grid-item item1"
     154          onClick={() => navigate("/products/dnevna/all")}
     155        >
     156          Дневна
     157        </div>
    151158        <div className="grid-item item2">Ходник</div>
    152159        <div className="grid-item item3">Трпезарија</div>

  • frontend/src/screens/HomeWithJumbo.js

    r55ed171 r113029b  
    1414import { Helmet } from "react-helmet-async";
    1515import Jumbo from "../components/JumboSlider";
     16import { useNavigate } from "react-router-dom";
    1617
    1718function Home() {
     19  const navigate = useNavigate();
    1820  const clearActive = () => {
    1921    let icon1 = document.getElementById("icon1");
    … …  
    108110      </div>
    109111      <div className="grid-container">
    110         <div className="grid-item item1">Дневна</div>
    111         <div className="grid-item item2">Ходник</div>
    112         <div className="grid-item item3">Трпезарија</div>
    113         <div className="grid-item item4">Спална</div>
    114         <div className="grid-item item5">Кујна</div>
    115         <div className="grid-item item6">Канцеларија</div>
    116         <div className="grid-item item7">Детска соба</div>
    117         <div className="grid-item item8">Мебел за градина</div>
     112        <div
     113          className="grid-item item1"
     114          onClick={() => navigate("/products/dnevna/all")}
     115        >
     116          Дневна
     117        </div>
     118        <div
     119          className="grid-item item2"
     120          onClick={() => navigate("/products/hodnik/all")}
     121        >
     122          Ходник
     123        </div>
     124        <div
     125          className="grid-item item3"
     126          onClick={() => navigate("/products/trpezarija/all")}
     127        >
     128          Трпезарија
     129        </div>
     130        <div
     131          className="grid-item item4"
     132          onClick={() => navigate("/products/spalna/all")}
     133        >
     134          Спална
     135        </div>
     136        <div
     137          className="grid-item item5"
     138          onClick={() => navigate("/products/kujna/all")}
     139        >
     140          Кујна
     141        </div>
     142        <div
     143          className="grid-item item6"
     144          onClick={() => navigate("/products/kancelarija/all")}
     145        >
     146          Канцеларија
     147        </div>
     148        <div
     149          className="grid-item item7"
     150          onClick={() => navigate("/products/detska/all")}
     151        >
     152          Детска соба
     153        </div>
     154        <div
     155          className="grid-item item8"
     156          onClick={() => navigate("/products/gradina/all")}
     157        >
     158          Мебел за градина
     159        </div>
    118160      </div>
    119161    </div>
Note: See TracChangeset for help on using the changeset viewer.