From 94d1c53933dca4290ede48cff2b2e19ec14b0b5b Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Mon, 29 Oct 2018 23:22:47 -0700
Subject: [PATCH] allow search clear

---
 src/components/search.js |  8 ++---
 src/state/index.js       |  2 ++
 src/templates/menu.html  | 64 +++++++++++++++++++++++-----------------
 3 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/src/components/search.js b/src/components/search.js
index fdde03a..e260390 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -10,7 +10,7 @@ var algolia = client.initIndex('supersaber');
  */
 AFRAME.registerComponent('search', {
   init: function () {
-    this.eventDetail = {results: []};
+    this.eventDetail = {query: '', results: []};
     this.popularHits = null;
     this.queryObject = {hitsPerPage: 100, query: ''};
 
@@ -20,9 +20,7 @@ AFRAME.registerComponent('search', {
     // Less hits on normal searches.
     this.queryObject.hitsPerPage = 30;
 
-    this.el.sceneEl.addEventListener('genreclear', () => {
-      this.search('');
-    });
+    this.el.sceneEl.addEventListener('searchclear', () => { this.search(''); });
   },
 
   superkeyboardchange: bindEvent(function (evt) {
@@ -33,10 +31,12 @@ AFRAME.registerComponent('search', {
     // Use cached for popular hits.
     if (!query && this.popularHits) {
       this.eventDetail.results = this.popularHits;
+      this.eventDetail.query = '';
       this.el.sceneEl.emit('searchresults', this.eventDetail);
       return;
     }
 
+    this.eventDetail.query = query;
     this.queryObject.query = query;
     algolia.search(this.queryObject, (err, content) => {
       // Cache popular hits.
diff --git a/src/state/index.js b/src/state/index.js
index 64ef649..f26336d 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -93,6 +93,7 @@ AFRAME.registerState({
       hasError: false,
       hasNext: false,
       hasPrev: false,
+      query: '',
       results: [],
       songNameTexts: '',  // All names in search results merged together.
       songSubNameTexts: ''  // All sub names in search results merged together.
@@ -322,6 +323,7 @@ AFRAME.registerState({
       var i;
       state.search.hasError = false;
       state.search.page = 0;
+      state.search.query = payload.query;
       state.search.results = payload.results;
       for (i = 0; i < payload.results.length; i++) {
         let result = payload.results[i];
diff --git a/src/templates/menu.html b/src/templates/menu.html
index 71db66c..895ba80 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -251,10 +251,10 @@
   </a-entity>
 
   <a-entity
-    id="genreText"
+    id="searchQuery"
     mixin="font"
-    bind__text-uppercase="value: genre"
-    bind__visible="!!genre"
+    bind__text-uppercase="value: genre || search.query"
+    bind__visible="!!genre || !!search.query && !isSearching"
     text="align: center; color: #FAFAFA; wrapCount: 20"
     position="0 0.8 0.01"></a-entity>
 
@@ -319,25 +319,26 @@
   animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150">
 </a-mixin>
 
-<a-entity id="genreButton"
-  mixin="bigMenuButton"
-  bind-toggle__raycastable="menuActive && !genreMenuOpen && !isSearching && !genre"
-  bind__visible="menuActive && !genreMenuOpen && !isSearching && !genre"
-  position="-0.55 0.2 -1.9"
-  proxy-event="event: click; to: a-scene; as: genremenuopen">
-  <a-entity mixin="font" text="align: center; color: #AAA; wrapCount: 20; value: BROWSE GENRES" position="0 -0.07 0.01"></a-entity>
+<a-entity id="genreButtons" position="-0.55 0.2 -1.9">
+  <a-entity id="genreButton"
+    mixin="bigMenuButton"
+    bind-toggle__raycastable="menuActive && !genreMenuOpen && !isSearching && !genre"
+    bind__visible="menuActive && !genreMenuOpen && !isSearching && !genre"
+    proxy-event="event: click; to: a-scene; as: genremenuopen">
+    <a-entity mixin="font" text="align: center; color: #AAA; wrapCount: 20; value: BROWSE GENRES" position="0 -0.07 0.01"></a-entity>
+  </a-entity>
+
+  <a-entity id="clearGenreButton"
+    mixin="bigMenuButton"
+    bind-toggle__raycastable="!!genre"
+    bind__visible="!!genre"
+    proxy-event="event: click; to: a-scene; as: searchclear">
+    <a-entity mixin="font" text="align: center; color: #AAA; wrapCount: 20; value: CLEAR GENRE" position="0 -0.07 0.01"></a-entity>
+  </a-entity>
 </a-entity>
 
-<a-entity id="clearGenreButton"
-  mixin="bigMenuButton"
-  bind-toggle__raycastable="!!genre"
-  bind__visible="!!genre"
-  position="-0.55 0.2 -1.9"
-  proxy-event="event: click; to: a-scene; as: genreclear">
-  <a-entity mixin="font" text="align: center; color: #AAA; wrapCount: 20; value: CLEAR GENRE" position="0 -0.07 0.01"></a-entity>
-</a-entity>
-
-<a-entity id="backButton"
+<a-entity
+  id="backButton"
   mixin="bigMenuButton"
   bind-toggle__raycastable="genreMenuOpen"
   bind__visible="genreMenuOpen"
@@ -346,11 +347,20 @@
   <a-entity mixin="font" text="align: center; color: #AAA; wrapCount: 20; value: BACK" position="0 -0.07 0.01"></a-entity>
 </a-entity>
 
-<a-entity id="searchButton"
-  mixin="bigMenuButton"
-  position="0.55 0.2 -1.9"
-  bind-toggle__raycastable="menuActive && !genreMenuOpen && !isSearching"
-  bind__visible="menuActive && !genreMenuOpen && !isSearching"
-  proxy-event="event: click; to: a-scene; as: keyboardopen">
-  <a-entity mixin="font" text="align: center; color: #AAA; wrapCount: 20; value: SEARCH SONGS" position="0 -0.07 0.01"></a-entity>
+<a-entity id="searchButtons" position="0.55 0.2 -1.9">
+  <a-entity id="searchButton"
+    mixin="bigMenuButton"
+    bind-toggle__raycastable="menuActive && !genreMenuOpen && !isSearching && !search.query"
+    bind__visible="menuActive && !genreMenuOpen && !isSearching && !search.query"
+    proxy-event="event: click; to: a-scene; as: keyboardopen">
+    <a-entity mixin="font" text="align: center; color: #AAA; wrapCount: 20; value: SEARCH SONGS" position="0 -0.07 0.01"></a-entity>
+  </a-entity>
+
+  <a-entity id="searchClearButton"
+    mixin="bigMenuButton"
+    bind-toggle__raycastable="menuActive && !!search.query && !isSearching"
+    bind__visible="menuActive && !!search.query && !isSearching"
+    proxy-event="event: click; to: a-scene; as: searchclear">
+    <a-entity mixin="font" text="align: center; color: #AAA; wrapCount: 20; value: CLEAR SEARCH" position="0 -0.07 0.01"></a-entity>
+  </a-entity>
 </a-entity>