Merge pull request #1765 from mozilla-services/change-search

r?fzzzy Fix #1458, trigger a search when someone changes the search form
mozilla-services · Oct 18, 2016 · ea304ed · ea304ed
2 parents 66fa62f + 12a98ed
commit ea304ed
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/docs/METRICS.md b/docs/METRICS.md
@@ -178,7 +178,8 @@ These are events that an add-on user can encounter on a shot they own
 
 1. [x] Click a tile `web/goto-shot/myshots-tile` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/023y0c2v473F3u1G051Z/Image%202016-09-07%20at%203.08.36%20PM.png?v=a4926505)
 2. [x] Click on the original link `web/goto-original-url/myshots-tile` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/261O223l0W0w2n1j3o3c/Image%202016-09-07%20at%203.09.15%20PM.png?v=add8b838)
-3. [x] Enter search term `web/search` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/1f2o092t413O0i363L3v/Image%202016-09-07%20at%203.10.06%20PM.png?v=fbcb53e5)
+3. [x] Enter search term and submit `web/search/submit` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/1f2o092t413O0i363L3v/Image%202016-09-07%20at%203.10.06%20PM.png?v=fbcb53e5)
+4. [x] Enter search term (at least 4 characters) and wait 1 second `web/search/timed`
 4. [x] Clear search term `web/clear-search/submit` and click the arrow ![image](https://d17oy1vhnax1f7.cloudfront.net/items/382R0U3J0Q3K362g3E0q/Image%202016-09-07%20at%203.11.59%20PM.png?v=c006c85a)
 4. [x] Clear search term `web/clear-search/keyboard` by simply backspacing
 5. [x] Receive no search results `web/search-no-results` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/091Z1a253a062B3R1X2c/Image%202016-09-07%20at%203.12.37%20PM.png?v=b556941e)

diff --git a/server/src/pages/shotindex/controller.js b/server/src/pages/shotindex/controller.js
@@ -48,6 +48,7 @@ function refreshModel() {
   }
   req.open("GET", url);
   req.onload = function () {
+    document.body.classList.remove("search-results-loading");
     if (req.status != 200) {
       console.warn("Error refreshing:", req.status, req);
       return;

diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js
@@ -120,7 +120,7 @@ class Body extends React.Component {
     e.preventDefault();
     let val = ReactDOM.findDOMNode(this.refs.search).value;
     if (val) {
-      sendEvent("search");
+      sendEvent("search", "submit");
     } else {
       sendEvent("clear-search", "submit");
     }
@@ -133,8 +133,28 @@ class Body extends React.Component {
     if (! val) {
       sendEvent("clear-search", "keyboard");
       controller.onChangeSearch(val);
+      return;
+    }
+    if (this._keyupTimeout) {
+      clearTimeout(this._keyupTimeout);
+      this._keyupTimeout = undefined;
+    }
+    if (val.length > 3) {
+      this._keyupTimeout = setTimeout(() => {
+        sendEvent("search", "timed");
+        controller.onChangeSearch(val);
+      }, 1000);
+    }
+  }
+
+  componentDidUpdate() {
+    if ((this.props.defaultSearch || "") !== (this.state.defaultSearch || "")) {
+      document.body.classList.add("search-results-loading");
+    } else {
+      document.body.classList.remove("search-results-loading");
     }
   }
+
 }
 
 exports.HeadFactory = React.createFactory(Head);

diff --git a/static/css/shot-index.scss b/static/css/shot-index.scss
@@ -98,6 +98,10 @@
       color: $link-blue;
     }
   }
+
+  .search-results-loading & {
+    opacity: 0.5;
+  }
 }
 
 .shot-image-container {