fix pagination for other periods

Automattic · Dec 10, 2024 · b211b9a · b211b9a
1 parent 9f2350a
commit b211b9a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/client/my-sites/stats/stats-period-navigation/index.jsx b/client/my-sites/stats/stats-period-navigation/index.jsx
@@ -112,7 +112,12 @@ class StatsPeriodNavigation extends PureComponent {
 		const previousDayQuery = qs.stringify( Object.assign( {}, queryParams, newQueryParams ), {
 			addQueryPrefix: true,
 		} );
-		const href = `${ url }${ previousDayQuery }`;
+
+		let href = null;
+		if ( url ) {
+			href = `${ url }${ previousDayQuery }`;
+		}
+
 		this.handleArrowEvent( 'previous', href );
 	};
 
@@ -125,7 +130,12 @@ class StatsPeriodNavigation extends PureComponent {
 		const nextDayQuery = qs.stringify( Object.assign( {}, queryParams, newQueryParams ), {
 			addQueryPrefix: true,
 		} );
-		const href = `${ url }${ nextDayQuery }`;
+
+		let href = null;
+		if ( url ) {
+			href = `${ url }${ nextDayQuery }`;
+		}
+
 		this.handleArrowEvent( 'next', href );
 	};
 

diff --git a/client/my-sites/stats/stats-post-detail/index.jsx b/client/my-sites/stats/stats-post-detail/index.jsx
@@ -213,7 +213,6 @@ class StatsPostDetail extends Component {
 								siteId={ siteId }
 								postId={ postId }
 								supportsUTMStats={ supportsUTMStats }
-								siteSlug={ siteSlug }
 							/>
 							<PostDetailTableSection siteId={ siteId } postId={ postId } />
 						</>

diff --git a/client/my-sites/stats/stats-post-summary/index.jsx b/client/my-sites/stats/stats-post-summary/index.jsx
@@ -35,7 +35,6 @@ class StatsPostSummary extends Component {
 		siteId: PropTypes.number,
 		translate: PropTypes.func,
 		supportsUTMStats: PropTypes.bool,
-		siteSlug: PropTypes.string,
 	};
 
 	static MAX_RECORDS_PER_DAY = 10;
@@ -69,9 +68,7 @@ class StatsPostSummary extends Component {
 			selectedRecord = chartData[ chartData.length - 1 ];
 		}
 
-		const recordIndex = chartData.findIndex(
-			( item ) => item.startDate === selectedRecord.startDate
-		);
+		const recordIndex = chartData.findIndex( ( item ) => item.period === selectedRecord.period );
 
 		if ( 'previous' === direction ) {
 			if ( recordIndex > 0 ) {
@@ -221,7 +218,7 @@ class StatsPostSummary extends Component {
 	}
 
 	render() {
-		const { isRequesting, postId, siteId, translate, siteSlug, stats } = this.props;
+		const { isRequesting, postId, siteId, translate, stats } = this.props;
 		const periods = [
 			{ id: 'day', label: translate( 'Days' ) },
 			{ id: 'week', label: translate( 'Weeks' ) },
@@ -234,13 +231,18 @@ class StatsPostSummary extends Component {
 			selectedRecord = chartData[ chartData.length - 1 ];
 		}
 
-		const maxPages = Math.ceil( stats.data.length / StatsPostSummary.MAX_RECORDS_PER_DAY );
 		let disablePreviousArrow = false;
-		if ( this.state.page >= maxPages ) {
-			const selectedRecordIndex = chartData.findIndex(
-				( item ) => item.startDate === selectedRecord.startDate
-			);
+		let disableNextArrow = false;
+		const selectedRecordIndex = chartData.findIndex(
+			( item ) => item.period === selectedRecord.period
+		);
+		if ( 'day' === this.state.period ) {
+			const maxPages = Math.ceil( stats.data.length / StatsPostSummary.MAX_RECORDS_PER_DAY );
+			disablePreviousArrow = this.state.page >= maxPages && selectedRecordIndex === 0;
+			disableNextArrow = 1 === this.state.page && selectedRecordIndex === chartData.length - 1;
+		} else {
 			disablePreviousArrow = selectedRecordIndex === 0;
+			disableNextArrow = selectedRecordIndex === chartData.length - 1;
 		}
 
 		const summaryWrapperClass = clsx( 'stats-post-summary', 'is-chart-tabs', {
@@ -256,10 +258,10 @@ class StatsPostSummary extends Component {
 						<StatsPeriodNavigation
 							showArrows
 							onPeriodChange={ this.onPeriodChange }
-							url={ `/stats/post/${ postId }/${ siteSlug }` }
-							date={ selectedRecord?.startDate }
-							period={ this.state.period }
 							disablePreviousArrow={ disablePreviousArrow }
+							disableNextArrow={ disableNextArrow }
+							date={ null }
+							period={ this.state.period }
 						>
 							<DatePicker period={ this.state.period } date={ selectedRecord?.startDate } isShort />
 						</StatsPeriodNavigation>