Campaigns pagination UI logic.

plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx

@@ -22,9 +22,11 @@ import { CardHeaderTitle, CenteredSpinner } from '~/marketing/components';
 import { useCampaigns } from './useCampaigns';
 import './Campaigns.scss';
 
+const perPage = 5;
+
 export const Campaigns = () => {
 	const [ page, setPage ] = useState( 1 );
-	const { loading, data } = useCampaigns();
+	const { loading, data, meta } = useCampaigns( page, perPage );
 
 	const getContent = () => {
 		if ( loading ) {
@@ -80,10 +82,7 @@ export const Campaigns = () => {
 			);
 		}
 
-		const perPage = 5;
-		const total = data.length;
-		const start = ( page - 1 ) * perPage;
-		const pagedData = data.slice( start, start + perPage );
+		const total = meta?.total as number;
 
 		return (
 			<>
@@ -100,7 +99,7 @@ export const Campaigns = () => {
 							isNumeric: true,
 						},
 					] }
-					rows={ pagedData.map( ( el ) => {
+					rows={ data.map( ( el ) => {
 						return [
 							{
 								display: (

plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts

@@ -19,36 +19,61 @@ type UseCampaignsType = {
 	loading: boolean;
 	data?: Array< Campaign >;
 	error?: ApiFetchError;
+	meta?: {
+		total?: number;
+	};
 };
 
-export const useCampaigns = (): UseCampaignsType => {
-	const { data } = useRegisteredChannels();
+export const useCampaigns = (
+	page: number,
+	perPage: number
+): UseCampaignsType => {
+	const { data: channels } = useRegisteredChannels();
 
-	return useSelect( ( select ) => {
-		const { hasFinishedResolution, getCampaigns } = select( STORE_KEY );
-		const campaignsState = getCampaigns< CampaignsState >();
-
-		const convert = ( campaign: APICampaign ): Campaign => {
-			const channel = data?.find(
-				( el ) => el.slug === campaign.channel
+	return useSelect(
+		( select ) => {
+			const { hasFinishedResolution, getCampaigns } = select( STORE_KEY );
+			const campaignsState = getCampaigns< CampaignsState >(
+				page,
+				perPage
 			);
 
-			return {
-				id: `${ campaign.channel }|${ campaign.id }`,
-				title: campaign.title,
-				description: '',
-				cost: `${ campaign.cost.currency } ${ campaign.cost.value }`,
-				manageUrl: campaign.manage_url,
-				icon: channel?.icon || '',
-				channelName: channel?.title || '',
-				channelSlug: campaign.channel,
-			};
-		};
+			const convert = ( campaign: APICampaign ): Campaign => {
+				const channel = channels?.find(
+					( el ) => el.slug === campaign.channel
+				);
 
-		return {
-			loading: ! hasFinishedResolution( 'getCampaigns' ),
-			data: campaignsState.data?.map( convert ),
-			error: campaignsState.error,
-		};
-	} );
+				return {
+					id: `${ campaign.channel }|${ campaign.id }`,
+					title: campaign.title,
+					description: '',
+					cost: `${ campaign.cost.currency } ${ campaign.cost.value }`,
+					manageUrl: campaign.manage_url,
+					icon: channel?.icon || '',
+					channelName: channel?.title || '',
+					channelSlug: campaign.channel,
+				};
+			};
+
+			const error =
+				campaignsState.pages && campaignsState.pages[ page ]?.error;
+
+			const data =
+				campaignsState.pages &&
+				campaignsState.pages[ page ]?.data?.map( convert );
+
+			return {
+				loading: ! hasFinishedResolution( 'getCampaigns', [
+					page,
+					perPage,
+				] ),
+				data,
+				error,
+				meta: {
+					total: campaignsState.total,
+				},
+			};
+		},
+		[ page, perPage ]
+	);
 };