Load more button

assets/js/translation-events.js

@@ -99,6 +99,39 @@
 
 					}
 				);
+				$( document ).on(
+					'click',
+					'.load-more-events-btn',
+					function ( e ) {
+						$( this ).text('Loading...').prop('disabled', true);
+						let eventType = $( this ).data('event-type');
+						let nextPage = $( this ).data('event-next-page');
+						const url = `/events/?${encodeURIComponent(eventType)}=${encodeURIComponent(nextPage)}&format=html`;
+
+						fetch(url)
+							.then(response => {
+								if (!response.ok) {
+									throw new Error(`HTTP error! Status: ${response.status}`);
+								}
+								return response.json();
+							})
+							.then(response => {
+								const $html = $(response.data.html);
+								const $listItems = $html.find('li');
+								if ( 0 === response.data.nextPage ){
+									$(this).hide();
+								} else {
+									$(this).data('event-next-page', response.data.nextPage);
+								}
+								$(this).parent().prev('.wp-block-wporg-event-list').find('ul').append($listItems);
+								$(this).text('Load more').prop('disabled', false);
+							})
+							.catch(error => {
+								console.error('Error fetching next page:', error);
+							});
+					}
+				);
+
 
 			}
 		);

includes/routes/event/list.php

@@ -22,48 +22,91 @@ public function handle(): void {
 		$_upcoming_events_paged       = 1;
 		$_past_events_paged           = 1;
 		$_user_attending_events_paged = 1;
+		$filter_key                   = '';
 
 		// phpcs:disable WordPress.Security.NonceVerification.Recommended
 		if ( isset( $_GET['current_events_paged'] ) ) {
 			$value = sanitize_text_field( wp_unslash( $_GET['current_events_paged'] ) );
 			if ( is_numeric( $value ) ) {
 				$_current_events_paged = (int) $value;
+				$filter_key            = 'current_events_query';
 			}
 		}
 		if ( isset( $_GET['upcoming_events_paged'] ) ) {
 			$value = sanitize_text_field( wp_unslash( $_GET['upcoming_events_paged'] ) );
 			if ( is_numeric( $value ) ) {
 				$_upcoming_events_paged = (int) $value;
+				$filter_key             = 'upcoming_events_query';
 			}
 		}
 		if ( isset( $_GET['past_events_paged'] ) ) {
 			$value = sanitize_text_field( wp_unslash( $_GET['past_events_paged'] ) );
 			if ( is_numeric( $value ) ) {
 				$_past_events_paged = (int) $value;
+				$filter_key         = 'past_events_query';
 			}
 		}
 		if ( isset( $_GET['user_attending_events_paged'] ) ) {
 			$value = sanitize_text_field( wp_unslash( $_GET['user_attending_events_paged'] ) );
 			if ( is_numeric( $value ) ) {
 				$_user_attending_events_paged = (int) $value;
+				$filter_key                   = 'user_attending_events_query';
 			}
 		}
 		// phpcs:enable
-
-		$current_events_query        = $this->event_repository->get_current_events( $_current_events_paged, 10 );
-		$upcoming_events_query       = $this->event_repository->get_upcoming_events( $_upcoming_events_paged, 10 );
-		$past_events_query           = $this->event_repository->get_past_events( $_past_events_paged, 10 );
-		$user_attending_events_query = $this->event_repository->get_current_and_upcoming_events_for_user( get_current_user_id(), $_user_attending_events_paged, 10 );
+		$tmpl_args = array(
+			'current_events_query'        => $this->event_repository->get_current_events( $_current_events_paged, 10 ),
+			'upcoming_events_query'       => $this->event_repository->get_upcoming_events( $_upcoming_events_paged, 10 ),
+			'past_events_query'           => $this->event_repository->get_past_events( $_past_events_paged, 10 ),
+			'user_attending_events_query' => $this->event_repository->get_current_and_upcoming_events_for_user( get_current_user_id(), $_user_attending_events_paged, 10 ),
+		);
 
 		$this->use_theme();
+		// phpcs:disable WordPress.Security.NonceVerification.Recommended
+		if ( isset( $_GET['format'] ) ) {
+
+			$format = sanitize_text_field( wp_unslash( $_GET['format'] ) );
+
+			if ( 'html' !== $format || empty( $filter_key ) ) {
+				return;
+			}
+
+			if ( ! empty( $tmpl_args[ $filter_key ]->event_ids ) ) {
+				$this->handle_ajax( $filter_key, $tmpl_args );
+			}
+		}
+
 		$this->tmpl(
 			'home',
+			$tmpl_args,
+		);
+	}
+
+	public function handle_ajax( $filter_key, $tmpl_args ) {
+		$event_ids    = $tmpl_args[ $filter_key ]->event_ids;
+		$current_page = $tmpl_args[ $filter_key ]->current_page;
+		$page_count   = $tmpl_args[ $filter_key ]->page_count;
+		$next_page    = ( ( $current_page + 1 ) <= $page_count ) ? $current_page + 1 : 0;
+
+		$list_block_markup = '<!-- wp:wporg-translate-events-2024/event-list ' . wp_json_encode(
+			array(
+				'event_ids' => $event_ids,
+				'next_page' => $next_page,
+				'filter_by' => $filter_key,
+			)
+		) . ' /-->';
+
+		$rendered_html = '';
+		$parsed_blocks = parse_blocks( do_blocks( $list_block_markup ) );
+		foreach ( $parsed_blocks as $block ) {
+			$rendered_html .= render_block( $block );
+		}
+
+		wp_send_json_success(
 			array(
-				'current_events_query'        => $current_events_query,
-				'upcoming_events_query'       => $upcoming_events_query,
-				'past_events_query'           => $past_events_query,
-				'user_attending_events_query' => $user_attending_events_query,
-			),
+				'nextPage' => $next_page,
+				'html'     => $rendered_html,
+			)
 		);
 	}
 }

