Merge pull request #25 from a8cteam51/fix/infinite-scroll-dupes

Fix infinite scroll dupes

README.md

@@ -28,6 +28,9 @@ That's it! Your visitors can now load more posts by clicking the load more butto
 
 ## Changelog
 
+### 1.0.5
+* Fix - Infinite scroll would duplicate some posts due to the same AJAX call being executed twice
+
 ### 1.0.4
 * Update - Version
 

assets/js/build/frontend.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '3c0f99a875b752effacc');
+<?php return array('dependencies' => array(), 'version' => 'e794f26b7ef47600cb0a');

assets/js/src/frontend.js

@@ -1,3 +1,69 @@
+// Keep a record of the page we have loaded, per query.
+const pages = {};
+
+/**
+ * Gets the query and page from a URL string
+ * @param {string} str The query string for url
+ * @returns {query: number, page: number} | null
+ */
+const extractQueryParams = ( str ) => {
+	// Default values
+	let query = null;
+	let page = null;
+
+	// Regular expressions to match query and page
+	const queryMatch = str.match( /query-(\d+)/ );
+	const pageMatch = str.match( /page=(\d+)/ );
+
+	// Extract and convert to integer if matches are found
+	if ( queryMatch ) {
+		query = parseInt( queryMatch[ 1 ], 10 );
+	}
+
+	if ( pageMatch ) {
+		page = parseInt( pageMatch[ 1 ], 10 );
+	}
+
+	// If either are null, return null
+	if ( query === null || page === null ) {
+		return null;
+	}
+
+	return { query, page };
+};
+
+/**
+ * Checks if a given query and page is in the pages object
+ *
+ * @param {number} query The query ID
+ * @param {number} page The page number
+ *
+ * @returns {boolean}
+ */
+const isPageLoaded = ( query, page ) => {
+	if ( pages[ query ] && pages[ query ].includes( page ) ) {
+		return true;
+	} else {
+		return false;
+	}
+};
+
+/**
+ * Logs a given query and page to the pages object
+ *
+ * @param {number} query The query ID
+ * @param {number} page The page number
+ *
+ * @returns {void}
+ */
+const logPage = ( query, page ) => {
+	if ( ! pages[ query ] ) {
+		pages[ query ] = [];
+	}
+
+	pages[ query ].push( page );
+};
+
 const intersectionObserver = new IntersectionObserver( ( entries ) => {
 	// If intersectionRatio is 0, the target is out of view.
 	if ( entries[ 0 ].intersectionRatio <= 0 ) return;
@@ -8,7 +74,19 @@ const intersectionObserver = new IntersectionObserver( ( entries ) => {
 			.querySelector( '.wp-block-post-template' ),
 		$clickedButton = entries[ 0 ].target;
 
-	fetchPosts( $url, $container, $clickedButton );
+	// Get the query and page from the button href.
+	const queryLoopParams = extractQueryParams(
+		$clickedButton.getAttribute( 'href' )
+	);
+
+	// If we have a page and its not already in the pages array, add it.
+	if (
+		queryLoopParams &&
+		isPageLoaded( queryLoopParams.query, queryLoopParams.page ) === false
+	) {
+		logPage( queryLoopParams.query, queryLoopParams.page );
+		fetchPosts( $url, $container, $clickedButton );
+	}
 } );
 
 /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "team51-plugin-qllm",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A qllm for WP.com Special Projects plugins",
   "author": {
     "name": "WordPress.com Special Projects Team",

query-loop-load-more.php

@@ -3,7 +3,7 @@
  * Plugin Name:             Query Loop Load More
  * Plugin URI:              https://github.com/a8cteam51/query-loop-load-more
  * Description:             Adds a load more option to the Query Loop Pagination block in Gutenberg.
- * Version:                 1.0.4
+ * Version:                 1.0.5
  * Requires at least:       6.2
  * Tested up to:            6.6.1
  * Requires PHP:            8.0

readme.txt

@@ -1,47 +1,50 @@
-=== Query Loop Load More ===
-Contributors: wpspecialprojects, tommusrhodus
-Tags: gutenberg, editor, block editor, load more, query loop
-Requires at least: 6.2
-Tested up to: 6.6.1
-Stable tag: 1.0.4
-Requires PHP: 8.0
-License: GPLv3 or later
-License URI: https://www.gnu.org/licenses/gpl-3.0.html
-
-Adds a load more option to the Query Loop Pagination block in Gutenberg, allowing users to load more posts without refreshing the page.
-
-== Description ==
-
-Adds a load more option to the Query Loop Pagination block in Gutenberg, allowing users to load more posts without refreshing the page.
-
-To use this plugin, you must first add the Query Loop block into your post content, then add the Pagination block inside the Query Loop. When working with the Pagination block, you will see new options to enable load more on the block.
-
-The load more option allows you to set a loading text parameter and also the button text. The load more button works with the alignment options and arrow options of the pagination block.
-
-Here is how to enable the load more option:
-
-* Add the Query Loop block to your post content.
-* Inside the Query Loop block, add the Pagination block.
-* In the Pagination block settings, enable the "Load More" option.
-* Set the loading text parameter and the button text.
-* Customize the alignment and arrow options if desired.
-* That's it! Your visitors can now load more posts by clicking the load more button without refreshing the page.
-
-== Changelog ==
-
-= 1.0.4 =
-* Update - Version
-
-= 1.0.3 =
-* Fix - Loading more posts on "Inherit query from template" 
-
-= 1.0.2 =
-* Add - SVN deployment workflow
-* Update - Version and Stable tag
-
-= 1.0.1 =
-* Fix - Unify GPL license
-* Fix - Unify text domain and plugin slug
-
-= 1.0.0 =
-Initial release.
+=== Query Loop Load More ===
+Contributors: wpspecialprojects, tommusrhodus
+Tags: gutenberg, editor, block editor, load more, query loop
+Requires at least: 6.2
+Tested up to: 6.6.1
+Stable tag: 1.0.5
+Requires PHP: 8.0
+License: GPLv3 or later
+License URI: https://www.gnu.org/licenses/gpl-3.0.html
+
+Adds a load more option to the Query Loop Pagination block in Gutenberg, allowing users to load more posts without refreshing the page.
+
+== Description ==
+
+Adds a load more option to the Query Loop Pagination block in Gutenberg, allowing users to load more posts without refreshing the page.
+
+To use this plugin, you must first add the Query Loop block into your post content, then add the Pagination block inside the Query Loop. When working with the Pagination block, you will see new options to enable load more on the block.
+
+The load more option allows you to set a loading text parameter and also the button text. The load more button works with the alignment options and arrow options of the pagination block.
+
+Here is how to enable the load more option:
+
+* Add the Query Loop block to your post content.
+* Inside the Query Loop block, add the Pagination block.
+* In the Pagination block settings, enable the "Load More" option.
+* Set the loading text parameter and the button text.
+* Customize the alignment and arrow options if desired.
+* That's it! Your visitors can now load more posts by clicking the load more button without refreshing the page.
+
+== Changelog ==
+
+= 1.0.5 =
+* Fix - Infinite scroll would duplicate some posts due to the same AJAX call being executed twice
+
+= 1.0.4 =
+* Update - Version
+
+= 1.0.3 =
+* Fix - Loading more posts on "Inherit query from template"
+
+= 1.0.2 =
+* Add - SVN deployment workflow
+* Update - Version and Stable tag
+
+= 1.0.1 =
+* Fix - Unify GPL license
+* Fix - Unify text domain and plugin slug
+
+= 1.0.0 =
+Initial release.