Allow querying for saved login session

src/App.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Dashboard from "./Routes/Dashboard/Dashboard";
 import Error from "./Routes/Error/Error";
 import Products from "./Routes/Products/Products";
@@ -60,10 +60,8 @@ const router = createBrowserRouter([
 
 export default function App() {
   return (
-    <React.StrictMode>
     <Provider store={Store}>
       <RouterProvider router={router} />
     </Provider>
-    </React.StrictMode>
   );
 }

src/Components/Api/Api.tsx

@@ -6,6 +6,9 @@ import {
   LoginParams,
   RegistrationParams,
 } from "../../Interfaces/Interfaces";
+import { useDispatch } from "react-redux";
+import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
+import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
 
 // Note APIs
 
@@ -47,7 +50,7 @@ export function UpdateProduct(note: UpdateProductParams) {
       return response.data;
     })
     .catch((error) => {
-      console.log("Error updating product", error);
+      console.log("Error updating product", error.response);
       return error;
     });
 }
@@ -64,7 +67,7 @@ export function AddProduct(note: AddProductParams) {
       return response.data;
     })
     .catch((error) => {
-      console.log("Error adding product", error);
+      console.log("Error adding product", error.response);
       return error;
     });
 }
@@ -78,7 +81,7 @@ export function DeleteProduct(id: number) {
       },
     })
     .catch((error) => {
-      console.log("Error deleting product", error);
+      console.log("Error deleting product", error.response);
       return error;
     });
 }
@@ -93,7 +96,7 @@ export function UserRegister(register: RegistrationParams) {
       return true;
     })
     .catch((error) => {
-      console.log("Registration failed: " + error);
+      console.log("Registration failed: " + error.response);
       return false;
     });
 }
@@ -110,7 +113,7 @@ export function UserLogin(user: LoginParams) {
       return true;
     })
     .catch((error) => {
-      console.log("Login Failed: " + error);
+      console.log("Login Failed: " + error.response);
       return false;
     });
 }
@@ -126,6 +129,10 @@ export function UserInfo() {
     .then((response) => {
       console.log(response.data);
       return response.data;
+    })
+    .catch((error) => {
+      console.log("Error retrieving user data", error.response);
+      return false;
     });
 }
 
@@ -137,7 +144,22 @@ export function UserActivate(activation: ActivationParams) {
       return true;
     })
     .catch((error) => {
-      console.log("Activation failed: " + error);
+      console.log("Activation failed: " + error.response);
       return false;
     });
 }
+
+export async function CheckSavedSession() {
+  console.log("Checking for saved session by querying user data");
+  if (JSON.parse(localStorage.getItem("token") || "{}")) {
+    if (await UserInfo()) {
+      console.log("Previous session found");
+      return true;
+    } else {
+      console.log("Previous session found but expired");
+      return false;
+    }
+  }
+  console.log("No previous session found");
+  return false;
+}

src/Components/Container/Container.tsx

@@ -1,13 +1,29 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Sidebar from "../Sidebar/Sidebar";
 import Header from "../Header/Header";
 import styles from "../../styles";
+import { CheckSavedSession, UserInfo } from "../Api/Api";
+import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
+import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
+import { useDispatch } from "react-redux";
 
 export interface props {
   children: React.ReactNode;
 }
 
 export default function Container(props: props) {
+  const dispatch = useDispatch();
+  // Function to check for previous login session
+  async function CheckPreviousSession() {
+    if (await CheckSavedSession()) {
+      await dispatch(toggle_login());
+      await dispatch(SetUser(await UserInfo()));
+    }
+  }
+  useEffect(() => {
+    CheckPreviousSession();
+  }, []);
+
   return (
     <div>
       <Header />

src/Components/Login/Login.tsx

@@ -1,8 +1,9 @@
 import { useSelector, useDispatch } from "react-redux";
-import { toggle_login } from "../../Features/Login/LoginSlice";
+import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
 import { Button } from "@mui/material";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
+import { LoggedInUserState } from "../../Interfaces/Interfaces";
 
 export interface state {
   logged_in: {
@@ -11,6 +12,9 @@ export interface state {
 }
 export default function Login() {
   const logged_in = useSelector((state: state) => state.logged_in.value);
+  const logged_in_user = useSelector(
+    (state: LoggedInUserState) => state.logged_in_user.value
+  );
   const navigate = useNavigate();
   const dispatch = useDispatch();
   async function login() {
@@ -20,7 +24,9 @@ export default function Login() {
 
   if (logged_in) {
     return (
-      <p style={{ ...styles.text_white, ...styles.text_M }}>Welcome Jophiel</p>
+      <p style={{ ...styles.text_white, ...styles.text_M }}>
+        Logged in as {logged_in_user.username}
+      </p>
     );
   } else {
     return (

src/Components/Logout/Logout.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useDispatch } from "react-redux";
-import { toggle_login } from "../../Features/Login/LoginSlice";
+import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
 import { Button } from "@mui/material";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";

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;

src/Interfaces/Interfaces.tsx

@@ -14,7 +14,7 @@ export interface LoginState {
 }
 
 export interface LoggedInUserState {
-  LoggedInUser: {
+  logged_in_user: {
     value: {
       email: string;
       id: number;

src/Plugins/Redux/Store/Store.tsx

@@ -1,8 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
-import LoginReducer from "../../../Features/Login/LoginSlice";
+import LoginReducer from "../../../Features/Redux/Slices/Login/LoginSlice";
+import LoggedInUserReducer from "../../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
 
 export default configureStore({
   reducer: {
     logged_in: LoginReducer,
+    logged_in_user: LoggedInUserReducer,
   },
 });

src/Routes/Login/Login.tsx

@@ -6,8 +6,9 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 
-import { UserLogin } from "../../Components/Api/Api";
+import { UserInfo, UserLogin } from "../../Components/Api/Api";
-import { toggle_login } from "../../Features/Login/LoginSlice";
+import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
+import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
 
 export default function Login() {
   const navigate = useNavigate();
@@ -68,7 +69,7 @@ export default function Login() {
             });
             if (await UserLogin(user)) {
               await dispatch(toggle_login());
-              // await dispatch(SetUser(await UserInfo()));
+              await dispatch(SetUser(await UserInfo()));
               navigate("/");
             } else {
               setError("Invalid Login");
@@ -89,6 +90,7 @@ export default function Login() {
         >
           Register
         </Button>
+        <p style={{ ...styles.text_red, ...styles.text_M }}>{error}</p>
       </div>
     </div>
   );

src/index.tsx

@@ -1,17 +1,13 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
 );
+root.render(<App />);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))