Reader Recent: Pad out pagination to allow page select to work

client/reader/recent/index.tsx

@@ -134,6 +134,8 @@ const Recent = ( { viewToggle }: RecentProps ) => {
 		};
 	}, [ data?.pagination ] );
 
+	console.log( 'data', data );
+
 	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( data?.items ?? [], view, fields );
 	}, [ data?.items, view, fields ] );

client/state/data-layer/wpcom/read/streams/index.js

@@ -421,7 +421,7 @@ function get_page_handle( streamType, action, data ) {
 
 export function handlePage( action, data ) {
 	const { posts, sites, cards } = data;
-	const { streamKey, query, isPoll, gap, streamType } = action.payload;
+	const { streamKey, query, isPoll, gap, streamType, page, perPage } = action.payload;
 	const pageHandle = get_page_handle( streamType, action, data );
 	const { dateProperty } = streamApis[ streamType ];
 
@@ -496,6 +496,8 @@ export function handlePage( action, data ) {
 				gap,
 				totalItems,
 				totalPages,
+				page,
+				perPage,
 			} )
 		);
 	}

client/state/reader/streams/actions.js

@@ -47,7 +47,16 @@ export function requestPage( {
 	};
 }
 
-export function receivePage( { streamKey, pageHandle, streamItems, gap, totalItems, totalPages } ) {
+export function receivePage( {
+	streamKey,
+	pageHandle,
+	streamItems,
+	gap,
+	totalItems,
+	totalPages,
+	perPage,
+	page,
+} ) {
 	return {
 		type: READER_STREAMS_PAGE_RECEIVE,
 		payload: {
@@ -57,6 +66,8 @@ export function receivePage( { streamKey, pageHandle, streamItems, gap, totalIte
 			gap,
 			totalItems,
 			totalPages,
+			perPage,
+			page,
 		},
 	};
 }

client/state/reader/streams/reducer.js

@@ -39,13 +39,33 @@ export const items = ( state = [], action ) => {
 
 	switch ( action.type ) {
 		case READER_STREAMS_PAGE_RECEIVE:
-			gap = action.payload.gap;
-			streamItems = action.payload.streamItems;
+			const { streamItems, gap, page, perPage, totalItems } = action.payload;
 
 			if ( ! Array.isArray( streamItems ) ) {
 				return state;
 			}
 
+			console.log( perPage, page, totalItems );
+
+			if ( perPage && page > 1 ) {
+				// Calculate placeholders for the entire dataset
+				const totalPages = Math.ceil( totalItems / perPage );
+				const placeholders = Array( totalItems ).fill( 'placeholder' );
+
+				// Insert the new streamItems into the correct position
+				const startIndex = ( page - 1 ) * perPage;
+				const endIndex = startIndex + streamItems.length;
+
+				const mergedItems = placeholders.map( ( item, index ) => {
+					if ( index >= startIndex && index < endIndex ) {
+						return streamItems[ index - startIndex ] || item;
+					}
+					return state[ index ] || item;
+				} );
+
+				return combineXPosts( mergedItems );
+			}
+
 			if ( gap ) {
 				const beforeGap = takeWhile( state, ( postKey ) => ! keysAreEqual( postKey, gap ) );
 				const afterGap = takeRightWhile( state, ( postKey ) => ! keysAreEqual( postKey, gap ) );