client user data

src/App.js

@@ -5,6 +5,7 @@ import PageContent from "./Components/PageContent";
 import SideMenu from "./Components/SideMenu";
 import Login from "./Pages/Login";
 import { Layout } from "antd";
+import { Constants, ClientUserDataPreview, ClientUserData } from "./constants";
 
 function useUserSession() {
   const getUserSession = () => {
@@ -29,8 +30,30 @@ function useUserSession() {
   };
 }
 
-function App() {
+export default function App() {
   const { userSession, setUserSession } = useUserSession();
+  const [userData, setUserData] = useState(ClientUserDataPreview);
+
+  useEffect(() => {
+    if (!userSession) return;
+    fetch(Constants.API_ADDRESS + "/user", {
+      method: "GET",
+
+      headers: {
+        "Content-Type": "application/json",
+        "X-Authorization": userSession,
+      },
+    })
+      .then((res) => {
+        if (res.status === 200) {
+          return res.json();
+        }
+
+        return Promise.reject(res.status);
+      })
+      .then((data) => setUserData(data))
+      .catch(console.error);
+  }, []);
 
   if (!userSession) {
     return <Login setUserSession={setUserSession} />;
@@ -38,10 +61,10 @@ function App() {
 
   return (
     <Layout style={{ minHeight: "100vh" }}>
+      <ClientUserData.Provider value={userData}>
         <SideMenu setUserSession={setUserSession}></SideMenu>
         <PageContent></PageContent>
+      </ClientUserData.Provider>
     </Layout>
   );
 }
-
-export default App;

src/Components/SideMenu/index.js

@@ -6,13 +6,15 @@ import {
 } from "@ant-design/icons";
 import { Divider, Menu } from "antd";
 import Sider from "antd/es/layout/Sider";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
+import { ClientUserData } from "../../constants";
 
 export default function SideMenu({ setUserSession }) {
   const location = useLocation();
   const [selectedKeys, setSelectedKeys] = useState("/");
+  const clientUserData = useContext(ClientUserData);
 
   useEffect(() => {
     const pathName = location.pathname;
@@ -63,10 +65,17 @@ export default function SideMenu({ setUserSession }) {
             selectable={false}
             mode="vertical"
             items={[
+              {
+                label: clientUserData.Username,
+                icon: <UserOutlined />,
+              },
               {
                 label: "Logout",
                 icon: <LogoutOutlined />,
-                onClick: () => setUserSession(),
+                onClick: () => {
+                  setUserSession();
+                  window.location.href = "/";
+                },
               },
             ]}
           />

src/constants.js

@@ -1,5 +1,15 @@
-const config = {
+import { createContext } from "react";
+
+export const Constants = {
   API_ADDRESS: "http://localhost:8080/v1",
 };
 
-export default config;
+let l = "loading...";
+
+// for the data preview when the request is not finished
+export const ClientUserDataPreview = {
+  Username: l,
+  Email: l,
+};
+
+export let ClientUserData = createContext(null);

src/index.js

@@ -7,11 +7,9 @@ import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
   <BrowserRouter>
     <App />
   </BrowserRouter>
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function