From eb1d24e807eadae9a6971b43b7a491776b4785d3 Mon Sep 17 00:00:00 2001 From: Mitchell Magro Date: Fri, 25 Jul 2025 19:52:11 +0200 Subject: [PATCH] Fixing logout --- .../header/accountMenu/AccountMenu.tsx | 12 +++-- app/redux/ReduxProvider.tsx | 16 +++--- .../advanedSearch/advancedSearchSlice.ts | 49 +++++++++---------- app/redux/auth/selectors.ts | 10 ++-- app/redux/store.ts | 25 +++++++--- 5 files changed, 62 insertions(+), 50 deletions(-) diff --git a/app/features/dashboard/header/accountMenu/AccountMenu.tsx b/app/features/dashboard/header/accountMenu/AccountMenu.tsx index 8406130..63f0954 100644 --- a/app/features/dashboard/header/accountMenu/AccountMenu.tsx +++ b/app/features/dashboard/header/accountMenu/AccountMenu.tsx @@ -14,7 +14,7 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle"; import SettingsIcon from "@mui/icons-material/Settings"; import LogoutIcon from "@mui/icons-material/Logout"; import { useDispatch, useSelector } from "react-redux"; -import { selectStatus } from "@/app/redux/auth/selectors"; +import { selectIsLoggedIn, selectStatus } from "@/app/redux/auth/selectors"; import { logout } from "@/app/redux/auth/authSlice"; import { AppDispatch } from "@/app/redux/types"; import { useRouter } from "next/navigation"; @@ -35,7 +35,7 @@ export default function AccountMenu() { const router = useRouter(); // Select relevant state from your auth slice - // const isLoggedIn = useSelector(selectIsLoggedIn); + const isLoggedIn = useSelector(selectIsLoggedIn); const authStatus = useSelector(selectStatus); // Determine if we're currently in the process of logging out @@ -56,10 +56,12 @@ export default function AccountMenu() { } }; + console.log("[isLoggedin]", isLoggedIn); + // Only show the logout button if the user is logged in - // if (!isLoggedIn) { - // return null; - // } + if (!isLoggedIn) { + return null; + } return ( <> diff --git a/app/redux/ReduxProvider.tsx b/app/redux/ReduxProvider.tsx index f6dd9c9..4eb6a55 100644 --- a/app/redux/ReduxProvider.tsx +++ b/app/redux/ReduxProvider.tsx @@ -1,9 +1,9 @@ // app/redux/ReduxProvider.tsx "use client"; -import React, { useEffect } from "react"; // Import useEffect +import React, { useEffect, useRef } from "react"; import { Provider } from "react-redux"; -import { store } from "./store"; +import { makeStore } from "./store"; import { initializeAuth } from "./auth/authSlice"; export default function ReduxProvider({ @@ -11,14 +11,16 @@ export default function ReduxProvider({ }: { children: React.ReactNode; }) { - // Get the dispatch function directly from the store for initial dispatch - const dispatch = store.dispatch; + // Create a store instance for this client-side session + const storeRef = useRef>(makeStore()); useEffect(() => { // Dispatch initializeAuth when the ReduxProvider component mounts on the client. // This ensures your Redux isLoggedIn state is synced with localStorage after a page refresh. - dispatch(initializeAuth()); - }, [dispatch]); // Dependency array ensures it runs only once on mount + if (storeRef.current) { + storeRef.current.dispatch(initializeAuth() as any); + } + }, []); - return {children}; + return {children}; } diff --git a/app/redux/advanedSearch/advancedSearchSlice.ts b/app/redux/advanedSearch/advancedSearchSlice.ts index 43b055c..b3f5dfc 100644 --- a/app/redux/advanedSearch/advancedSearchSlice.ts +++ b/app/redux/advanedSearch/advancedSearchSlice.ts @@ -1,25 +1,25 @@ -import { createSlice } from '@reduxjs/toolkit'; +import { createSlice } from "@reduxjs/toolkit"; interface AdvancedSearchState { - keyword: string, - transactionID: string, - transactionReferenceId: string, - user: string, - currency: string, - state: string, - statusDescription: string, - transactionType: string, - paymentMethod: string, - psps: string, - initialPsps: string, - merchants: string, - startDate: null | string, - endDate: null | string, - lastUpdatedFrom: null | string, - lastUpdatedTo: null | string, - minAmount: string, - maxAmount: string, - channel: string, + keyword: string; + transactionID: string; + transactionReferenceId: string; + user: string; + currency: string; + state: string; + statusDescription: string; + transactionType: string; + paymentMethod: string; + psps: string; + initialPsps: string; + merchants: string; + startDate: null | string; + endDate: null | string; + lastUpdatedFrom: null | string; + lastUpdatedTo: null | string; + minAmount: string; + maxAmount: string; + channel: string; } const initialState: AdvancedSearchState = { @@ -45,12 +45,9 @@ const initialState: AdvancedSearchState = { }; const advancedSearchSlice = createSlice({ - name: 'advancedSearch', + name: "advancedSearch", initialState, - reducers: { - }, -}, -); + reducers: {}, +}); export default advancedSearchSlice.reducer; - diff --git a/app/redux/auth/selectors.ts b/app/redux/auth/selectors.ts index a5bb736..c74bf40 100644 --- a/app/redux/auth/selectors.ts +++ b/app/redux/auth/selectors.ts @@ -1,8 +1,6 @@ import { RootState } from "../types"; -export const selectIsLoggedIn = (state: RootState) => - state.authSlice.isLoggedIn; -export const selectStatus = (state: RootState) => state.authSlice?.status; -export const selectError = (state: RootState) => state.authSlice?.error; -export const selectAuthMessage = (state: RootState) => - state.authSlice?.authMessage; +export const selectIsLoggedIn = (state: RootState) => state.auth.isLoggedIn; +export const selectStatus = (state: RootState) => state.auth?.status; +export const selectError = (state: RootState) => state.auth?.error; +export const selectAuthMessage = (state: RootState) => state.auth?.authMessage; diff --git a/app/redux/store.ts b/app/redux/store.ts index 8906f07..095a10d 100644 --- a/app/redux/store.ts +++ b/app/redux/store.ts @@ -2,9 +2,22 @@ import { configureStore } from "@reduxjs/toolkit"; import advancedSearchReducer from "./advanedSearch/advancedSearchSlice"; import authReducer from "./auth/authSlice"; -export const store = configureStore({ - reducer: { - advancedSearch: advancedSearchReducer, - authSlice: authReducer, - }, -}); +export const makeStore = () => { + return configureStore({ + reducer: { + advancedSearch: advancedSearchReducer, + auth: authReducer, + }, + // Enable Redux DevTools + devTools: process.env.NODE_ENV !== "production", + }); +}; + +// Create the store instance +export const store = makeStore(); + +// Infer the type of makeStore +export type AppStore = ReturnType; +// Infer the `RootState` and `AppDispatch` types from the store itself +export type RootState = ReturnType; +export type AppDispatch = AppStore["dispatch"];