Add the load more

Author: imranhsayed

assets/build/assets.php

@@ -1 +1 @@
-<?php return array('js/main.js' => array('dependencies' => array('wp-polyfill'), 'version' => 'a3b4a89a5cfd5eff3880117abb72bf0c'), 'js/single.js' => array('dependencies' => array('wp-polyfill'), 'version' => '7fead00701b6b38d5570a4ed8e130ec7'), 'js/editor.js' => array('dependencies' => array('wp-polyfill'), 'version' => 'ee640f54cf55292f6221a70587326775'), 'js/blocks.js' => array('dependencies' => array('lodash', 'react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-polyfill'), 'version' => '3d35cad1be3150206c0c17e25b2b99e6'), 'js/author.js' => array('dependencies' => array('wp-polyfill'), 'version' => 'd0de12045532844ce7f3c7e552d71c7a'), 'js/search.js' => array('dependencies' => array('wp-polyfill'), 'version' => '9ecb57bca86ee00854b1e86fabec0e8b'));
+<?php return array('js/main.js' => array('dependencies' => array('wp-polyfill'), 'version' => 'a3b4a89a5cfd5eff3880117abb72bf0c'), 'js/single.js' => array('dependencies' => array('wp-polyfill'), 'version' => '7fead00701b6b38d5570a4ed8e130ec7'), 'js/editor.js' => array('dependencies' => array('wp-polyfill'), 'version' => 'ee640f54cf55292f6221a70587326775'), 'js/blocks.js' => array('dependencies' => array('lodash', 'react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-polyfill'), 'version' => '3d35cad1be3150206c0c17e25b2b99e6'), 'js/author.js' => array('dependencies' => array('wp-polyfill'), 'version' => 'd0de12045532844ce7f3c7e552d71c7a'), 'js/search.js' => array('dependencies' => array('wp-polyfill'), 'version' => '1eeb880184b340e6d211201b060689ef'));

assets/build/css/search.css

@@ -1,7 +1,7 @@
 /**
  * External dependencies.
  */
-import { getFiltersFromUrl, getResultMarkup, getUrlWithFilters } from './helpers';
+import { getFiltersFromUrl, getLoadMoreMarkup, getResultMarkup, getUrlWithFilters } from './helpers';
 
 const { persist, create, stores } = window.zustand;
 
@@ -21,6 +21,8 @@ export const DEFAULT_STATE = {
 	filters: {},
 	filterIds: [],
 	pageNo: 1,
+	resultCount: null,
+	noOfPages: 0,
 	resultMarkup: '',
 	loading: false,
 };
@@ -48,11 +50,11 @@ const getStateFromUrl = ( rootUrl = '' ) => {
 	const { filterKeys } = getState();
 	const url = new URL( window.location.href );
 	let data = {};
-	
+
 	// Build data from URL.
 	// Add filters and page no to data.
 	data = getFiltersFromUrl( url, filterKeys );
-	
+
 	// Get url with filter selection.
 	data.url = getUrlWithFilters( data?.filters ?? {}, rootUrl );
 
@@ -75,13 +77,13 @@ const setStateFromUrl = ( settings = {}, stateFromUrl = {} ) => {
 		loading: true,
 		...stateFromUrl,
 	} );
-	
-	// Action: Get results with data from state.
+
+	// Action: Get result with data from state.
 	getResult();
 };
 
 /**
- * Get Results.
+ * Get Result.
  */
 const getResult = () => {
 	const { restApiUrl, filters, pageNo } = getState();
@@ -92,19 +94,20 @@ const getResult = () => {
 	// Add query-params to rest api url.
 	const params = {
 		...filters,
-		page_no: pageNo
+		page_no: pageNo,
 	};
 	const fetchUrl = restApiUrl + '?' + ( new URLSearchParams( params ) ).toString();
 
 	fetch( fetchUrl )
 		.then( ( response ) => response.json() )
 		.then( ( responseData ) => {
 			const resultMarkup = getResultMarkup( responseData?.posts ?? [], responseData?.total_posts ?? 0 );
+			const loadMoreMarkup = getLoadMoreMarkup( responseData?.no_of_pages ?? 0, pageNo );
 			setState( {
 				loading: false,
 				resultCount: responseData?.total_posts ?? 0,
 				resultPosts: responseData?.posts ?? [],
-				resultMarkup: resultMarkup || '',
+				resultMarkup: resultMarkup + loadMoreMarkup || '',
 				noOfPages: responseData?.no_of_pages ?? 0,
 			} );
 		} );
@@ -116,9 +119,8 @@ const getResult = () => {
  * @param {Object} currentSelection currentSelection
  */
 const addFilter = ( currentSelection = {} ) => {
-	const { filters, filterKeys, rootUrl } = getState();
+	const { filters, rootUrl } = getState();
 	const { key, value } = currentSelection || {};
-	console.log( 'currentSelection', currentSelection, filters[key] );
 
 	// Get new filter values.
 	let newFilters = { ...filters };
@@ -140,10 +142,11 @@ const addFilter = ( currentSelection = {} ) => {
 		url,
 		currentSelection,
 		filters: newFilters,
+		pageNo: 1,
 		loading: true,
 	} );
 
-	// Get Results.
+	// Get Result.
 	getResult();
 };
 
@@ -187,6 +190,7 @@ const deleteFilter = ( currentSelection = {} ) => {
 		url,
 		currentSelection,
 		filters: newFilters,
+		pageNo: 1,
 		loading: true,
 	} );
 
@@ -212,6 +216,46 @@ const updateUrl = ( url ) => {
 	}
 };
 
