Fixing logout

payment-iq/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<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());
-  }, [dispatch]); // Dependency array ensures it runs only once on mount
-
-  return <Provider store={store}>{children}</Provider>;
+    if (storeRef.current) {
+      storeRef.current.dispatch(initializeAuth() as any);
+    }
+  }, []);
+
+  return <Provider store={storeRef.current}>{children}</Provider>;
 }

payment-iq/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;
-

payment-iq/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;

payment-iq/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 = () => {
+  return configureStore({
     reducer: {
       advancedSearch: advancedSearchReducer,
-    authSlice: authReducer,
+      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"];