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 (
@@ -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");