+const loadMorePosts = ( nextPageNo = 1 ) => {
+	const { restApiUrl, resultMarkup, filters } = getState();
+	// Update page no in the fetch url.
+	const fetchUrl = getUrlWithFilters( { ...filters, page_no: nextPageNo }, restApiUrl );
+	
+	// Set State.
+	setState({
+		loadingMorePosts: true,
+		pageNo: nextPageNo,
+	});
+	
+	// Fetch load more results.
+	fetch( fetchUrl )
+		.then( ( response ) => response.json() )
+		.then( ( responseData ) => {
+			const moreResultMarkup = getResultMarkup( responseData?.posts ?? [] );
+			const loadMoreMarkup = getLoadMoreMarkup( responseData?.no_of_pages ?? 0, nextPageNo );
+			setState( {
+				loadingMorePosts: false,
+				resultPosts: responseData?.posts ?? [],
+				resultMarkup: resultMarkup + moreResultMarkup + loadMoreMarkup,
+			} );
+	} );
+};
+
+const clearAllFilters = () => {
+	const { rootUrl } = getState();
+	setState({
+		loading: true,
+		filters: {},
+		filterIds: [],
+		currentSelection: {},
+		pageNo: 1,
+	});
+	
+	updateUrl( rootUrl );
+	
+	getResult();
+};
+
 /**
  * Create store.
  */
@@ -222,6 +266,8 @@ export const store = create(
 			initialize,
 			addFilter,
 			deleteFilter,
+			loadMorePosts,
+			clearAllFilters,
 		} ),
 		{
 			name: STORE_NAME,

assets/build/js/search.js

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 /**
  * Get Filters From Url.
  *
@@ -58,14 +59,6 @@ export const getUrlWithFilters = ( filters = {} = {}, rootUrl = '' ) => {
 	// Build URL.
 	let url = new URL( rootUrl );
 
-	// Remove the page parameter whenever any filter value is changed. (Pages should start over from Page 1)
-	url.searchParams.delete( 'pageNo' );
-	
-	// 1.Add page number if it does not already exists and at least one filter is available.
-	if ( ! url.searchParams.has( 'pageNo' ) && Object.keys( filters ).length ) {
-		url.searchParams.append( 'pageNo', '1' );
-	}
-	
 	// 2.Add the given keys value pairs in search params.
 	Object.keys( filters ).forEach( ( key ) => {
 		url.searchParams.set( key, filters[ key ] );
@@ -81,26 +74,24 @@ export const getUrlWithFilters = ( filters = {} = {}, rootUrl = '' ) => {
  * Get Results markup.
  *
  * @param posts
- * @param totalPosts
  * @return {string}
  */
-export const getResultMarkup = ( posts = [], totalPosts = 0 ) => {
+export const getResultMarkup = ( posts = [] ) => {
 	if ( ! Array.isArray( posts ) || ! posts.length ) {
 		return '';
 	}
 
-	let markup = `
-			<div>
-				<h5>Results: ${totalPosts}</h5>
-				<div class="row">`;
+	let img = '';
+	let markup = ``;
 
 	posts.forEach( post => {
+		img = post.thumbnail ? post.thumbnail : '<img src="https://via.placeholder.com/526x300" width="526" height="300"/>';
 		markup += `
 		<section id="post-${ post?.id ?? 0 }" class="col-lg-4 col-md-6 col-sm-12 pb-4">
 			<header>
 				<a href="${ post?.permalink ?? '' }" class="block">
 				<figure class="img-container">
-					${ post?.thumbnail ?? '' }
+					${ img }
 				</figure>
 			</header>
 			<div class="post-excerpt my-4">
@@ -118,9 +109,18 @@ export const getResultMarkup = ( posts = [], totalPosts = 0 ) => {
 		`;
 	} );
 
-	markup += `
-		</div>
-	</div>`;
-	
 	return markup;
+};
+
+export const getLoadMoreMarkup = ( noOfPages = 0, currentPageNo = 1 ) => {
+	if ( parseInt( currentPageNo ) >= parseInt( noOfPages ) ) {
+		return '';
+	}
+	
+	return `<aquila-load-more
+				class="load-more-wrap"
+				next-page-no="${ parseInt( currentPageNo ) + 1 }"
+			>
+				<button class="btn btn-primary">Load More</button>
+			</aquila-load-more>`;
 }

assets/package-lock.json

@@ -27,6 +27,25 @@ class AquilaSearch extends HTMLElement {
 	}
 }
 
+/**
+ * Clear All Filters.
+ */
+class AquilaClearAllFilters extends HTMLElement {
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		super();
+		
+		const { clearAllFilters } = getState();
+		this.clearAllFiltersButton = this.querySelector( 'button' );
+		
+		this.clearAllFiltersButton.addEventListener( 'click', () => {
+			clearAllFilters();
+		} );
+	}
+}
+
 /**
  * AquilaFilters Class.
  */
