functionnality load more news first proto

includes/api.php

@@ -4,35 +4,6 @@
 
 add_action('rest_api_init', function () {
 
-	/* ---------------------------
-		SHIPPING ROUTES
- ---------------------------*/
-	// Handle exclusion parameters like http://homegrade.local/wp-json/homegrade-datas/v1/questions-thematiques/29?excluded_ids=1314,1305,1301
-	// register_rest_route('homegrade-datas/v1', '/questions-thematiques/(?P<thematiqueId>\d+)', array(
-	// 	'methods' => 'GET',
-	// 	'callback' => 'get_questions_posts_per_thematique_id',
-	// 	'permission_callback' => '__return_true',
-	// 	'args' => array(
-	// 		'excluded_ids' => array(
-	// 			'sanitize_callback' => 'sanitize_text_field',
-	// 		),
-	// 	),
-	// ));
-	// // * SHIP ALL NEWS
-	// register_rest_route('homegrade-datas/v1', '/news', array(
-	// 	'methods' => 'GET',
-	// 	'callback' => 'get_news',
-	// 	'permission_callback' => '__return_true',
-
-	// ));
-	// // * SHIP NEWS BY TYPE
-	// register_rest_route('homegrade-datas/v1', '/news/type/(?P<typeId>\d+)', array(
-	// 	'methods' => 'GET',
-	// 	'callback' => 'get_news_posts_per_type_id',
-	// 	'permission_callback' => '__return_true',
-	// ));
-
-
 	/* ----------------
 		BUILDING ROUTES
  	-----------------*/
@@ -40,18 +11,22 @@ add_action('rest_api_init', function () {
 	// ################ NEWS ################
 
 	// * BUILD ALL NEWS CARDS 
-	register_rest_route('homegrade-datas/v1/build', '/news', array(
+	register_rest_route('homegrade-datas/v1/build', '/news/all', array(
 		'methods' => 'GET',
 		'callback' => 'build_news_posts_feed_all',
 		'permission_callback' => '__return_true',
-
+	));
+	// * BUILD MORE NEWS CARDS 
+	register_rest_route('homegrade-datas/v1/build', '/news/more', array(
+		'methods' => 'GET',
+		'callback' => 'build_news_posts_more_posts',
+		'permission_callback' => '__return_true',
 	));
 	// * BUILD NEWS CARDS BY NEWS TYPE
 	register_rest_route('homegrade-datas/v1/build', '/news/type/(?P<typeId>\d+)', array(
 		'methods' => 'GET',
 		'callback' => 'build_news_posts_feed_per_type_id',
 		'permission_callback' => '__return_true',
-
 	));
 
 	// ################ PUBLICATIONS ################
@@ -100,7 +75,11 @@ add_action('rest_api_init', function () {
 
 function build_news_posts_feed_all($request)
 {
+	$currentLanguage = $request->get_param('current-page-language') ?? 'fr';
+	do_action('wpml_switch_language', $currentLanguage);
+
 	$args = array(
+		"status" => "publish",
 		"post_type" => "post",
 		"posts_per_page" => -1,
 	);
@@ -129,6 +108,8 @@ function build_news_posts_feed_all($request)
 	$response_data = array(
 		'html_template' => $html_template,
 		'total_posts_found' => $newsPostsDatas->found_posts,
+		'active_page' => 1,
+		'max_num_pages' => 1,
 	);
 
 	$response = new WP_REST_Response($response_data);
@@ -138,12 +119,19 @@ function build_news_posts_feed_all($request)
 }
 function build_news_posts_feed_per_type_id($request)
 {
+	$currentLanguage = $request->get_param('current-page-language') ?? 'fr';
+	$activePage = $request->get_param('active-page') ?? 1;
+	$postsPerPage = esc_html($request->get_param('posts-per-page')) ?? 8;
+
+	do_action('wpml_switch_language', $currentLanguage);
+
 	$typeId = esc_html($request['typeId']);
 	if (!$typeId || (!is_numeric($typeId))) return;
 
 	$args = array(
+		"status" => "publish",
 		"post_type" => "post",
-		"posts_per_page" => -1,
+		"posts_per_page" => $postsPerPage,
 
 		"tax_query" => array(
 			array(
@@ -178,6 +166,71 @@ function build_news_posts_feed_per_type_id($request)
 	$response_data = array(
 		'html_template' => $html_template,
 		'total_posts_found' => $newsPostsDatas->found_posts,
+		'active_page' => 1,
+		'max_num_pages' => $newsPostsDatas->max_num_pages,
+	);
+
+
+	$response = new WP_REST_Response($response_data);
+
+	$response->set_status(200);
+
+	return $response;
+}
+
+function build_news_posts_more_posts($request)
+{
+	$currentLanguage = esc_html($request->get_param('current-page-language')) ?? 'fr';
+	$previousActivePage = esc_html($request->get_param('active-page')) ?? 1;
+	$activeTermID = esc_html($request->get_param('active-term-id'));
+	$postsPerPage = esc_html($request->get_param('posts-per-page')) ?? 12;
+
+	$activePage = is_numeric($previousActivePage) ?  $previousActivePage + 1 : 1;
+
+	$taxQuery = $activeTermID && is_numeric($activeTermID) ? array(
+		array(
+			'taxonomy' => 'news_type',
+			'field' => 'term_id',
+			'terms' => $activeTermID
+		)
+	) : null;
+
+
+	do_action('wpml_switch_language', $currentLanguage);
+
+	$args = array(
+		"status" => "publish",
+		"post_type" => "post",
+		"posts_per_page" => $postsPerPage,
+		"paged" => $activePage,
+		"tax_query" => $taxQuery
+	);
+	$newsPostsDatas = new WP_Query($args);
+
+	ob_start();
+	foreach ($newsPostsDatas->posts as $key => $post) {
+		$post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail card-post__thumbnail')) ?? null;
+		$news_type = get_the_terms($post->ID, "news_type") ?? null;
+		get_template_part(
+			'template-components/cards/card-news',
+			null,
+			array(
+				'card_variant' => 'activite',
+				'post_ID' => $post->ID,
+				'post_title' => get_the_title($post->ID),
+				'post_thumbnail' => $post_thumbnail,
+				'news_type' => $news_type,
+			)
+		);
+	}
+
+	$html_template = ob_get_clean();
+
+	$response_data = array(
+		'html_template' => $html_template,
+		'total_posts_found' => $newsPostsDatas->found_posts,
+		'active_page' => $activePage,
+		'max_num_pages' => $newsPostsDatas->max_num_pages,
 	);
 
 
@@ -460,6 +513,34 @@ function build_faq_details_rows_all_from_one_thematique(WP_REST_Request $request
 
 
 
+	/* ---------------------------
+		SHIPPING ROUTES
+ ---------------------------*/
+	// Handle exclusion parameters like http://homegrade.local/wp-json/homegrade-datas/v1/questions-thematiques/29?excluded_ids=1314,1305,1301
+	// register_rest_route('homegrade-datas/v1', '/questions-thematiques/(?P<thematiqueId>\d+)', array(
+	// 	'methods' => 'GET',
+	// 	'callback' => 'get_questions_posts_per_thematique_id',
+	// 	'permission_callback' => '__return_true',
+	// 	'args' => array(
+	// 		'excluded_ids' => array(
+	// 			'sanitize_callback' => 'sanitize_text_field',
+	// 		),
+	// 	),
+	// ));
+	// // * SHIP ALL NEWS
+	// register_rest_route('homegrade-datas/v1', '/news', array(
+	// 	'methods' => 'GET',
+	// 	'callback' => 'get_news',
+	// 	'permission_callback' => '__return_true',
+
+	// ));
+	// // * SHIP NEWS BY TYPE
+	// register_rest_route('homegrade-datas/v1', '/news/type/(?P<typeId>\d+)', array(
+	// 	'methods' => 'GET',
+	// 	'callback' => 'get_news_posts_per_type_id',
+	// 	'permission_callback' => '__return_true',
+	// ));
+
 // function get_news($request)
 // {
 // 	$args = array(

resources/css/pages/template-archives-news.css

@@ -5,4 +5,7 @@
   .card-grid-container[isLoading] {
     @apply opacity-30;
   }
+  .load-news {
+    @apply mx-auto w-fit gap-8 flex pb-16;
+  }
 }

resources/js/archive-template-news.js

@@ -1,3 +1,6 @@
+// #########################
+// ### FILTER POSTS
+// #########################
 async function filterPosts(e) {
   const filterID =
     e.target.getAttribute('data-term-id') ??
@@ -22,21 +25,45 @@ async function filterPosts(e) {
 
   e.target.classList.add('filters-toolbar__action-button--active');
   e.target.setAttribute('aria-pressed', 'true');
+
+  updateActivePageNumber(1);
 }
 
-async function hydrateNewsFeedByTypeId(filterID, termName) {
+async function loadMorePosts(e) {
-  let newCardsDatas;
+  const newsContainer = document.querySelector('.news-container .card-grid-container');
-  if (filterID === 'all') {
+  newsContainer.setAttribute('isLoading', true);
-    const response = await fetch(`/wp-json/homegrade-datas/v1/build/news`);
+  await hydrateNewsFeedWithNextPosts();
-    newCardsDatas = await response.json();
+  newsContainer.removeAttribute('isLoading');
-  } else {
+}
-    const response = await fetch(`/wp-json/homegrade-datas/v1/build/news/type/${filterID}`);
+
-    newCardsDatas = await response.json();
+// ###################################
+// ### UPDATE INDICATORS AND DISPLAY
+// ###################################
+function updateActivePageNumber(activePage) {
+  const filtersToolbar = document.querySelector('.filters-toolbar--archive-news');
+  filtersToolbar.setAttribute('data-active-page', activePage);
+}
+
+function updateHasMorePosts(activePage, maxNumPages) {
+  const filtersToolbar = document.querySelector('.filters-toolbar--archive-news');
+
+  filtersToolbar.setAttribute('data-has-more-posts', activePage < maxNumPages);
+}
+
+function checkLoadMoreButtonsVisibility() {
+  const loadMoreButton = document.querySelector('#load-more-news');
+  const loadAllButton = document.querySelector('#load-all-news');
+  const filtersToolbar = document.querySelector('.filters-toolbar--archive-news');
+  const hasMorePosts = filtersToolbar.getAttribute('data-has-more-posts') === 'true';
+
+  if (hasMorePosts) {
+    loadMoreButton.removeAttribute('hidden');
+    loadAllButton.removeAttribute('hidden');
+    return;
   }
 
-  let container = document.querySelector('.card-grid-container');
+  loadAllButton.setAttribute('hidden', 'true');
-  container.innerHTML = newCardsDatas.html_template;
+  loadMoreButton.setAttribute('hidden', 'true');
-  updateSearchResultsAmount(newCardsDatas.total_posts_found, termName);
 }
 
 function updateSearchResultsAmount(totalPostsFound, termName) {
@@ -57,6 +84,95 @@ function updateSearchResultsAmount(totalPostsFound, termName) {
     return;
   }
 }
+
+function updateToolbarActiveFilter(termId) {
+  const filterToolbar = document.querySelector('.filters-toolbar--archive-news');
+  if (!filterToolbar) return;
+
+  filterToolbar.setAttribute('data-active-news-term', termId);
+}
+
+// #########################
+// ### HYDRATATION
+// #########################
+async function hydrateNewsFeedByTypeId(filterID, termName) {
+  const currentLanguage = document.querySelector('body').getAttribute('current-language');
+  const filtersToolbar = document.querySelector('.filters-toolbar--archive-news');
+
+  const postsPerPage = filtersToolbar.getAttribute('data-posts-per-page') ?? 12;
+  const activePage = filtersToolbar.getAttribute('data-active-page');
+
+  let newCardsDatas;
+  if (filterID === 'all') {
+    // const response = await fetch(
+    //   `/wp-json/homegrade-datas/v1/build/news/all?current-page-language=${currentLanguage}&active-page=${activePage}&posts-per-page=${postsPerPage}`
+    // );
+    const response = await fetch(
+      `/wp-json/homegrade-datas/v1/build/news/more?current-page-language=${currentLanguage}&active-page=${0}&posts-per-page=${postsPerPage}`
+    );
+    newCardsDatas = await response.json();
+  } else {
+    // const response = await fetch(
+    //   `/wp-json/homegrade-datas/v1/build/news/type/${filterID}?current-page-language=${currentLanguage}&active-page=${activePage}&posts-per-page=${postsPerPage}`
+    // );
+    const response = await fetch(
+      `/wp-json/homegrade-datas/v1/build/news/more?current-page-language=${currentLanguage}&active-page=${0}&active-term-id=${filterID}&posts-per-page=${postsPerPage}`
+    );
+    newCardsDatas = await response.json();
+  }
+
+  let container = document.querySelector('.card-grid-container');
+  container.innerHTML = newCardsDatas.html_template;
+
+  updateToolbarActiveFilter(filterID);
+  updateSearchResultsAmount(newCardsDatas.total_posts_found, termName);
+  updateHasMorePosts(newCardsDatas.active_page, newCardsDatas.max_num_pages);
+  console.log(newCardsDatas.active_page, newCardsDatas.max_num_pages);
+  checkLoadMoreButtonsVisibility();
+}
+
+async function hydrateNewsFeedWithAllPosts() {
+  const currentLanguage = document.querySelector('body').getAttribute('current-language');
+  const activeNewsTermId =
+    document
+      .querySelector('.filters-toolbar--archive-news')
+      .getAttribute('data-active-news-term') ?? null;
+  const response = await fetch(
+    `/wp-json/homegrade-datas/v1/build/news/all?current-page-language=${currentLanguage}`
+  );
+  newsDatas = await response.json();
+
+  const newsGrid = document.querySelector('.news-container .card-grid-container');
+  newsGrid.innerHTML = newsDatas.html_template;
+
+  updateHasMorePosts(newsDatas.active_page, newsDatas.max_num_pages);
+  checkLoadMoreButtonsVisibility();
+}
+
+async function hydrateNewsFeedWithNextPosts() {
+  const currentLanguage = document.querySelector('body').getAttribute('current-language');
+  const filtersToolbar = document.querySelector('.filters-toolbar--archive-news');
+
+  const activePage = filtersToolbar.getAttribute('data-active-page') ?? 1;
+  const postsPerPage = filtersToolbar.getAttribute('data-posts-per-page') ?? 12;
+  const activeNewsTermId = filtersToolbar.getAttribute('data-active-news-term') ?? 'all';
+
+  const response = await fetch(
+    `/wp-json/homegrade-datas/v1/build/news/more?current-page-language=${currentLanguage}&active-page=${activePage}&active-term-id=${activeNewsTermId}&posts-per-page=${postsPerPage}`
+  );
+  newsDatas = await response.json();
+
+  const newsGrid = document.querySelector('.news-container .card-grid-container');
+  newsGrid.innerHTML += newsDatas.html_template;
+
+  updateActivePageNumber(newsDatas.active_page);
+  updateHasMorePosts(newsDatas.active_page, newsDatas.max_num_pages);
+  checkLoadMoreButtonsVisibility();
+}
+
+// #########################
+// ### INIT
+// #########################
 function filterNewsInit() {
   const filterNewsToolbar = document.querySelector('.filters-toolbar--archive-news');
   if (!filterNewsToolbar) return;
@@ -69,15 +185,16 @@ function filterNewsInit() {
     button.addEventListener('click', (e) => filterPosts(e));
   });
 }
+
 function loadMoreNewsInit() {
+  const loadAllButton = document.querySelector('#load-all-news');
   const loadMoreButton = document.querySelector('#load-more-news');
-  if (!loadMoreButton) return;
 
-  function loadMoreNews() {
+  // if (!loadAllButton) return;
-    console.log('loadMoreNews');
+  loadAllButton.addEventListener('click', hydrateNewsFeedWithAllPosts);
-  }
 
-  loadMoreButton.addEventListener('click', loadMoreNews);
+  // if (!loadMoreButton) return;
+  loadMoreButton.addEventListener('click', loadMorePosts);
 }
 
 export default function archiveNewsInit() {

template-archive-news.php

@@ -8,14 +8,16 @@ $args = array(
 $relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null;
 $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 
-$post_per_page = 24;
+$posts_per_page = 4;
 $args = array(
 	"post_type" => "post",
 	"status" => "publish",
-	"posts_per_page" => $post_per_page,
+	"posts_per_page" => $posts_per_page,
+	// "paged" => 1,
 );
 $posts = new WP_Query($args);
 
+
 ?>
 <div class="template-archives template-archives--news">
 	<?php /* --------
@@ -51,7 +53,7 @@ $posts = new WP_Query($args);
 	<?php /* --------
 		FILTERS
  ---------------*/ ?>
-	<div class="filters-toolbar filters-toolbar--archive-news">
+	<div class="filters-toolbar filters-toolbar--archive-news" data-active-news-term='all' data-active-page="1" data-posts-per-page="<?php echo $posts_per_page ?>" data-has-more-posts="true">
 		<p class="filters-toolbar__posts-results-amount filter-disable" role="status">
 			<span class="results-amount">
 				<?php echo $posts->found_posts ?>
@@ -131,9 +133,11 @@ $posts = new WP_Query($args);
 			?>
 		</div>
 
-
 		<?php if ($posts->max_num_pages > 1) : ?>
-			<button id="load-more-news" class="cta cta--outline cta--button mx-auto mb-32"><?php echo __("Charger Plus", "homegrade-theme__texte-fonctionnel") ?></button>
+			<div class="load-news">
+				<button id="load-all-news" class="cta cta--outline cta--button"><?php echo __("Charger Tout", "homegrade-theme__texte-fonctionnel") ?></button>
+				<button id="load-more-news" class="cta cta--outline cta--button"><?php echo __("Charger Plus", "homegrade-theme__texte-fonctionnel") ?></button>
+			</div>
 		<?php endif; ?>
 	</section>