Merge pull request #110 from NashTech-Labs/feature/userDetail

added login, register, dropdown
NashTech-Labs · Feb 21, 2024 · 0fc6148 · 0fc6148
2 parents 54772ef + 73b2b16
commit 0fc6148
Show file tree

Hide file tree

Showing 15 changed files with 819 additions and 251 deletions.
diff --git a/car-ui-react/data/db.json b/car-ui-react/data/db.json
diff --git a/car-ui-react/package-lock.json b/car-ui-react/package-lock.json
diff --git a/car-ui-react/package.json b/car-ui-react/package.json
@@ -3,15 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap-icons": "^1.11.3",
+    "mdb-react-ui-kit": "^7.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
-    "react-toastify": "^9.0.8",
+    "react-toastify": "^9.1.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/car-ui-react/src/components/Elements/DropdownLoggedIn.js b/car-ui-react/src/components/Elements/DropdownLoggedIn.js
@@ -0,0 +1,78 @@
+import { Link, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+export const DropdownLoggedIn = ({ setDropdown }) => {
+  const naviagte = useNavigate();
+  const [userEmail, setUserEmail] = useState("");
+
+  useEffect(() => {
+    // Fetch user data from db.json
+    const fetchUserData = async () => {
+      try {
+        const response = await fetch("http://localhost:8000/users");
+        const userData = await response.json();
+
+        // Assuming sessionStorage has been set after login
+        const userId = sessionStorage.getItem("userId");
+
+        // Find the user with the matching id
+        const user = userData.find((user) => user.id === Number(userId));
+
+        // Update the userEmail state with the user's email
+        setUserEmail(user.email);
+      } catch (error) {
+        console.error("Error fetching user data:", error);
+      }
+    };
+
+    fetchUserData();
+  }, []);
+
+  function handleLogout() {
+    sessionStorage.removeItem("userName");
+    sessionStorage.removeItem("userId");
+    setDropdown(false);
+    naviagte("/");
+  }
+  return (
+    <div
+      id="dropdownAvatar"
+      className="select-none	absolute top-10 right-0 z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
+    >
+      <div className="py-3 px-4 text-sm text-gray-900 dark:text-white">
+        <div className="font-medium truncate">{userEmail}</div>
+      </div>
+      <ul
+        className="py-1 text-sm text-gray-700 dark:text-gray-200"
+        aria-labelledby="dropdownUserAvatarButton"
+      >
+        <li>
+          <Link
+            onClick={() => setDropdown(false)}
+            to="/products"
+            className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            All Cars
+          </Link>
+        </li>
+        <li>
+          <Link
+            onClick={() => setDropdown(false)}
+            to="/dashboard"
+            className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            Dashboard
+          </Link>
+        </li>
+      </ul>
+      <div className="py-1">
+        <span
+          onClick={handleLogout}
+          className="cursor-pointer block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+        >
+          Log out
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/car-ui-react/src/components/Elements/DropdownLoggedOut.js b/car-ui-react/src/components/Elements/DropdownLoggedOut.js
@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom";
+
+export const DropdownLoggedOut = ({setDropdown}) => {
+  return (
+    <div id="dropdownAvatar" className="select-none	absolute top-10 right-0 z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
+        <ul className="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownUserAvatarButton">
+            <li>
+                <Link onClick={() => setDropdown(false)} to="/products" className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">All Cars</Link>
+            </li>
+            <li>
+                <Link onClick={() => setDropdown(false)} to="/login" className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Login</Link>
+            </li>
+            <li>
+                <Link onClick={() => setDropdown(false)} to="/register" className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Register</Link>
+            </li>
+        </ul>
+    </div>
+  )
+}
diff --git a/car-ui-react/src/components/Layout/Header.js b/car-ui-react/src/components/Layout/Header.js
@@ -2,11 +2,14 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import Logo from "../../assets/logo.png";
 import {useCart} from "../../context";
+import { DropdownLoggedOut, DropdownLoggedIn } from "../index";
 
 export const Header = () => {
   const [darkMode, setDarkMode] = useState(JSON.parse(localStorage.getItem("darkMode")) || false);
+  const [dropdown, setDropdown] = useState(false);
   const {cartList} = useCart();
-
+  const id = JSON.parse(sessionStorage.getItem("userId"));
+
   useEffect(() => {
     localStorage.setItem("darkMode", JSON.stringify(darkMode));
 
@@ -33,7 +36,8 @@ export const Header = () => {
                       <span className="text-white text-sm absolute -top-1 left-2.5 bg-rose-500 px-1 rounded-full ">{cartList.length}</span>
                     </span>                    
                   </Link>
-                  <span className="bi bi-person-circle cursor-pointer text-2xl text-gray-700 dark:text-white"></span>
+                  <span onClick={()=> setDropdown(!dropdown)} className="bi bi-person-circle cursor-pointer text-2xl text-gray-700 dark:text-white"></span>
+                  { dropdown && ( id ? <DropdownLoggedIn setDropdown={setDropdown} /> : <DropdownLoggedOut setDropdown={setDropdown} />) }
               </div>
           </div>
       </nav>

diff --git a/car-ui-react/src/components/index.js b/car-ui-react/src/components/index.js
@@ -1,4 +1,6 @@
 export { Header } from "./Layout/Header"
 export { Footer } from "./Layout/Footer"
 export { ProductCard } from "./Elements/ProductCard"
-export { Rating } from "./Elements/Rating";
+export { DropdownLoggedIn } from "./Elements/DropdownLoggedIn";
+export {DropdownLoggedOut } from "./Elements/DropdownLoggedOut";
+export { Rating } from "./Elements/Rating";