feat: add search results and saved searches (fix #115, fix #162)

app/Controllers/App.php

@@ -71,6 +71,19 @@ public function foundPosts()
         return $wp_query->found_posts;
     }
 
+    public function maxPages()
+    {
+        global $wp_query;
+        return $wp_query->max_num_pages;
+    }
+
+    public function currentPage()
+    {
+        global $wp_query;
+        $current_page = $wp_query->query_vars['paged'] > 1 ? $wp_query->query_vars['paged'] : 1;
+        return $current_page;
+    }
+
     public static function totalPosts($post_type = null)
     {
         if ($post_type) {
@@ -101,16 +114,18 @@ public static function title()
             return __('Latest Posts', 'coop-library');
         }
 
+        if (is_search()) {
+            return sprintf(__('Search results', 'coop-library'), get_search_query());
+        }
+
         if (is_post_type_archive('lc_resource') || is_tax()) {
             return __('Browse all', 'coop-library');
         }
 
-        if (is_search()) {
-            return sprintf(__('Search Results for %s', 'coop-library'), get_search_query());
-        }
         if (is_404()) {
             return __('Not Found', 'coop-library');
         }
+
         return get_the_title();
     }
 

app/admin.php

@@ -20,5 +20,11 @@
  * Customizer JS
  */
 add_action('customize_preview_init', function () {
-    wp_enqueue_script('sage/customizer.js', asset_path('scripts/customizer.js'), ['customize-preview'], null, true);
+    wp_enqueue_script(
+        'coop-library/customizer.js',
+        asset_path('scripts/customizer.js'),
+        ['customize-preview'],
+        null,
+        true
+    );
 });

app/setup.php

@@ -20,7 +20,8 @@
     );
     wp_localize_script('coop-library/main.js', 'CoopLibrary', [
         'ajaxurl' => admin_url('admin-ajax.php'),
-        'coop_library_nonce' => wp_create_nonce('coop-library-framework-nonce')
+        'coop_library_nonce' => wp_create_nonce('coop-library-framework-nonce'),
+        'savedSearchesLink' => get_permalink(pll_get_post(get_page_by_path('my-resources/saved-searches')->ID))
     ]);
 
     if (is_single() && comments_open() && get_option('thread_comments')) {

resources/assets/scripts/main.js

@@ -5,7 +5,8 @@ import 'wicg-inert';
 import Router from './util/Router';
 import {ready} from './util/Ready';
 import common from './routes/common';
-import pageFavorites from './routes/favorites';
+import pageTemplatePageFavorites from './routes/favorites';
+import pageTemplatePageSavedSearches from './routes/saved-searches';
 import home from './routes/home';
 import archive from './routes/archive';
 import single from './routes/single';
@@ -21,7 +22,9 @@ const routes = new Router({
   // Single resource
   single,
   // Favorites page
-  pageFavorites,
+  pageTemplatePageFavorites,
+  // Saved Searches page
+  pageTemplatePageSavedSearches,
 });
 
 // Load Events

resources/assets/scripts/routes/archive.js

@@ -1,4 +1,8 @@
+/* global CoopLibrary */
+
+import addNotification from '../util/addNotification';
 import Pinecone from '@platform-coop-toolkit/pinecone';
+import { __, sprintf } from '@wordpress/i18n';
 
 export default {
   init() {
@@ -36,6 +40,7 @@ export default {
         {
           paneSelector: '.accordion__pane',
           controlSelector: '.accordion__control',
+          headingSelector: '.accordion__heading',
         }
       );
     } );
@@ -62,6 +67,63 @@ export default {
         document.forms.filters.submit();
       };
     });
