From 76fb8decac33e8792cff959be385780b7e07474c Mon Sep 17 00:00:00 2001 From: Wind-Explorer Date: Sat, 6 Jul 2024 02:16:06 +0800 Subject: [PATCH] =?UTF-8?q?NAV=20BAR=20=F0=9F=94=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/assets/ecoconnectFull.svg | 16 ++ client/assets/ecoconnectLogo.svg | 8 + client/src/components/NavigationBar.tsx | 186 ++++++++++++++++++++++++ client/src/icons.tsx | 38 +++++ client/src/layouts/default.tsx | 4 +- client/src/security/users.ts | 3 + 6 files changed, 254 insertions(+), 1 deletion(-) create mode 100644 client/assets/ecoconnectFull.svg create mode 100644 client/assets/ecoconnectLogo.svg create mode 100644 client/src/components/NavigationBar.tsx diff --git a/client/assets/ecoconnectFull.svg b/client/assets/ecoconnectFull.svg new file mode 100644 index 0000000..8f1cd3d --- /dev/null +++ b/client/assets/ecoconnectFull.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/client/assets/ecoconnectLogo.svg b/client/assets/ecoconnectLogo.svg new file mode 100644 index 0000000..ff74d97 --- /dev/null +++ b/client/assets/ecoconnectLogo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/client/src/components/NavigationBar.tsx b/client/src/components/NavigationBar.tsx new file mode 100644 index 0000000..ea6f863 --- /dev/null +++ b/client/src/components/NavigationBar.tsx @@ -0,0 +1,186 @@ +import { + Button, + Avatar, + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, + DropdownSection, +} from "@nextui-org/react"; + +import { + ArrowRightStartOnRectangleIcon, + PencilSquareIcon, + RocketLaunchIcon, +} from "../icons"; + +import config from "../config"; +import { retrieveUserInformation } from "../security/users"; +import { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; + +export default function NavigationBar() { + let [userProfileImageURL, setUserProfileImageURL] = useState(""); + let [userInformation, setUserInformation] = useState(); + let [doneLoading, setDoneLoading] = useState(false); + const [isScrolled, setIsScrolled] = useState(false); + + let navigate = useNavigate(); + useEffect(() => { + retrieveUserInformation() + .then((value) => { + setUserProfileImageURL( + `${config.serverAddress}/users/profile-image/${value.id}` + ); + setUserInformation(value); + }) + .catch((err) => { + console.log(err); + return; + }) + .finally(() => { + setDoneLoading(true); + }); + + const handleScroll = () => { + setIsScrolled(window.scrollY > 10); + }; + + window.addEventListener("scroll", handleScroll); + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + return ( +
+
+
+
+ +
+ + + +
+
+ {userInformation && ( +
+ + + + + + + +
+ +
+

Signed in as

+

+ {userInformation.firstName}{" "} + {userInformation.lastName} +

+

{userInformation.email}

+
+
+ + } + onPress={() => { + navigate("/springboard"); + }} + /> + } + onPress={() => { + navigate("/manage-account"); + }} + /> + + } + color="danger" + title="Sign out" + onPress={() => { + localStorage.clear(); + window.location.reload(); + }} + /> + + +
+ )} + {!userInformation && doneLoading && ( +
+ + +
+ )} +
+
+
+ ); +} diff --git a/client/src/icons.tsx b/client/src/icons.tsx index 1ed7fb3..44c535b 100644 --- a/client/src/icons.tsx +++ b/client/src/icons.tsx @@ -97,3 +97,41 @@ export const EyeIcon = () => { ); }; + +export const RocketLaunchIcon = () => { + return ( + + + + ); +}; + +export const ArrowRightStartOnRectangleIcon = () => { + return ( + + + + ); +}; diff --git a/client/src/layouts/default.tsx b/client/src/layouts/default.tsx index fb93b64..49de78b 100644 --- a/client/src/layouts/default.tsx +++ b/client/src/layouts/default.tsx @@ -1,5 +1,6 @@ import { Toaster } from "react-hot-toast"; import SingaporeAgencyStrip from "../components/SingaporeAgencyStrip"; +import NavigationBar from "../components/NavigationBar"; export default function DefaultLayout({ children, @@ -9,8 +10,9 @@ export default function DefaultLayout({ return (
-
{children}
+
{children}
+
); } diff --git a/client/src/security/users.ts b/client/src/security/users.ts index 3c3b9c2..44a8ecf 100644 --- a/client/src/security/users.ts +++ b/client/src/security/users.ts @@ -3,6 +3,9 @@ import config from "../config"; import instance from "./http"; export async function retrieveUserInformation() { + if (!localStorage.getItem("accessToken")) { + throw "No access token"; + } try { let userId = await instance.get(`${config.serverAddress}/users/auth`); let userInformation = await instance.get(