From 352823a329828195bfc449c6be6f79820200632d Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sun, 26 Feb 2023 23:21:52 +0800
Subject: [PATCH] Added Redux states for login status and user logged in

---
 src/Components/Api/Api.tsx                    | 37 +------------------
 src/Components/LoginButton/LoginButton.tsx    | 29 +++++++++++----
 .../LoggedInUserSlice/LoggedInUserSlice.tsx   | 33 +++++++++++++++++
 .../Redux/Slices/LoginSlice/LoginSlice.tsx    | 21 +++++++++++
 src/Features/Redux/Store/Store.tsx            |  7 +++-
 src/Routes/Login/Login.tsx                    |  8 +++-
 6 files changed, 90 insertions(+), 45 deletions(-)
 create mode 100644 src/Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice.tsx
 create mode 100644 src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index a95e7f9..701e0b4 100644
--- a/src/Components/Api/Api.tsx
+++ b/src/Components/Api/Api.tsx
@@ -1,5 +1,5 @@
 import axios from "axios";
-
+import { useSelector, useDispatch } from "react-redux";
 export function GetNotes() {
   return axios.get("http://localhost:8000/api/v1/notes/").then((response) => {
     return response.data;
@@ -34,7 +34,6 @@ export function UserLogin(user: user) {
     .then(async (response) => {
       localStorage.setItem("token", JSON.stringify(response.data.auth_token));
       console.log("Stored: ", JSON.parse(localStorage.getItem("token") || ""));
-      StoreUser();
       return true;
     })
     .catch((error) => {
@@ -43,23 +42,6 @@ export function UserLogin(user: user) {
     });
 }
 
-export function StoreUser() {
-  const token = JSON.parse(localStorage.getItem("token") || "");
-  return axios
-    .get("http://localhost:8000/api/v1/accounts/users/me/", {
-      headers: {
-        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
@@ -76,20 +58,3 @@ export function UserInfo() {
       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) => {
-      return response.data;
-    })
-    .catch((error) => {
-      console.log("Error in fetching user data");
-      console.log(error);
-    });
-}
diff --git a/src/Components/LoginButton/LoginButton.tsx b/src/Components/LoginButton/LoginButton.tsx
index 1f71443..663c3f0 100644
--- a/src/Components/LoginButton/LoginButton.tsx
+++ b/src/Components/LoginButton/LoginButton.tsx
@@ -1,15 +1,27 @@
 import * as React from "react";
-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";
+import { useSelector, useDispatch } from "react-redux";
+import { SetLoggedOut } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
+import { UnsetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
+
+export interface user {
+  LoggedInUser: {
+    value: {
+      email: string;
+      id: number;
+      username: string;
+    };
+  };
+}
 
 export default function LoginButton() {
-  const [logged_in, setLoggedIn] = useState(false);
-  const [user, setUser] = useState(
-    JSON.parse(localStorage.getItem("user") || "").username
+  const dispatch = useDispatch();
+  const logged_in = useSelector(
+    (state: { Login: { logged_in: boolean } }) => state.Login.logged_in
   );
+  const logged_in_user = useSelector((state: user) => state.LoggedInUser.value);
   const navigate = useNavigate();
   if (!logged_in) {
     return (
@@ -30,13 +42,16 @@ export default function LoginButton() {
   }
   return (
     <div style={styles.flex_row}>
-      <p style={styles.text_small}>Logged in as {user}</p>
+      <p style={styles.text_small}>Logged in as {logged_in_user.username}</p>
       <div style={{ margin: 4 }} />
       <Button
         style={styles.button_red}
         variant="contained"
         onClick={() => {
-          setLoggedIn(false);
+          console.log("Logged out...");
+          dispatch(SetLoggedOut());
+          dispatch(UnsetUser());
+          localStorage.setItem("token", "");
         }}
       >
         Logout
diff --git a/src/Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice.tsx b/src/Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice.tsx
new file mode 100644
index 0000000..2fa228a
--- /dev/null
+++ b/src/Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice.tsx
@@ -0,0 +1,33 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const LoggedInUserSlice = createSlice({
+  name: "Login",
+  initialState: {
+    value: {
+      email: "",
+      id: 0,
+      username: "",
+    },
+  },
+  reducers: {
+    SetUser: (state, action) => {
+      state.value = {
+        email: action.payload.email,
+        id: action.payload.id,
+        username: action.payload.username,
+      };
+    },
+    UnsetUser: (state) => {
+      state.value = {
+        email: "",
+        id: 0,
+        username: "",
+      };
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { SetUser, UnsetUser } = LoggedInUserSlice.actions;
+
+export default LoggedInUserSlice.reducer;
diff --git a/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx b/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx
new file mode 100644
index 0000000..3127a34
--- /dev/null
+++ b/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx
@@ -0,0 +1,21 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const LoginSlice = createSlice({
+  name: "Login",
+  initialState: {
+    logged_in: false,
+  },
+  reducers: {
+    SetLoggedIn: (state) => {
+      state.logged_in = !state.logged_in;
+    },
+    SetLoggedOut: (state) => {
+      state.logged_in = !state.logged_in;
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { SetLoggedIn, SetLoggedOut } = LoginSlice.actions;
+
+export default LoginSlice.reducer;
diff --git a/src/Features/Redux/Store/Store.tsx b/src/Features/Redux/Store/Store.tsx
index 494bd81..d14d6ca 100644
--- a/src/Features/Redux/Store/Store.tsx
+++ b/src/Features/Redux/Store/Store.tsx
@@ -1,5 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
+import LoginReducer from "../Slices/LoginSlice/LoginSlice";
+import LoggedInUserReucer from "../Slices/LoggedInUserSlice/LoggedInUserSlice";
 
 export default configureStore({
-  reducer: {},
+  reducer: {
+    Login: LoginReducer,
+    LoggedInUser: LoggedInUserReucer,
+  },
 });
diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index a40ab69..7bad2d6 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -5,10 +5,14 @@ import { useNavigate } from "react-router-dom";
 import Header from "../../Components/Header/Header";
 import { useState } from "react";
 import { Button } from "@mui/material";
-import { UserLogin } from "../../Components/Api/Api";
+import { UserLogin, UserInfo } from "../../Components/Api/Api";
+import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
+import { useSelector, useDispatch } from "react-redux";
+import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
 
 export default function Login() {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const [user, setUser] = useState({
     username: "",
     password: "",
@@ -52,6 +56,8 @@ export default function Login() {
                 username: "",
                 password: "",
               });
+              dispatch(SetLoggedIn());
+              dispatch(SetUser(await UserInfo()));
               navigate("/");
             } else {
               setError("Invalid Login");