From 25a65253dd87a341153e486d244b706ed87f0e69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sergio=20Mart=C3=ADnez=20Portela?=
 <sergio@codigoparallevar.com>
Date: Wed, 26 Oct 2022 22:42:24 +0200
Subject: [PATCH] Show message when no results are found on search.

Also, lower debounce time to 250ms.
---
 static/search-box.js | 13 ++++++++++++-
 static/style.css     |  8 ++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/static/search-box.js b/static/search-box.js
index 50b11c5..c661ede 100644
--- a/static/search-box.js
+++ b/static/search-box.js
@@ -19,6 +19,11 @@ function _codigoparallevar_enable_search_box(selector, options) {
     const resultsList = document.createElement('ul');
     resultsBox.appendChild(resultsList);
 
+    const noResultsBox = document.createElement('div');
+    noResultsBox.setAttribute('class', 'no-results-box hidden');
+    noResultsBox.innerText = 'No results 🤷';
+    resultsBox.appendChild(noResultsBox);
+
     resultsBoxBackdrop.appendChild(resultsBox);
     document.body.appendChild(resultsBoxBackdrop);
 
@@ -45,7 +50,7 @@ function _codigoparallevar_enable_search_box(selector, options) {
         };
     };
 
-    const DEBOUNCE_TIME = 500; // Milliseconds
+    const DEBOUNCE_TIME = 250; // Milliseconds
     const MIN_LENGTH = 3;
     const SEARCH_ENDPOINT = (window.location.host.startsWith('localhost')
                              ? 'http://localhost:3001/api/search'
@@ -92,6 +97,12 @@ function _codigoparallevar_enable_search_box(selector, options) {
                     resultCard.appendChild(resultContents);
                     resultsList.appendChild(resultCard);
                 }
+                if (body.results.notes.length == 0) {
+                    noResultsBox.classList.remove('hidden');
+                }
+                else {
+                    noResultsBox.classList.add('hidden');
+                }
             });
     };
     element.removeAttribute('disabled');
diff --git a/static/style.css b/static/style.css
index ba2d073..5e631e6 100644
--- a/static/style.css
+++ b/static/style.css
@@ -81,6 +81,14 @@ body nav input {
     margin: 0;
 }
 
+.no-results-box {
+    padding: 1rem;
+}
+
+.no-results-box.hidden {
+    display: none;
+}
+
 @font-face {
     font-family: "Atkinson Hyperlegible";
     src: url('./fonts/atkinson-hyperlegible/eot/Atkinson-Hyperlegible-Regular-102.eot');