+
+    // Save search
+    const saveSearchButton = document.getElementById('save-search');
+
+    if (saveSearchButton) {
+      let savedSearches = localStorage.getItem('saved-searches');
+      savedSearches = savedSearches ? JSON.parse(savedSearches) : {};
+
+      if (Object.entries(savedSearches).length === 50) {
+        saveSearchButton.onclick = () => {
+          addNotification(
+            __('Maximum number of saved searches reached', 'coop-library'),
+            sprintf(__('You have reached the maximum amount of saved searches (50). To save more, you must <a href="%s">delete some saved searches</a>.', 'coop-library'), CoopLibrary.savedSearchesLink),
+            'error'
+          );
+        };
+      } else {
+        new Pinecone.Dialog( saveSearchButton, {
+          title: __('Save search', 'coop-library'),
+          question: __('To save your search, please give it a name so you can identify it later.', 'coop-library'),
+          input: 'name',
+          inputLabel: __('Name of saved search:', 'coop-library'),
+          confirm: __('Save', 'coop-library'),
+          dismiss: __('Don&rsquo;t save', 'coop-library'),
+          callback: function callback(input) {
+            try {
+              const tags = document.querySelectorAll('.filters input:checked');
+              let savedSearches = localStorage.getItem('saved-searches');
+              savedSearches = savedSearches ? JSON.parse(savedSearches) : {};
+              const now = Date.now();
+              const term = document.querySelector('.filters input[name="s"]').value;
+              const name = input ? input : sprintf(__('Saved search for “%s”', 'coop-library'), term);
+              const url = window.location.href;
+              const filters = [];
+              Array.prototype.forEach.call(tags, tag => {
+                const label = document.querySelector(`[for="${tag.id}"]`);
+                filters.push(label.innerText);
+              });
+              savedSearches[now] = {name, term, url, filters};
+              localStorage.setItem('saved-searches', JSON.stringify(savedSearches));
+              const remaining = 50 - Object.keys(savedSearches).length;
+              addNotification(
+                __('Search saved', 'coop-library'),
+                sprintf(
+                  __('You have successfully saved this search. You can save %d more. You can see this search in your <a href="%s">saved searches page</a>.', 'coop-library'),
+                  remaining,
+                  CoopLibrary.savedSearchesLink
+                ),
+                'success'
+              );
+            } catch(error) {
+              addNotification(__('Search not saved', 'coop-library'), __('Your search could not be saved.', 'coop-library'), 'error');
+            }
+          },
+        });
+      }
+    }
   },
   finalize() {
     // JavaScript to be fired on the home page, after the init JS

resources/assets/scripts/routes/saved-searches.js

@@ -0,0 +1,118 @@
+import addNotification from '../util/addNotification';
+import Pinecone from '@platform-coop-toolkit/pinecone';
+import { __ } from '@wordpress/i18n';
+
+export default {
+  init() {
+    // JavaScript to be fired on the Saved Searches page
+    const savedSearchContainer = document.getElementById('saved-searches');
+    let savedSearches = localStorage.getItem('saved-searches');
+    savedSearches = savedSearches ? JSON.parse(savedSearches) : {};
+    savedSearches = Object.entries(savedSearches);
+
+    if (savedSearches.length === 50) {
+      addNotification(
+        __('Maximum number of saved searches reached', 'coop-library'),
+        __('You have reached the maximum amount of saved searches (50). To save more, you must delete some saved searches.', 'coop-library'),
+        'warning'
+      );
+    }
+
+    if (savedSearches.length > 0) {
+      savedSearchContainer.previousElementSibling.removeAttribute('hidden');
+      Array.prototype.forEach.call(savedSearches, i => {
+        let [key, item] = i;
+        let tags = '';
+        let tagsList = '';
+        if (item.filters) {
+          Array.prototype.forEach.call(item.filters, tag => {
+            tags += `<span class="badge">${tag}</span>`;
+          });
+        }
+        if (tags) {
+          tagsList = `
+            <p>
+              <strong>${__('Tags', 'coop-library')}</strong>
+            </p>
+            <div class="tags">${tags}</div>
+          </div>
+          `;
+        }
+        const savedSearch = document.createElement('div');
+        savedSearch.className = 'saved-search';
+        savedSearch.innerHTML = `
+          <p class="h4"><a href="${item.url}">${item.name}</a></p>
+          <span class="disclosure-label" hidden>
+            ${__('Show details', 'coop-library')}
+          </span>
+          <div class="saved-search__details">
+          <p>
+            <strong>${__('Search term', 'coop-library')}</strong><br />
+            “${item.term}”
+          </p>
+          ${tagsList}
+          </div>
+          <div class="align-right"><button class="button button--borderless button--destructive remove-saved-search" type="button" data-key="${key}"><svg viewBox="0 0 20 20" class="icon icon--delete" xmlns="http://www.w3.org/2000/svg"><path id="delete" d="m17 4h-3a3.14 3.14 0 0 0 -3.13-3h-1.73a3.14 3.14 0 0 0 -3.14 3h-3a1 1 0 0 0 0 2h.07l.93 12.08a1 1 0 0 0 1 .92h10a1 1 0 0 0 1-.92l.93-12.08h.07a1 1 0 0 0 0-2zm-7.86-1h1.72a1.12 1.12 0 0 1 1.14 1h-4a1.12 1.12 0 0 1 1.14-1zm4.93 14h-8.14l-.85-11h9.84z" fill="currentColor"/></svg> ${__('Remove', 'coop-library')}</button></div>
+        `;
+
+        savedSearchContainer.appendChild(savedSearch);
+
+        const disclosureLabels = document.querySelectorAll( '.disclosure-label' );
+
+        if ( disclosureLabels ) {
+          Array.prototype.forEach.call( disclosureLabels, label => {
+            new Pinecone.DisclosureButton( label );
+          } );
+        }
+      });
+    }
+    const removeAllButton = document.getElementById('remove-all');
+    if(removeAllButton) {
+      new Pinecone.Dialog( removeAllButton, {
+        title: __('Confirm remove saved searches', 'coop-library'),
+        question: __('Are you sure you want to remove all of your saved searches?', 'coop-library'),
+        confirm: __('Yes, remove', 'coop-library'),
+        dismiss: __('No, don&rsquo;t remove', 'coop-library'),
+        callback: function callback() {
+          try {
+            localStorage.setItem('saved-searches', '');
+            savedSearchContainer.innerHTML = '';
+            removeAllButton.parentNode.removeChild(removeAllButton);
+            addNotification(__('Saved searches removed', 'coop-library'), __('Your saved searches have been removed.', 'coop-library'), 'success');
+          } catch(error) {
+            addNotification(__('Saved searches not removed', 'coop-library'), __('Your saved searches could not be removed.', 'coop-library'), 'error');
+          }
+        },
+      });
+    }
+    const removeButtons = document.querySelectorAll('.remove-saved-search');
+    Array.prototype.forEach.call(removeButtons, removeButton => {
+      new Pinecone.Dialog( removeButton, {
+        title: __('Confirm remove saved search', 'coop-library'),
+        question: __('Are you sure you want to remove this saved search?', 'coop-library'),
+        confirm: __('Yes, remove', 'coop-library'),
+        dismiss: __('No, don&rsquo;t remove', 'coop-library'),
+        callback: function callback() {
+          try {
+            const length = document.querySelectorAll('.saved-search').length;
+            const key = event.target.dataset.key;
+            let savedSearches = localStorage.getItem('saved-searches');
+            savedSearches = savedSearches ? JSON.parse(savedSearches) : {};
+            delete savedSearches[key];
+            localStorage.setItem('saved-searches', JSON.stringify(savedSearches));
+            removeButton.parentNode.parentNode.parentNode.removeChild(removeButton.parentNode.parentNode);
+            if (length === 1) {
+              removeAllButton.parentNode.removeChild(removeAllButton);
+            }
+            addNotification(__('Saved search removed', 'coop-library'), __('Your saved search has been removed.', 'coop-library'), 'success');
+          } catch(error) {
+            addNotification(__('Saved search not removed', 'coop-library'), __('Your saved search could not be removed', 'coop-library'), 'error');
+          }
+        },
+      });
+    });
+  },
+  finalize() {
+    // JavaScript to be fired on the Saved Searches page, after the init JS
+  },
+};