Changeset a2e5735 for frontend/src/components/Header.js

Timestamp:

12/13/22 22:38:11 (19 months ago)

Author:

Nace Gjorgjievski <nace.gorgievski123@…>

Branches:

master

Parents:

113029b

Message:

Final Version

File:

• frontend/src/components/Header.js (modified) (9 diffs)

frontend/src/components/Header.js

@@ -1 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import logo from "../Images/logo.png";
 import "../styles/Header.css";
@@ -24 +24 @@
 import NavDropdown from "react-bootstrap/NavDropdown";
 import { height } from "@mui/system";
+import Axios from "axios";
+import CategoryMenu from "./CategoryMenu";
 
 const toggleMenu = (event) => {
@@ -76 +78 @@
   const navigate = useNavigate();
 
+  const [categories, setCategories] = useState([]);
+  //const []
+
   const signoutHandler = () => {
     ctxDispatch({ type: "USER_SIGNOUT" });
@@ -83 +88 @@
     window.location.href = "/signin";
   };
+
+  const searchHandler = () => {
+    let text = document.querySelector(".header__searchInput").value;
+    console.log(text);
+    navigate(`/products/search?text=${text}`);
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const cat = await Axios.get(`/api/category/getCategories`);
+      categories.splice(0, categories.length);
+      for (let i = 0; i < cat.data.length; i++) {
+        categories.push(cat.data[i]);
+      }
+      console.log(categories[0]);
+    };
+    fetchData();
+  }, [categories]);
+  const results = [];
+  const results1 = [];
+  const results2 = [];
+  const results3 = [];
+  if (categories) createMenu(categories);
+  function createMenu(categories) {
+    /*
+    let ul = document.getElementById("category-ul-1");
+    for(let i=0;i<categories.length;i++){
+      ul.appendChild()
+    }*/
+    results.splice(0, results.length);
+    categories.forEach((category) => {
+      results.push(<CategoryMenu category={category} />);
+    });
+    for (let i = 0; i < categories.length; i++) {
+      if (i < 3) {
+        results1.push(<CategoryMenu category={categories[i]} />);
+      } else if (i < 5) {
+        results2.push(<CategoryMenu category={categories[i]} />);
+      } else {
+        results3.push(<CategoryMenu category={categories[i]} />);
+      }
+    }
+    console.log("Results:");
+    console.log(categories);
+  }
 
   return (
@@ -839 +889 @@
           <div className="header__dropdown">
             <div className="header__dropdownColumn">
-              <ul>
+              <ul id="category-ul-1">
+                <li>{categories[0] && results1}</li>
+                {/*
                 <li>
                   <Link to="/products/dnevna/all">
@@ -916 +968 @@
                     </li>
                   </ul>
-                </li>
+                        </li>*/}
               </ul>
             </div>
             <div className="header__dropdownColumn">
               <ul>
+                <li>{categories[0] && results2}</li>
+                {/*
                 <li>
                   <Link to="/products/spalna/all">
@@ -998 +1052 @@
                   </ul>
                 </li>
+                      */}
               </ul>
             </div>
             <div className="header__dropdownColumn">
               <ul>
+                <li>{categories[0] && results3}</li>
+                {/*
                 <li>
                   <Link to="/products/kancelarija/all">
@@ -1083 +1140 @@
                   </ul>
                 </li>
+                */}
               </ul>
             </div>
@@ -1201 +1259 @@
         </div>
         <div className="header__search">
-          <input className="header__searchInput" type="text" />
-          <SearchIcon className="header__searchIcon" fontSize="large" />
+          <input className="header__searchInput" type="text" name="text" />
+          <button onClick={searchHandler}>
+            <SearchIcon className="header__searchIcon" fontSize="large" />
+          </button>
         </div>
       </div>