From ca3c25a7a442b9ee9f0210a44d140e2e45ae1ba0 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sat, 25 Mar 2023 12:57:42 +0800 Subject: [PATCH] Reverted some changes and only kept the previous session checker since each page checks for login state invidually --- src/Components/Header/Header.tsx | 3 +- src/Components/LoginButton/LoginButton.tsx | 10 +++--- .../PreviousSessionChecker.tsx | 32 +++++++++++++++++++ .../Redux/Slices/LoginSlice/LoginSlice.tsx | 7 ++-- .../Slices/OldSession/OldSessionSlice.tsx | 17 ++++++++++ src/Features/Redux/Store/Store.tsx | 4 ++- src/Routes/Login/Login.tsx | 4 +-- 7 files changed, 62 insertions(+), 15 deletions(-) create mode 100644 src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx create mode 100644 src/Features/Redux/Slices/OldSession/OldSessionSlice.tsx diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx index 3acb0b8..c33aaf3 100644 --- a/src/Components/Header/Header.tsx +++ b/src/Components/Header/Header.tsx @@ -5,10 +5,11 @@ import AppIcon from "../AppIcon/AppIcon"; import Login from "../LoginButton/LoginButton"; import HomeIcon from "../HomeIcon/HomeIcon"; import UserIcon from "../UserIcon/UserIcon"; - +import PreviousSessionChecker from "../PreviousSessionChecker/PreviousSessionChecker"; export default function Header() { return (
+
state.logged_in.value - ); + const logged_in = useSelector((state: RootState) => state.logged_in.value); const logged_in_user = useSelector( (state: RootState) => state.logged_in_user.value - ); + ); const navigate = useNavigate(); if (!logged_in) { return ( @@ -42,7 +40,7 @@ export default function LoginButton() { variant="contained" onClick={() => { console.log("Logged out..."); - dispatch(SetLoggedOut()); + dispatch(Toggle_Login()); dispatch(UnsetUser()); localStorage.setItem("token", ""); }} diff --git a/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx b/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx new file mode 100644 index 0000000..fa6d0fc --- /dev/null +++ b/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; +import { useEffect, useCallback } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { UserInfo } from "../Api/Api"; +import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice"; +import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice"; +import { set_checked } from "../../Features/Redux/Slices/OldSession/OldSessionSlice"; +import { RootState } from "../../Features/Redux/Store/Store"; +export default function PreviousSessionChecker() { + const dispatch = useDispatch(); + const logged_in = useSelector((state: RootState) => state.logged_in.value); + // Function to check for previous login session + const check = useCallback(async () => { + if (await UserInfo()) { + if (logged_in !== true) { + console.log("Previous session found. Restoring"); + await dispatch(Toggle_Login()); + await dispatch(SetUser(await UserInfo())); + } + } else { + console.log("No old session found"); + localStorage.removeItem("token"); + } + await dispatch(set_checked()); + }, [dispatch, logged_in]); + useEffect(() => { + if (!logged_in) { + check(); + } + }, [check, logged_in]); + return
; +} diff --git a/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx b/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx index 5802c33..a1d52d1 100644 --- a/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx +++ b/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx @@ -6,16 +6,13 @@ export const LoginSlice = createSlice({ value: false, }, reducers: { - SetLoggedIn: (state) => { - state.value = !state.value; - }, - SetLoggedOut: (state) => { + Toggle_Login: (state) => { state.value = !state.value; }, }, }); // Action creators are generated for each case reducer function -export const { SetLoggedIn, SetLoggedOut } = LoginSlice.actions; +export const { Toggle_Login } = LoginSlice.actions; export default LoginSlice.reducer; diff --git a/src/Features/Redux/Slices/OldSession/OldSessionSlice.tsx b/src/Features/Redux/Slices/OldSession/OldSessionSlice.tsx new file mode 100644 index 0000000..04e37e3 --- /dev/null +++ b/src/Features/Redux/Slices/OldSession/OldSessionSlice.tsx @@ -0,0 +1,17 @@ +import { createSlice } from "@reduxjs/toolkit"; + +export const OldSessionSlice = createSlice({ + name: "old_session_checked", + initialState: { + value: false, + }, + reducers: { + set_checked: (state) => { + state.value = !state.value; + }, + }, +}); + +export const { set_checked } = OldSessionSlice.actions; + +export default OldSessionSlice.reducer; diff --git a/src/Features/Redux/Store/Store.tsx b/src/Features/Redux/Store/Store.tsx index d1eabd2..e9f2f2c 100644 --- a/src/Features/Redux/Store/Store.tsx +++ b/src/Features/Redux/Store/Store.tsx @@ -1,11 +1,13 @@ import { configureStore } from "@reduxjs/toolkit"; import LoginReducer from "../Slices/LoginSlice/LoginSlice"; import LoggedInUserReucer from "../Slices/LoggedInUserSlice/LoggedInUserSlice"; +import OldSessionReducer from "../Slices/OldSession/OldSessionSlice"; const store = configureStore({ reducer: { logged_in: LoginReducer, logged_in_user: LoggedInUserReucer, + old_session_checked: OldSessionReducer, }, }); @@ -13,4 +15,4 @@ export default store; // Infer the `RootState` and `AppDispatch` types from the store itself export type RootState = ReturnType; -export type AppDispatch = typeof store.dispatch; \ No newline at end of file +export type AppDispatch = typeof store.dispatch; diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx index 371e094..267fe16 100644 --- a/src/Routes/Login/Login.tsx +++ b/src/Routes/Login/Login.tsx @@ -9,7 +9,7 @@ import { UserInfo, UserLogin } from "../../Components/Api/Api"; import { useDispatch } from "react-redux"; import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice"; -import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice"; +import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice"; export default function Login() { const navigate = useNavigate(); @@ -56,7 +56,7 @@ export default function Login() { password: "", }); if (await UserLogin(user)) { - await dispatch(SetLoggedIn()); + await dispatch(Toggle_Login()); await dispatch(SetUser(await UserInfo())); navigate("/"); } else {