Merge pull request #10 from lemeow125/feature/polish_states

Polished states for logged_in and logged_in_user

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 (

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}>

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;
     },
   },
 });

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;

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 {

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}>