Update pageToken to have opaque semantics in common/reducer.js

GoogleForCreators · Jul 1, 2020 · 190d037 · 190d037
1 parent f06f691
commit 190d037
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/assets/src/edit-story/app/media/actions.js b/assets/src/edit-story/app/media/actions.js
@@ -27,12 +27,12 @@ export const fetchMediaSuccess = (dispatch) => ({
   media,
   mediaType,
   searchTerm,
-  pageToken,
+  nextPageToken,
   totalPages,
 }) => {
   dispatch({
     type: types.FETCH_MEDIA_SUCCESS,
-    payload: { media, mediaType, searchTerm, pageToken, totalPages },
+    payload: { media, mediaType, searchTerm, nextPageToken, totalPages },
   });
 };
 

diff --git a/assets/src/edit-story/app/media/common/reducer.js b/assets/src/edit-story/app/media/common/reducer.js
@@ -21,7 +21,12 @@ import * as types from '../types';
 
 export const INITIAL_STATE = {
   media: [],
-  pageToken: 1,
+  // The page token of the last loaded page, or undefined if at the first page
+  // or no pages have been loaded.
+  pageToken: undefined,
+  // The page token of the next page, or undefined if at the last page or no
+  // pages have been loaded.
+  nextPageToken: undefined,
   hasMore: true,
   totalPages: 1,
   isMediaLoading: false,
@@ -42,14 +47,13 @@ function reducer(state = INITIAL_STATE, { type, payload }) {
     }
 
     case types.FETCH_MEDIA_SUCCESS: {
-      const { media, pageToken, totalPages } = payload;
-      const hasMore = pageToken < totalPages;
+      const { media, nextPageToken, totalPages } = payload;
       return {
         ...state,
         media: [...state.media, ...media],
-        pageToken,
+        nextPageToken,
         totalPages,
-        hasMore,
+        hasMore: Boolean(nextPageToken),
         isMediaLoaded: true,
         isMediaLoading: false,
       };
@@ -64,9 +68,14 @@ function reducer(state = INITIAL_STATE, { type, payload }) {
     }
 
     case types.SET_NEXT_PAGE: {
+      if (!state.nextPageToken) {
+        return state;
+      }
       return {
         ...state,
-        pageToken: state.pageToken + 1,
+        // Updating pageToken state will trigger the media fetch useEffect()
+        // side effect to load the next page.
+        pageToken: state.nextPageToken,
       };
     }
 

diff --git a/assets/src/edit-story/app/media/local/useContextValueProvider.js b/assets/src/edit-story/app/media/local/useContextValueProvider.js
@@ -72,11 +72,13 @@ export default function useContextValueProvider(reducerState, reducerActions) {
         .then(({ data, headers }) => {
           const totalPages = parseInt(headers.get('X-WP-TotalPages'));
           const mediaArray = data.map(getResourceFromAttachment);
+          const hasMore = p < totalPages;
           callback({
             media: mediaArray,
             mediaType: currentMediaType,
             searchTerm: currentSearchTerm,
             pageToken: p,
+            nextPageToken: hasMore ? p + 1 : undefined,
             totalPages,
           });
         })
@@ -106,7 +108,8 @@ export default function useContextValueProvider(reducerState, reducerActions) {
     const { mediaType, pageToken, searchTerm } = stateRef.current;
 
     resetFilters();
-    if (!mediaType && !searchTerm && pageToken === 1) {
+    const isFirstPage = !pageToken;
+    if (!mediaType && !searchTerm && isFirstPage) {
       fetchMedia({ mediaType }, fetchMediaSuccess);
     }
   }, [fetchMedia, fetchMediaSuccess, resetFilters]);