diff --git a/src/App.js b/src/App.js
index d0ac657..226bba7 100644
--- a/src/App.js
+++ b/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 ;
@@ -38,10 +61,10 @@ function App() {
return (
-
-
+
+
+
+
);
}
-
-export default App;
diff --git a/src/Components/SideMenu/index.js b/src/Components/SideMenu/index.js
index a4dbb67..80be229 100644
--- a/src/Components/SideMenu/index.js
+++ b/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: ,
+ },
{
label: "Logout",
icon: ,
- onClick: () => setUserSession(),
+ onClick: () => {
+ setUserSession();
+ window.location.href = "/";
+ },
},
]}
/>
diff --git a/src/constants.js b/src/constants.js
index 4db3bf5..8482ec1 100644
--- a/src/constants.js
+++ b/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);
diff --git a/src/index.js b/src/index.js
index e2ef2e6..fb250af 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,11 +7,9 @@ import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
-
-
-
-
-
+
+
+
);
// If you want to start measuring performance in your app, pass a function