@@ -138,6 +157,9 @@ class AquilaCheckboxAccordionChild extends HTMLElement {
 			if ( this.parentContentEl.style ) {
 				this.parentContentEl.style.height = 'auto';
 			}
+		} else {
+			this.inputEl.checked = false;
+			this.parentEl.removeAttribute( 'active' );
 		}
 	}
 
@@ -165,6 +187,28 @@ class AquilaCheckboxAccordionChild extends HTMLElement {
 	}
 }
 
+/**
+ * AquilaResults Class.
+ */
+class AquilaResultsCount extends HTMLElement {
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		super();
+		
+		// Subscribe to updates.
+		subscribe( this.update.bind( this ) );
+	}
+	
+	update( currentState = {} ) {
+		const { resultCount } = currentState;
+		if ( null !== resultCount ) {
+			this.innerHTML = `Results: ${resultCount} Posts`;
+		}
+	}
+}
+
 /**
  * AquilaResults Class.
  */
@@ -195,11 +239,64 @@ class AquilaResults extends HTMLElement {
 	}
 }
 
+/**
+ * AquilaLoadMore Class.
+ */
+class AquilaLoadMore extends HTMLElement {
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		super();
+		
+		// Subscribe to updates.
+		subscribe( this.update.bind( this ) );
+		
+		this.querySelector( 'button' ).addEventListener( 'click', () => this.handleLoadMoreButtonClick() );
+		this.nextPageNo = this.getAttribute( 'next-page-no' );
+	}
+	
+	update( currentState = {} ) {
+		const { pageNo } = currentState;
+		if ( parseInt( this.nextPageNo ) <= parseInt( pageNo ) ) {
+			this.remove();
+			return null;
+		}
+		
+	}
+	
+	handleLoadMoreButtonClick() {
+		const { loadMorePosts } = getState();
+		loadMorePosts( this.nextPageNo );
+	}
+}
+
+class AquilaLoadingMore extends HTMLElement {
+	constructor() {
+		super();
+		// Subscribe to updates.
+		subscribe( this.update.bind( this ) );
+	}
+	
+	update( currentState = {} ) {
+		const { loadingMorePosts } = currentState;
+		if ( loadingMorePosts ) {
+			this.innerHTML = 'Loading more posts...';
+		} else {
+			this.innerHTML = '';
+		}
+	}
+}
+
 /**
  * Initialize.
  */
 customElements.define( 'aquila-checkbox-accordion', AquilaCheckboxAccordion );
 customElements.define( 'aquila-checkbox-accordion-child', AquilaCheckboxAccordionChild );
+customElements.define( 'aquila-clear-all-filters', AquilaClearAllFilters );
 customElements.define( 'aquila-filters', AquilaFilters );
+customElements.define( 'aquila-results-count', AquilaResultsCount );
 customElements.define( 'aquila-results', AquilaResults );
+customElements.define( 'aquila-load-more', AquilaLoadMore );
+customElements.define( 'aquila-loading-more', AquilaLoadingMore );
 customElements.define( 'aquila-search', AquilaSearch );