themes/wporg-translate-events-2024/blocks/event-list/index.php

@@ -9,12 +9,12 @@
 		// phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.Found
 		'render_callback' => function ( array $attributes ) {
 			$event_ids = $attributes['event_ids'] ?? array();
-
+			$event_filter = $attributes['filter_by'] ?? '';
 			if ( empty( $event_ids ) ) {
 				return get_no_result_view();
 			}
 			$show_flag = ! empty( $attributes['show_flag'] ) && true === $attributes['show_flag'];
-
+			$next_page = ! empty( $attributes['next_page'] ) ? $attributes['next_page'] : 0;
 			ob_start();
 			?>
 			<div class="wp-block-wporg-event-list">
@@ -45,6 +45,16 @@
 				?>
 			</ul>
 			</div>
+			<!-- wp:wporg-translate-events-2024/event-load-more-button 
+				<?php
+				echo wp_json_encode(
+					array(
+						'filter'    => $event_filter,
+						'next_page' => $next_page,
+					)
+				);
+				?>
+			/-->
 			<?php
 			return ob_get_clean();
 		},

themes/wporg-translate-events-2024/blocks/event-load-more-button/index.php

@@ -0,0 +1,28 @@
+<?php
+namespace Wporg\TranslationEvents\Theme_2024;
+
+use Wporg\TranslationEvents\Translation_Events;
+
+register_block_type(
+	'wporg-translate-events-2024/event-load-more-button',
+	array(
+		// phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.Found
+		'render_callback' => function ( $attributes ) {
+			$event_filter = $attributes['filter'] ?? '';
+			$next_page = $attributes['next_page'] ?? 1;
+
+			if ( ! $event_filter || ! $next_page ) {
+				return;
+			}
+			ob_start();
+			?>
+			<!-- wp:button {"className":"is-style-outline"} -->
+			<div class="wp-block-button is-style-outline">
+				<button class="wp-block-button__link wp-element-button load-more-events-btn" data-event-type="<?php echo esc_attr( $event_filter ); ?>" data-event-next-page="<?php echo esc_attr( $next_page ); ?>" ><?php esc_html_e( 'Load more', 'gp-translation-events' ); ?></button>
+			</div>
+			<!-- /wp:button -->
+			<?php
+			return ob_get_clean();
+		},
+	)
+);

themes/wporg-translate-events-2024/blocks/pages/events/home/render.php

@@ -1,18 +1,29 @@
 <?php
 namespace Wporg\TranslationEvents\Theme_2024;
 
-$event_ids = $attributes['event_ids'] ?? array();
+$event_ids             = $attributes['event_ids'] ?? array();
+$current_events_query  = $attributes['current_events_query'];
+$upcoming_events_query = $attributes['upcoming_events_query'];
+$past_events_query     = $attributes['past_events_query'];
 
 $current_events_data = array(
-	'event_ids' => $attributes['current_events_query']['event_ids'] ?? array(),
+	'event_ids' => $current_events_query['event_ids'] ?? array(),
+	'filter_by' => 'current_events_paged',
+	'next_page' => ( $current_events_query['page_count'] >= $current_events_query['current_page'] + 1 ) ? $current_events_query['current_page'] + 1 : 0,
 );
 
 $upcoming_events_data = array(
-	'event_ids' => $attributes['upcoming_events_query']['event_ids'] ?? array(),
+	'event_ids' => $upcoming_events_query['event_ids'] ?? array(),
+	'filter_by' => 'upcoming_events_paged',
+	'next_page' => ( $upcoming_events_query['page_count'] >= $upcoming_events_query['current_page'] + 1 ) ? $upcoming_events_query['current_page'] + 1 : 0,
+
 );
 
 $past_events_data = array(
 	'event_ids' => $attributes['past_events_query']['event_ids'] ?? array(),
+	'filter_by' => 'past_events_paged',
+	'next_page' => ( $past_events_query['page_count'] >= $past_events_query['current_page'] + 1 ) ? $past_events_query['current_page'] + 1 : 0,
+
 );
 
 ?>

themes/wporg-translate-events-2024/functions.php

@@ -34,6 +34,7 @@ function register_blocks(): void {
 	include_once __DIR__ . '/blocks/event-edit-link/index.php';
 	include_once __DIR__ . '/blocks/event-trash-link/index.php';
 	include_once __DIR__ . '/blocks/event-nav-links/index.php';
+	include_once __DIR__ . '/blocks/event-load-more-button/index.php';
 }
 
 function register_patterns(): void {