Allow querying for saved login session

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";