From eea71c8370cde5718923ee08ebb094c8250342e3 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sat, 4 Mar 2023 22:49:06 +0800
Subject: [PATCH] Added user info page

---
 src/Components/Api/Api.tsx           |  1 +
 src/Components/Header/Header.tsx     |  4 +--
 src/Components/UserIcon/UserIcon.tsx | 39 ++++++++++++++++++++++++++
 src/Routes/UserPage/UserPage.tsx     | 41 ++++++++++++++++++++++++++++
 src/index.tsx                        |  7 ++++-
 5 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 src/Components/UserIcon/UserIcon.tsx
 create mode 100644 src/Routes/UserPage/UserPage.tsx

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index 84bd8b3..70d018b 100644
--- a/src/Components/Api/Api.tsx
+++ b/src/Components/Api/Api.tsx
@@ -115,6 +115,7 @@ export function UserInfo() {
       },
     })
     .then((response) => {
+      console.log(response.data);
       return response.data;
     })
     .catch((error) => {
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 3ba2bdc..3acb0b8 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -4,6 +4,7 @@ import styles from "../../styles";
 import AppIcon from "../AppIcon/AppIcon";
 import Login from "../LoginButton/LoginButton";
 import HomeIcon from "../HomeIcon/HomeIcon";
+import UserIcon from "../UserIcon/UserIcon";
 
 export default function Header() {
   return (
@@ -16,8 +17,7 @@ export default function Header() {
           }}
         >
           <HomeIcon size={32} color="white" />
-          <HomeIcon size={32} color="white" />
-          <HomeIcon size={32} color="white" />
+          <UserIcon size={32} color="white" />
         </div>
         <div
           style={{
diff --git a/src/Components/UserIcon/UserIcon.tsx b/src/Components/UserIcon/UserIcon.tsx
new file mode 100644
index 0000000..454ff54
--- /dev/null
+++ b/src/Components/UserIcon/UserIcon.tsx
@@ -0,0 +1,39 @@
+import { Button } from "@mui/material";
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { IconProps } from "../../Interfaces/Interfaces";
+
+export default function UserIcon(props: IconProps) {
+  const navigate = useNavigate();
+  return (
+    <Button
+      variant="contained"
+      style={{
+        backgroundColor: "#005997",
+        borderRadius: 16,
+        width: props.size + "px",
+        height: props.size + "px",
+        margin: 4,
+        alignContent: "center",
+        alignItems: "center",
+      }}
+      onClick={() => navigate("/User")}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
+        <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
+      </svg>
+    </Button>
+  );
+}
diff --git a/src/Routes/UserPage/UserPage.tsx b/src/Routes/UserPage/UserPage.tsx
new file mode 100644
index 0000000..0085caf
--- /dev/null
+++ b/src/Routes/UserPage/UserPage.tsx
@@ -0,0 +1,41 @@
+import styles from "../../styles";
+import Header from "../../Components/Header/Header";
+import { UserInfo } from "../../Components/Api/Api";
+import { useQuery } from "react-query";
+import { useSelector } from "react-redux";
+import { LoginState } from "../../Interfaces/Interfaces";
+
+export default function UserPage() {
+  const { data, isLoading, error } = useQuery("user", UserInfo, { retry: 0 });
+  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
+  if (isLoading && !error) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <p style={styles.text_medium}>Loading...</p>
+      </div>
+    );
+  } else if (error) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <p style={styles.text_medium_red}>An error has occured</p>
+      </div>
+    );
+  } else if (!logged_in) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <p style={styles.text_medium_red}>Please login to view user info</p>
+      </div>
+    );
+  }
+  return (
+    <div style={styles.background}>
+      <Header />
+      <p style={styles.text_medium}>Username: {data.username}</p>
+      <p style={styles.text_medium}>Email: {data.email}</p>
+      <p style={styles.text_medium}>User ID: {data.id}</p>
+    </div>
+  );
+}
diff --git a/src/index.tsx b/src/index.tsx
index 0407eef..04f137a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,12 +9,13 @@ import NewNote from "./Routes/NewNote/NewNote";
 import Login from "./Routes/Login/Login";
 import Activation from "./Routes/Activation/Activation";
 import Register from "./Routes/Register/Register";
+import UserPage from "./Routes/UserPage/UserPage";
+import ViewEditNote from "./Routes/ViewEditNote/ViewEditNote";
 
 import { QueryClient, QueryClientProvider } from "react-query";
 
 import { Provider } from "react-redux";
 import Store from "./Features/Redux/Store/Store";
-import ViewEditNote from "./Routes/ViewEditNote/ViewEditNote";
 
 const queryClient = new QueryClient();
 
@@ -43,6 +44,10 @@ const router = createBrowserRouter([
     path: "/Note/:id",
     element: <ViewEditNote />,
   },
+  {
+    path: "/User",
+    element: <UserPage />,
+  },
 ]);
 
 const root = ReactDOM.createRoot(