Polished and added more apis

src/Components/Api/Api.tsx

@@ -32,9 +32,9 @@ export function UserLogin(user: user) {
   return axios
     .post("http://localhost:8000/api/v1/accounts/token/login/", user)
     .then(async (response) => {
-      console.log(response.data);
+      localStorage.setItem("token", JSON.stringify(response.data.auth_token));
-      localStorage.setItem("token", response.data);
+      console.log("Stored: ", JSON.parse(localStorage.getItem("token") || ""));
-      console.log(await UserInfo());
+      StoreUser();
       return true;
     })
     .catch((error) => {
@@ -43,12 +43,46 @@ export function UserLogin(user: user) {
     });
 }
 
-export function UserInfo() {
+export function StoreUser() {
-  const token = localStorage.getItem("token");
+  const token = JSON.parse(localStorage.getItem("token") || "");
   return axios
     .get("http://localhost:8000/api/v1/accounts/users/me/", {
       headers: {
-        Authorization: "Token 8b3a393fc7601a5a1f2a831bc795905c05420782",
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      localStorage.setItem("user", JSON.stringify(response.data));
+    })
+    .catch((error) => {
+      console.log("Error in storing user data");
+      console.log(error);
+    });
+}
+
+export function UserInfo() {
+  const token = JSON.parse(localStorage.getItem("token") || "");
+  return axios
+    .get("http://localhost:8000/api/v1/accounts/users/me/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.log("Error in fetching user data");
+      console.log(error);
+    });
+}
+
+export function GetUsername() {
+  const token = JSON.parse(localStorage.getItem("token") || "");
+  return axios
+    .get("http://localhost:8000/api/v1/accounts/users/me/", {
+      headers: {
+        Authorization: "Token " + token,
       },
     })
     .then((response) => {

src/Components/Header/Header.tsx

@@ -15,10 +15,10 @@ export default function Header() {
             ...{ flex: 2 },
           }}
         >
-          <HomeIcon size="5vh" color="white" />
+          <HomeIcon size={32} color="white" />
-          <HomeIcon size="5vh" color="white" />
+          <HomeIcon size={32} color="white" />
-          <HomeIcon size="5vh" color="white" />
+          <HomeIcon size={32} color="white" />
-          <HomeIcon size="5vh" color="white" />
+          <HomeIcon size={32} color="white" />
         </div>
         <div
           style={{

src/Components/HomeIcon/HomeIcon.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { useNavigate } from "react-router-dom";
 
 export interface props {
-  size: string;
+  size: number;
   color: string;
 }
 
@@ -15,30 +15,30 @@ export default function HomeIcon(props: props) {
       style={{
         backgroundColor: "#005997",
         borderRadius: 16,
-        width: props.size,
+        width: props.size || 32,
-        height: props.size,
+        height: props.size || 32,
         margin: 4,
+        alignContent: "center",
+        alignItems: "center",
       }}
       onClick={() => navigate("/")}
     >
-      <div style={{ justifyContent: "center", alignContent: "center" }}>
+      <svg
-        <svg
+        xmlns="http://www.w3.org/2000/svg"
-          xmlns="http://www.w3.org/2000/svg"
+        width={props.size - 4}
-          width="100%"
+        height={props.size - 4}
-          height="100%"
+        viewBox="0 0 24 24"
-          viewBox="0 0 24 24"
+        stroke-width="2"
-          stroke-width="2"
+        stroke={props.color}
-          stroke={props.color}
+        fill="none"
-          fill="none"
+        stroke-linecap="round"
-          stroke-linecap="round"
+        stroke-linejoin="round"
-          stroke-linejoin="round"
+      >
-        >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
-          <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
+        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
-          <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
+        <path d="M10 12h4v4h-4z"></path>
-          <path d="M10 12h4v4h-4z"></path>
+      </svg>
-        </svg>
-      </div>
     </Button>
   );
 }

src/Components/LoginButton/LoginButton.tsx

@@ -3,9 +3,13 @@ import { useState } from "react";
 import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import styles from "../../styles";
+import { GetUsername, UserInfo } from "../Api/Api";
 
 export default function LoginButton() {
   const [logged_in, setLoggedIn] = useState(false);
+  const [user, setUser] = useState(
+    JSON.parse(localStorage.getItem("user") || "").username
+  );
   const navigate = useNavigate();
   if (!logged_in) {
     return (
@@ -26,7 +30,7 @@ export default function LoginButton() {
   }
   return (
     <div style={styles.flex_row}>
-      <p style={styles.text_small}>Logged in as</p>
+      <p style={styles.text_small}>Logged in as {user}</p>
       <div style={{ margin: 4 }} />
       <Button
         style={styles.button_red}

src/Routes/Login/Login.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import styles from "../../styles";
 
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import Header from "../../Components/Header/Header";
 import { useState } from "react";
 import { Button } from "@mui/material";
@@ -48,6 +48,10 @@ export default function Login() {
           variant="contained"
           onClick={async () => {
             if (await UserLogin(user)) {
+              setUser({
+                username: "",
+                password: "",
+              });
               navigate("/");
             } else {
               setError("Invalid Login");