Refactor/pagination handlers

[RaduCristianPopescu]

Summary

Remove the Load More button, now there is pagination.

NOTE

The actual postPerPage value is set to 10 for pro users, this was only for demo

Will affect visual aspect of the product

YES

Screenshots

Recording.mp4

Closes https://github.com/Codeinwp/hyve/issues/81

[Copilot]

Pull Request Overview

This PR refactors the Messages component to replace the "Load More" button with a proper pagination system, improving user experience by allowing navigation between pages of messages.

• Replaced load more functionality with page-based navigation
• Added caching mechanism for fetched pages
• Updated backend API response to include total count and posts per page
• Added comprehensive pagination controls with Previous/Next buttons and page indicators

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 7 comments.

File	Description
src/backend/parts/Messages.js	Replaced LoadMore component with SimplePagination, refactored state management to use page-based caching, and updated UI layout
inc/API.php	Modified API response to return total posts count and posts per page instead of boolean "more" flag

[Copilot]

The startIndex and endIndex calculation is confusing and may display incorrect ranges. For pagination, it's more intuitive to show the actual item numbers being displayed (e.g., '11-20 of 100') rather than calculating from totalPosts backwards.

Suggested change

	const startIndex = totalPosts - ( currentPage - 1 ) * postsPerPage;
	const endIndex = Math.max( startIndex - actualPostsOnPage + 1, 1 );
	return (
	<div className="col-span-6 xl:col-span-2 border-r-gray-300 border-r-[0.5px] border-solid max-h-[672px] overflow-scroll">
	<div className="flex items-center justify-between py-4 px-2">
	<div className="flex items-center gap-3">
	<span className="text-sm text-gray-600">
	{ startIndex }-{ endIndex } { __( 'of', 'hyve-lite' ) } { }
	{ totalPosts } { __( 'rows', 'hyve-lite' ) }
	const startIndex = ( currentPage - 1 ) * postsPerPage + 1;
	const endIndex = Math.min( startIndex + postsPerPage - 1, totalPosts );
	return (
	<div className="flex items-center justify-between py-4 px-2">
	<div className="flex items-center gap-3">
	<span className="text-sm text-gray-600">
	{ startIndex }-{ endIndex } { __( 'of', 'hyve-lite' ) } { totalPosts } { __( 'rows', 'hyve-lite' ) }

[github-actions]

Plugin build for 2417a5d is ready 🛎️!

• Download Plugin - Download