PLANET-7485: Rewrite search to avoid double queries (#2246)

* PLANET-7485: Rewrite search to avoid double queries

Ref: https://jira.greenpeace.org/browse/PLANET-7485

* PLANET-7485: Add filters handling

Add filters, aggregation matching, filters exclusion

* Use facets for native results aggregation

Force use of facets feature (Filters in EP config)
Fix tax query cumulative filter

* Fix search without ElasticPress

Display filters even without ES active
Fix ajax search on action type
Fix mimetype filter without ES active

* Extract filters templates

Extract and reuse filters templates for normal and modal modes

Author: lithrel

assets/src/js/search.js

@@ -8,11 +8,21 @@ const showHiddenRow = row => {
   row.style.display = 'block';
 };
 
+const isModalSearch = () => {
+  return document.getElementById('filtermodal') &&
+    document.getElementById('filtermodal').style.display !== 'none';
+};
+
+const getSelectedFilters = isModal => {
+  const filters_div_id = isModal ? 'filtermodal' : 'filter-sidebar-options';
+  return [...document.querySelectorAll(
+    `#${filters_div_id} input[name^="f["]:checked`
+  )];
+};
+
 const addSelectedFiltersToForm = (isModal, idToRemove) => {
   const searchForm = document.getElementById('search_form');
-  let selectedFilters = [...document.querySelectorAll(
-    `input[name^="f["]${isModal ? '.modal-checkbox' : ':not(.modal-checkbox)'}:checked`
-  )];
+  let selectedFilters = getSelectedFilters(isModal);
 
   if (idToRemove) {
     selectedFilters = selectedFilters.filter(selectedFilter => selectedFilter.value !== idToRemove);
@@ -41,6 +51,7 @@ export const setupSearch = () => {
   if (orderSelect) {
     orderSelect.onchange = () => {
       orderInput.value = orderSelect.value;
+      addSelectedFiltersToForm(isModalSearch());
       searchForm.submit();
     };
   }
@@ -93,12 +104,13 @@ export const setupSearch = () => {
       const nextPage = parseInt(current_page) + 1;
       loadMoreButton.dataset.current_page = nextPage;
 
-      const url = new URL(localizations.ajaxurl);
-      url.searchParams.append('action', 'get_paged_posts');
-      url.searchParams.append('search_query', navSearchInput.value.trim());
+      const url = new URL(document.documentElement.dataset.base + '/wp-json/planet4/v1/search/');
+      url.searchParams.append('s', navSearchInput.value.trim());
       url.searchParams.append('paged', nextPage);
       url.searchParams.append('orderby', orderInput.value);
-      url.searchParams.append('query-string', decodeURIComponent(location.search).substring(1)); // Ignore the ? in the search url (first char)
+      getSelectedFilters(isModalSearch()).forEach(f => {
+        url.searchParams.append(f.name, f.value);
+      });
 
       fetch(url)
         .then(response => response.text())

functions.php

@@ -99,6 +99,7 @@ function planet4_get_option(string $key = '', $default = null)
     function (): void {
         Rest::register_endpoints();
         Api\Gallery::register_endpoint();
+        Api\Search::register_endpoint();
         Api\Settings::register_endpoint();
         Api\ENForm::register_endpoint();
     }

load-class-aliases.php

@@ -18,15 +18,13 @@ class_alias(\P4\MasterTheme\ControlPanel::class, 'P4_Control_Panel');
 class_alias(\P4\MasterTheme\Cookies::class, 'P4_Cookies');
 class_alias(\P4\MasterTheme\CustomTaxonomy::class, 'P4_Custom_Taxonomy');
 class_alias(\P4\MasterTheme\DevReport::class, 'P4_Dev_Report');
-class_alias(\P4\MasterTheme\ElasticSearch::class, 'P4_ElasticSearch');
 class_alias(\P4\MasterTheme\ImageCompression::class, 'P4_Image_Compression');
 class_alias(\P4\MasterTheme\Loader::class, 'P4_Loader');
 class_alias(\P4\MasterTheme\MetaboxRegister::class, 'P4_Metabox_Register');
 class_alias(\P4\MasterTheme\Post::class, 'P4_Post');
 class_alias(\P4\MasterTheme\PostArchive::class, 'P4_Post_Archive');
 class_alias(\P4\MasterTheme\PostCampaign::class, 'P4_Post_Campaign');
 class_alias(\P4\MasterTheme\PostReportController::class, 'P4_Post_Report_Controller');
-class_alias(\P4\MasterTheme\Search::class, 'P4_Search');
 class_alias(\P4\MasterTheme\Settings::class, 'P4_Settings');
 class_alias(\P4\MasterTheme\Sitemap::class, 'P4_Sitemap');
 class_alias(\P4\MasterTheme\User::class, 'P4_User');

search.php

@@ -2,15 +2,9 @@
 
 /**
  * Search results page
- *
- * Methods for TimberHelper can be found in the /lib sub-directory
- *
- * @package  WordPress
- * @subpackage  Timber
- * @since   Timber 0.1
  */
 
-use P4\MasterTheme\ElasticSearch;
+use P4\MasterTheme\Search\SearchPage;
 
 /**
  * Planet4 - Search functionality.
@@ -21,27 +15,6 @@
     return;
 }
 
-$selected_sort = empty($_GET['orderby'])
-                ? null : sanitize_text_field($_GET['orderby']);
-$selected_filters = $_GET['f'] ?? ''; // phpcs:ignore
-$filters = [];
-
-// Handle submitted filter options.
-if ($selected_filters && is_array($selected_filters)) {
-    foreach ($selected_filters as $type_name => $filter_type) {
-        if (! is_array($filter_type)) {
-            continue;
-        }
-        foreach ($filter_type as $name => $filter_id) {
-            $filters[ $type_name ][] = [
-                'id' => $filter_id,
-                'name' => $name,
-            ];
-        }
-    }
-}
-
-$p4_search = new ElasticSearch();
-$p4_search->load(trim(get_search_query()), $selected_sort, $filters);
-$p4_search->add_load_more();
-$p4_search->view();
+global $wp_query;
+$page = new SearchPage($wp_query);
+$page->render();

src/Api/Search.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace P4\MasterTheme\Api;
+
+use WP_Query;
+use WP_REST_Request;
+use WP_REST_Server;
+use P4\MasterTheme\Search\SearchPage;
+
+class Search
+{
+    /**
+     * @example GET /wp-json/planet4/v1/search/?s=foo
+     */
+    public static function register_endpoint(): void
+    {
+        /**
+         * Endpoint to get partial search results
+         * Rendered in HTML
+         */
+        register_rest_route(
+            'planet4/v1',
+            'search',
+            [
+                [
+                    'permission_callback' => static fn() => true,
+                    'methods' => WP_REST_Server::READABLE,
+                    'callback' => static function (WP_REST_Request $request): void {
+                        $query = new WP_Query();
+                        $query->set('ep_integrate', true);
+                        $query->query($request->get_params());
+
+                        $page = new SearchPage($query);
+                        $page->render_partial();
+                    },
+                ],
+            ]
+        );
+    }
+}