Boost: Remove global state from Pagination component (#33110)

* Remove global state from Pagination component * add changelog * Update next/previous pagination buttons behavior * Update next/previous buttons to use a separate component * Make it easier to change the contents of PaginationArrow
Automattic · Sep 20, 2023 · 7c99e8c · 7c99e8c
1 parent 8a5da7a
commit 7c99e8c
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 26 deletions.
diff --git a/...ts/plugins/boost/app/assets/src/js/modules/image-size-analysis/RecommendationsPage.svelte b/...ts/plugins/boost/app/assets/src/js/modules/image-size-analysis/RecommendationsPage.svelte
@@ -46,7 +46,11 @@
 		</div>
 
 		<div class="jb-container">
-			<Pagination />
+			<Pagination
+				group={$isaData.query.group}
+				current={$isaData.query.page}
+				total={$isaData.data.total_pages}
+			/>
 			<Footer />
 		</div>
 	</div>

diff --git a/...ins/boost/app/assets/src/js/modules/image-size-analysis/recommendations/Pagination.svelte b/...ins/boost/app/assets/src/js/modules/image-size-analysis/recommendations/Pagination.svelte
@@ -2,7 +2,12 @@
 	import ChevronLeft from '../../../svg/chevron-left.svg';
 	import ChevronRight from '../../../svg/chevron-right.svg';
 	import { Link } from '../../../utils/router';
-	import { isaData } from '../store/isa-data';
+	import PaginationArrow from './components/PaginationArrow.svelte';
+
+	export let group: string;
+	export let current: number;
+	export let total: number;
+
 	// "-1" is replaced by "..." when rendering the pagination
 	const MORE_ICON = -1;
 
@@ -41,28 +46,14 @@
 		return pagination;
 	}
 
-	function nextPage() {
-		if ( current < total ) {
-			$isaData.query.page += 1;
-		}
-	}
-
-	function previousPage() {
-		if ( current > 1 ) {
-			$isaData.query.page -= 1;
-		}
-	}
-
-	$: current = $isaData.query.page;
-	$: total = $isaData.data.total_pages;
 	$: pages = generatePagination( current, total );
 </script>
 
 <div class="jb-pagination">
 	{#if total > 1}
-		<button class="jb-chevron" class:inactive={current === 1} on:click={previousPage}>
+		<PaginationArrow direction="left" {group} {current} {total}>
 			<ChevronLeft />
-		</button>
+		</PaginationArrow>
 
 		<ul>
 			{#each pages as page}
@@ -71,7 +62,7 @@
 						<span class="jb-pagination__page jb-pagination__more"> ... </span>
 					{:else}
 						<Link
-							to="/image-size-analysis/{$isaData.query.group}/{page}"
+							to="/image-size-analysis/{group}/{page}"
 							class="jb-pagination__page{page === current ? ' jb-pagination__current' : ''}"
 						>
 							{page}
@@ -81,13 +72,9 @@
 			{/each}
 		</ul>
 
-		<button
-			class="jb-chevron"
-			class:jb-pagination__inactive={current === total}
-			on:click={nextPage}
-		>
+		<PaginationArrow direction="right" {group} {current} {total}>
 			<ChevronRight />
-		</button>
+		</PaginationArrow>
 	{/if}
 </div>
 
@@ -106,7 +93,6 @@
 		margin: 0;
 	}
 
-	button,
 	.jb-pagination__page,
 	.jb-pagination :global( a ) {
 		background-color: transparent;

diff --git a/...sets/src/js/modules/image-size-analysis/recommendations/components/PaginationArrow.svelte b/...sets/src/js/modules/image-size-analysis/recommendations/components/PaginationArrow.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Link } from '../../../../utils/router';
+
+	export let group: string;
+	export let direction: 'left' | 'right';
+	export let current: number;
+	export let total: number;
+
+	$: inactive = direction === 'left' ? current === 1 : current === total;
+	$: page = direction === 'left' ? current - 1 : current + 1;
+</script>
+
+{#if inactive}
+	<span class="jb-pagination__page jb-pagination__inactive">
+		<slot />
+	</span>
+{:else}
+	<Link to="/image-size-analysis/{group}/{page}" class="jb-pagination__page">
+		<slot />
+	</Link>
+{/if}
+
+<style lang="scss">
+	.jb-pagination__page {
+		background-color: transparent;
+		border: 0;
+		cursor: pointer;
+		padding: 7px 12px;
+		aspect-ratio: 1;
+		line-height: 1;
+		font-size: 13px;
+		font-weight: 600;
+		text-decoration: none;
+
+		&.jb-pagination__inactive {
+			opacity: 0.25;
+			cursor: not-allowed;
+		}
+	}
+</style>
diff --git a/projects/plugins/boost/changelog/remove-state-pagination-component b/projects/plugins/boost/changelog/remove-state-pagination-component
@@ -0,0 +1,5 @@
+Significance: patch
+Type: removed
+Comment: Removed global state from pagination component.
+
+