From 963ee6e830c738f73d76417cabe5de7b1e3888ad Mon Sep 17 00:00:00 2001
From: toledo <kurtzidanetoledo@gmail.com>
Date: Thu, 16 Mar 2023 20:43:38 +0800
Subject: [PATCH] Polished states for logged_in and logged_in_user

---
 src/Components/LoginButton/LoginButton.tsx        | 10 ++++++----
 src/Components/Notes/Notes.tsx                    |  7 +++++--
 .../Redux/Slices/LoginSlice/LoginSlice.tsx        |  6 +++---
 src/Features/Redux/Store/Store.tsx                | 12 +++++++++---
 src/Interfaces/Interfaces.tsx                     | 15 ---------------
 src/Routes/UserPage/UserPage.tsx                  |  6 ++++--
 src/Routes/ViewEditNote/ViewEditNote.tsx          |  2 +-
 7 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/src/Components/LoginButton/LoginButton.tsx b/src/Components/LoginButton/LoginButton.tsx
index 6df15b5..72cf068 100644
--- a/src/Components/LoginButton/LoginButton.tsx
+++ b/src/Components/LoginButton/LoginButton.tsx
@@ -5,14 +5,16 @@ import styles from "../../styles";
 import { useDispatch, useSelector } from "react-redux";
 import { SetLoggedOut } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
 import { UnsetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
-import { LoggedInUserState, LoginState } from "../../Interfaces/Interfaces";
+import { RootState } from "../../Features/Redux/Store/Store";
 
 export default function LoginButton() {
   const dispatch = useDispatch();
-  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
+  const logged_in = useSelector(
+    (state: RootState) => state.logged_in.value
+    );
   const logged_in_user = useSelector(
-    (state: LoggedInUserState) => state.LoggedInUser.value
-  );
+    (state: RootState) => state.logged_in_user.value
+    );
   const navigate = useNavigate();
   if (!logged_in) {
     return (
diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index 3a20f1c..8f54b46 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/src/Components/Notes/Notes.tsx
@@ -6,7 +6,8 @@ import { Button } from "@mui/material";
 import { useQuery } from "react-query";
 import { GetNotes } from "../Api/Api";
 import { useSelector } from "react-redux";
-import { LoginState, NoteProps } from "../../Interfaces/Interfaces";
+import { NoteProps } from "../../Interfaces/Interfaces";
+import { RootState } from "../../Features/Redux/Store/Store";
 
 export default function Notes() {
   const navigate = useNavigate();
@@ -15,7 +16,9 @@ export default function Notes() {
     isLoading,
     error,
   } = useQuery("notes", GetNotes, { retry: 0 });
-  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
+  const logged_in = useSelector(
+    (state: RootState) => state.logged_in.value
+    );
   if (isLoading) {
     return (
       <div style={styles.note}>
diff --git a/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx b/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx
index 3127a34..5802c33 100644
--- a/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx
+++ b/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx
@@ -3,14 +3,14 @@ import { createSlice } from "@reduxjs/toolkit";
 export const LoginSlice = createSlice({
   name: "Login",
   initialState: {
-    logged_in: false,
+    value: false,
   },
   reducers: {
     SetLoggedIn: (state) => {
-      state.logged_in = !state.logged_in;
+      state.value = !state.value;
     },
     SetLoggedOut: (state) => {
-      state.logged_in = !state.logged_in;
+      state.value = !state.value;
     },
   },
 });
diff --git a/src/Features/Redux/Store/Store.tsx b/src/Features/Redux/Store/Store.tsx
index d14d6ca..d1eabd2 100644
--- a/src/Features/Redux/Store/Store.tsx
+++ b/src/Features/Redux/Store/Store.tsx
@@ -2,9 +2,15 @@ import { configureStore } from "@reduxjs/toolkit";
 import LoginReducer from "../Slices/LoginSlice/LoginSlice";
 import LoggedInUserReucer from "../Slices/LoggedInUserSlice/LoggedInUserSlice";
 
-export default configureStore({
+const store = configureStore({
   reducer: {
-    Login: LoginReducer,
-    LoggedInUser: LoggedInUserReucer,
+    logged_in: LoginReducer,
+    logged_in_user: LoggedInUserReucer,
   },
 });
+
+export default store;
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
\ No newline at end of file
diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx
index afd5f25..768ae65 100644
--- a/src/Interfaces/Interfaces.tsx
+++ b/src/Interfaces/Interfaces.tsx
@@ -1,18 +1,3 @@
-// Redux Interfaces
-export interface LoginState {
-  Login: { logged_in: boolean };
-}
-
-export interface LoggedInUserState {
-  LoggedInUser: {
-    value: {
-      email: string;
-      id: number;
-      username: string;
-    };
-  };
-}
-
 // Component Props Interfaces
 
 export interface NoteProps {
diff --git a/src/Routes/UserPage/UserPage.tsx b/src/Routes/UserPage/UserPage.tsx
index 6d3be48..c469428 100644
--- a/src/Routes/UserPage/UserPage.tsx
+++ b/src/Routes/UserPage/UserPage.tsx
@@ -3,12 +3,14 @@ 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";
 import LoginButton from "../../Components/LoginButton/LoginButton";
+import { RootState } from "../../Features/Redux/Store/Store";
 
 export default function UserPage() {
   const { data, isLoading, error } = useQuery("user", UserInfo, { retry: 0 });
-  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
+  const logged_in = useSelector(
+    (state: RootState) => state.logged_in.value
+    );
   if (isLoading && !error) {
     return (
       <div style={styles.background}>
diff --git a/src/Routes/ViewEditNote/ViewEditNote.tsx b/src/Routes/ViewEditNote/ViewEditNote.tsx
index 62b5009..9a82605 100644
--- a/src/Routes/ViewEditNote/ViewEditNote.tsx
+++ b/src/Routes/ViewEditNote/ViewEditNote.tsx
@@ -112,4 +112,4 @@ export default function ViewNote() {
     );
   }
   return <div>heh</div>;
-}
+}
\ No newline at end of file