Fixing logout

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) {
+  if (!isLoggedIn) {
-  //   return null;
+    return null;
-  // }
+  }
 
   return (
     <>

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
+  // Create a store instance for this client-side session
-  const dispatch = store.dispatch;
+  const storeRef = useRef<ReturnType<typeof makeStore>>(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());
+    if (storeRef.current) {
-  }, [dispatch]); // Dependency array ensures it runs only once on mount
+      storeRef.current.dispatch(initializeAuth() as any);
+    }
+  }, []);
 
-  return <Provider store={store}>{children}</Provider>;
+  return <Provider store={storeRef.current}>{children}</Provider>;
 }

app/redux/advanedSearch/advancedSearchSlice.ts

@@ -1,25 +1,25 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice } from "@reduxjs/toolkit";
 
 interface AdvancedSearchState {
-  keyword: string,
+  keyword: string;
-  transactionID: string,
+  transactionID: string;
-  transactionReferenceId: string,
+  transactionReferenceId: string;
-  user: string,
+  user: string;
-  currency: string,
+  currency: string;
-  state: string,
+  state: string;
-  statusDescription: string,
+  statusDescription: string;
-  transactionType: string,
+  transactionType: string;
-  paymentMethod: string,
+  paymentMethod: string;
-  psps: string,
+  psps: string;
-  initialPsps: string,
+  initialPsps: string;
-  merchants: string,
+  merchants: string;
-  startDate: null | string,
+  startDate: null | string;
-  endDate: null | string,
+  endDate: null | string;
-  lastUpdatedFrom: null | string,
+  lastUpdatedFrom: null | string;
-  lastUpdatedTo: null | string,
+  lastUpdatedTo: null | string;
-  minAmount: string,
+  minAmount: string;
-  maxAmount: string,
+  maxAmount: string;
-  channel: 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;
-

app/redux/auth/selectors.ts

@@ -1,8 +1,6 @@
 import { RootState } from "../types";
 
-export const selectIsLoggedIn = (state: RootState) =>
+export const selectIsLoggedIn = (state: RootState) => state.auth.isLoggedIn;
-  state.authSlice.isLoggedIn;
+export const selectStatus = (state: RootState) => state.auth?.status;
-export const selectStatus = (state: RootState) => state.authSlice?.status;
+export const selectError = (state: RootState) => state.auth?.error;
-export const selectError = (state: RootState) => state.authSlice?.error;
+export const selectAuthMessage = (state: RootState) => state.auth?.authMessage;
-export const selectAuthMessage = (state: RootState) =>
-  state.authSlice?.authMessage;

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({
+export const makeStore = () => {
-  reducer: {
+  return configureStore({
-    advancedSearch: advancedSearchReducer,
+    reducer: {
-    authSlice: authReducer,
+      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<typeof makeStore>;
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<AppStore["getState"]>;
+export type AppDispatch = AppStore["dispatch"];