chore: put page in redux store (#541)

* chore: put page in redux store * chore: put page in redux store
jy95 · Aug 25, 2024 · f2c41bf · f2c41bf
1 parent 66ebb9a
commit f2c41bf
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/src/app/[locale]/games/_client/GamesGalleryGrid.tsx b/src/app/[locale]/games/_client/GamesGalleryGrid.tsx
@@ -1,7 +1,7 @@
 // Hooks
-import { useState } from 'react';
 import { useGetGamesQuery } from "@/redux/services/gamesAPI";
-import { useAppSelector } from "@/redux/hooks";
+import { useAppSelector, useAppDispatch } from "@/redux/hooks";
+import { nextPage } from "@/redux/features/gamesSlice";
 import { useTranslations } from 'next-intl';
 
 // Style
@@ -28,9 +28,10 @@ function GamesGalleryGridInner() {
 
     // Active filters
     const activeFilters = useAppSelector((state) => state.games.activeFilters);
-
-    const [page, setPage] = useState(1);
+    // Current page
+    const page = useAppSelector((state) => state.games.page);
     const t = useTranslations('common');
+    const dispatch = useAppDispatch();
 
     const LIMIT_PAGE = 16;
 
@@ -40,9 +41,6 @@ function GamesGalleryGridInner() {
             filters: activeFilters,
             pageSize : LIMIT_PAGE,
             page: page
-        },
-        {
-            refetchOnMountOrArgChange: true
         }
     );
     const allGames = data?.items ?? [];
@@ -76,7 +74,7 @@ function GamesGalleryGridInner() {
                 <LoadingButton
                     loading={isFetching}
                     disabled={ page >= (data?.total_pages || 1) }
-                    onClick={() => setPage((prev) => prev + 1)}
+                    onClick={() => dispatch(nextPage())}
                 >
                     <span>{t('loadMore')}</span>
                 </LoadingButton>

diff --git a/src/redux/features/gamesSlice.tsx b/src/redux/features/gamesSlice.tsx
@@ -19,11 +19,14 @@ export type gamesFilters = ({
 
 export interface GamesState {
     /** @description  current filters applied */
-    activeFilters: gamesFilters
+    activeFilters: gamesFilters,
+    /** @description current page loaded */
+    page: number
 }
 
 const initialState: GamesState = {
-    activeFilters: []
+    activeFilters: [],
+    page: 1
 };
 
 const gamesSlice = createSlice({
@@ -42,6 +45,7 @@ const gamesSlice = createSlice({
                 });
             }
             state.activeFilters = newFilters;
+            state.page = 1;
         },
         filterByTitle(state : GamesState, action: PayloadAction<string>) {
             // If empty, remove filter - if not, add it
@@ -53,6 +57,7 @@ const gamesSlice = createSlice({
                 });
             }
             state.activeFilters = newFilters;
+            state.page = 1;
         },
         filterByPlatform(state : GamesState, action: PayloadAction<number | undefined>) {
             // If empty, remove filter - if not, add it
@@ -64,6 +69,10 @@ const gamesSlice = createSlice({
                 });
             }
             state.activeFilters = newFilters;
+            state.page = 1;
+        },
+        nextPage(state: GamesState) {
+            state.page = state.page + 1;
         }
     }
 });
@@ -117,5 +126,5 @@ export const selectSelectedTitle = createSelector(
 )
 
 // Action creators are generated for each case reducer function
-export const { filteringByGenre, filterByTitle, filterByPlatform } = gamesSlice.actions;
+export const { filteringByGenre, filterByTitle, filterByPlatform, nextPage } = gamesSlice.actions;
 export default gamesSlice.reducer;
diff --git a/src/redux/services/gamesAPI.tsx b/src/redux/services/gamesAPI.tsx
@@ -62,7 +62,7 @@ export const gamesAPI = createApi({
                 return `/games?${stringifyObject(parameters)}`;
             },
             forceRefetch: ({ currentArg, previousArg }) => {
-                return currentArg !== previousArg;
+                return JSON.stringify(currentArg) !== JSON.stringify(previousArg);
             },
             // Custom key for cache
             serializeQueryArgs: ({ endpointName }) => endpointName,
@@ -72,17 +72,17 @@ export const gamesAPI = createApi({
                 let currentParams = { filters: currentCache.filters, pageSize: currentCache.pageSize };
                 let newParams = { filters: newItems.filters, pageSize: newItems.pageSize };
                 let notSameParams = JSON.stringify(currentParams) !== JSON.stringify(newParams);
-                let samePageAsked = currentCache.page === newItems.page;
 
-                // If not same parameters (or same page), it means we have to replace by newest answer
-                if (notSameParams || samePageAsked) {
+                // If not same parameters, it means we have to replace by newest answer
+                if (notSameParams) {
                     return newItems;
                 }
 
                 // If same parameters, it means we have to merge them
                 return {
                     ...currentCache,
                     items: [...currentCache.items, ...newItems.items],
+                    page: newItems.page
                 };
             },
         })