Ignore:
Timestamp:
12/13/22 22:38:11 (2 years ago)
Author:
Nace Gjorgjievski <nace.gorgievski123@…>
Branches:
master
Parents:
113029b
Message:

Final Version

Location:
frontend/src/components
Files:
2 added
2 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/components/Header.js

    r113029b ra2e5735  
    1 import React from "react";
     1import React, { useEffect, useState } from "react";
    22import logo from "../Images/logo.png";
    33import "../styles/Header.css";
    … …  
    2424import NavDropdown from "react-bootstrap/NavDropdown";
    2525import { height } from "@mui/system";
     26import Axios from "axios";
     27import CategoryMenu from "./CategoryMenu";
    2628
    2729const toggleMenu = (event) => {
    … …  
    7678  const navigate = useNavigate();
    7779
     80  const [categories, setCategories] = useState([]);
     81  //const []
     82
    7883  const signoutHandler = () => {
    7984    ctxDispatch({ type: "USER_SIGNOUT" });
    … …  
    8388    window.location.href = "/signin";
    8489  };
     90
     91  const searchHandler = () => {
     92    let text = document.querySelector(".header__searchInput").value;
     93    console.log(text);
     94    navigate(`/products/search?text=${text}`);
     95  };
     96
     97  useEffect(() => {
     98    const fetchData = async () => {
     99      const cat = await Axios.get(`/api/category/getCategories`);
     100      categories.splice(0, categories.length);
     101      for (let i = 0; i < cat.data.length; i++) {
     102        categories.push(cat.data[i]);
     103      }
     104      console.log(categories[0]);
     105    };
     106    fetchData();
     107  }, [categories]);
     108  const results = [];
     109  const results1 = [];
     110  const results2 = [];
     111  const results3 = [];
     112  if (categories) createMenu(categories);
     113  function createMenu(categories) {
     114    /*
     115    let ul = document.getElementById("category-ul-1");
     116    for(let i=0;i<categories.length;i++){
     117      ul.appendChild()
     118    }*/
     119    results.splice(0, results.length);
     120    categories.forEach((category) => {
     121      results.push(<CategoryMenu category={category} />);
     122    });
     123    for (let i = 0; i < categories.length; i++) {
     124      if (i < 3) {
     125        results1.push(<CategoryMenu category={categories[i]} />);
     126      } else if (i < 5) {
     127        results2.push(<CategoryMenu category={categories[i]} />);
     128      } else {
     129        results3.push(<CategoryMenu category={categories[i]} />);
     130      }
     131    }
     132    console.log("Results:");
     133    console.log(categories);
     134  }
    85135
    86136  return (
    … …  
    839889          <div className="header__dropdown">
    840890            <div className="header__dropdownColumn">
    841               <ul>
     891              <ul id="category-ul-1">
     892                <li>{categories[0] && results1}</li>
     893                {/*
    842894                <li>
    843895                  <Link to="/products/dnevna/all">
    … …  
    916968                    </li>
    917969                  </ul>
    918                 </li>
     970                        </li>*/}
    919971              </ul>
    920972            </div>
    921973            <div className="header__dropdownColumn">
    922974              <ul>
     975                <li>{categories[0] && results2}</li>
     976                {/*
    923977                <li>
    924978                  <Link to="/products/spalna/all">
    … …  
    9981052                  </ul>
    9991053                </li>
     1054                      */}
    10001055              </ul>
    10011056            </div>
    10021057            <div className="header__dropdownColumn">
    10031058              <ul>
     1059                <li>{categories[0] && results3}</li>
     1060                {/*
    10041061                <li>
    10051062                  <Link to="/products/kancelarija/all">
    … …  
    10831140                  </ul>
    10841141                </li>
     1142                */}
    10851143              </ul>
    10861144            </div>
    … …  
    12011259        </div>
    12021260        <div className="header__search">
    1203           <input className="header__searchInput" type="text" />
    1204           <SearchIcon className="header__searchIcon" fontSize="large" />
     1261          <input className="header__searchInput" type="text" name="text" />
     1262          <button onClick={searchHandler}>
     1263            <SearchIcon className="header__searchIcon" fontSize="large" />
     1264          </button>
    12051265        </div>
    12061266      </div>

  • frontend/src/components/Product.js

    r113029b ra2e5735  
    5454      <div
    5555        style={{
    56           width: "100%",
    5756          display: "flex",
    58           justifyContent: "center",
     57          justifyContent: "space-around",
    5958          alignItems: "center",
    6059        }}
    6160      >
    62         {product.countInStock > 0 ? (
    63           <span style={{ color: "green" }}>
    64             <CheckIcon></CheckIcon>Залиха
    65           </span>
    66         ) : (
    67           <span style={{ color: "red" }}>
    68             <ClearIcon></ClearIcon>Залиха
    69           </span>
    70         )}
     61        <h5>H: {product.height}</h5>
     62        <h5>W: {product.width}</h5>
     63        <h5>L: {product.length}</h5>
    7164      </div>
    72       <div className="product__addToCart" style={{ marginTop: "15px" }}>
     65      <div
     66        className="product__addToCart"
     67        style={{ marginTop: "15px", display: "flex", justifyContent: "center" }}
     68      >
    7369        <button onClick={addToCartHandler}>
    7470          <ShoppingBasketIcon />
    7571        </button>
     72        <div
     73          style={{
     74            //width: "100%",
     75            display: "flex",
     76            justifyContent: "center",
     77            alignItems: "center",
     78            marginLeft: "10px",
     79          }}
     80        >
     81          {product.countInStock > 0 ? (
     82            <span style={{ color: "green" }}>
     83              <CheckIcon></CheckIcon>Залиха
     84            </span>
     85          ) : (
     86            <span style={{ color: "red" }}>
     87              <ClearIcon></ClearIcon>Залиха
     88            </span>
     89          )}
     90        </div>
    7691      </div>
    7792    </div>
Note: See TracChangeset for help on using the changeset viewer.