From 4caf7479fd8268c235f2c1ff2cc86c110da8202c Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sun, 26 Feb 2023 23:50:13 +0800
Subject: [PATCH] Added functional user login

---
 src/Components/Api/Api.tsx                 | 11 +++++++++--
 src/Components/LoginButton/LoginButton.tsx |  2 +-
 src/Routes/Login/Login.tsx                 | 18 +++++++++---------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index 701e0b4..ee47f8c 100644
--- a/src/Components/Api/Api.tsx
+++ b/src/Components/Api/Api.tsx
@@ -1,5 +1,7 @@
 import axios from "axios";
-import { useSelector, useDispatch } from "react-redux";
+
+// Note APIs
+
 export function GetNotes() {
   return axios.get("http://localhost:8000/api/v1/notes/").then((response) => {
     return response.data;
@@ -23,6 +25,8 @@ export function DeleteNote(id: number) {
   return axios.delete("http://localhost:8000/api/v1/notes/" + id + "/");
 }
 
+// User APIs
+
 export interface user {
   username: string;
   password: string;
@@ -33,7 +37,10 @@ export function UserLogin(user: user) {
     .post("http://localhost:8000/api/v1/accounts/token/login/", user)
     .then(async (response) => {
       localStorage.setItem("token", JSON.stringify(response.data.auth_token));
-      console.log("Stored: ", JSON.parse(localStorage.getItem("token") || ""));
+      console.log(
+        "Login Success! Stored Token: ",
+        JSON.parse(localStorage.getItem("token") || "")
+      );
       return true;
     })
     .catch((error) => {
diff --git a/src/Components/LoginButton/LoginButton.tsx b/src/Components/LoginButton/LoginButton.tsx
index 663c3f0..cb1746f 100644
--- a/src/Components/LoginButton/LoginButton.tsx
+++ b/src/Components/LoginButton/LoginButton.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import styles from "../../styles";
-import { useSelector, useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { SetLoggedOut } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
 import { UnsetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
 
diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index 7bad2d6..a4ed28b 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -5,10 +5,11 @@ import { useNavigate } from "react-router-dom";
 import Header from "../../Components/Header/Header";
 import { useState } from "react";
 import { Button } from "@mui/material";
-import { UserLogin, UserInfo } from "../../Components/Api/Api";
-import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
+import { UserInfo, UserLogin } from "../../Components/Api/Api";
+
 import { useSelector, useDispatch } from "react-redux";
 import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
+import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
 
 export default function Login() {
   const navigate = useNavigate();
@@ -18,7 +19,6 @@ export default function Login() {
     password: "",
   });
   const [error, setError] = useState("");
-
   return (
     <div style={styles.background}>
       <Header />
@@ -51,13 +51,13 @@ export default function Login() {
           style={styles.button_green}
           variant="contained"
           onClick={async () => {
+            setUser({
+              username: "",
+              password: "",
+            });
             if (await UserLogin(user)) {
-              setUser({
-                username: "",
-                password: "",
-              });
-              dispatch(SetLoggedIn());
-              dispatch(SetUser(await UserInfo()));
+              await dispatch(SetLoggedIn());
+              await dispatch(SetUser(await UserInfo()));
               navigate("/");
             } else {
               setError("Invalid Login");