Instead of using search.query use store directly

Previously a search object was built inside the hypothesis-app
component and passed down to its child components. Now, just use
the store.getState().filterQuery directly. This avoids unnecessarily
passing things between components and a layer of indirection between
the search object and the value in the store. Rename searchQuery to
filterQuery.

src/sidebar/components/search-status-bar.js

@@ -37,15 +37,21 @@ function SearchStatusBarController(store, rootThread) {
     }
     return Object.keys(selection).length > 0;
   };
+
+  this.filterQuery = function() {
+    return store.getState().filterQuery;
+  };
+
+  this.filterActive = function() {
+    return !!store.getState().filterQuery;
+  };
 }
 
 module.exports = {
   controller: SearchStatusBarController,
   controllerAs: 'vm',
   bindings: {
-    filterActive: '<',
     onClearSelection: '&',
-    searchQuery: '<',
     selectedTab: '<',
     totalAnnotations: '<',
     totalNotes: '<',

src/sidebar/components/sidebar-content.js

@@ -264,7 +264,7 @@ function SidebarContentController(
     if (
       this.selectedAnnotationUnavailable() ||
       this.selectedGroupUnavailable() ||
-      this.search.query()
+      store.getState().filterQuery
     ) {
       return false;
     }
@@ -337,7 +337,6 @@ module.exports = {
   controllerAs: 'vm',
   bindings: {
     auth: '<',
-    search: '<',
     onLogin: '&',
   },
   template: require('../templates/sidebar-content.html'),

src/sidebar/components/test/search-status-bar-test.js

@@ -31,6 +31,39 @@ describe('searchStatusBar', () => {
     });
   });
 
+  describe('filterQuery', () => {
+    ['tag:foo', null].forEach(filterQuery => {
+      it('returns the `filterQuery`', () => {
+        fakeStore.getState.returns({ filterQuery });
+
+        const elem = util.createDirective(document, 'searchStatusBar', {});
+        const ctrl = elem.ctrl;
+
+        assert.equal(ctrl.filterQuery(), filterQuery);
+      });
+    });
+  });
+
+  describe('filterActive', () => {
+    it('returns true if there is a `filterQuery`', () => {
+      fakeStore.getState.returns({ filterQuery: 'tag:foo' });
+
+      const elem = util.createDirective(document, 'searchStatusBar', {});
+      const ctrl = elem.ctrl;
+
+      assert.isTrue(ctrl.filterActive());
+    });
+
+    it('returns false if `filterQuery` is null', () => {
+      fakeStore.getState.returns({ filterQuery: null });
+
+      const elem = util.createDirective(document, 'searchStatusBar', {});
+      const ctrl = elem.ctrl;
+
+      assert.isFalse(ctrl.filterActive());
+    });
+  });
+
   describe('filterMatchCount', () => {
     it('returns the total number of visible annotations or replies', () => {
       fakeRootThread.thread.returns({
@@ -47,10 +80,11 @@ describe('searchStatusBar', () => {
           },
         ],
       });
-
-      const elem = util.createDirective(document, 'searchStatusBar', {
-        filterActive: true,
+      fakeStore.getState.returns({
+        filterQuery: 'tag:foo',
       });
+
+      const elem = util.createDirective(document, 'searchStatusBar', {});
       const ctrl = elem.ctrl;
 
       assert.equal(ctrl.filterMatchCount(), 2);
@@ -121,9 +155,11 @@ describe('searchStatusBar', () => {
         ],
       });
 
-      const elem = util.createDirective(document, 'searchStatusBar', {
-        filterActive: true,
+      fakeStore.getState.returns({
+        filterQuery: 'tag:foo',
       });
+
+      const elem = util.createDirective(document, 'searchStatusBar', {});
       assert.include(elem[0].textContent, '2 search results');
     });
   });

src/sidebar/components/test/sidebar-content-test.js

@@ -231,11 +231,10 @@ describe('sidebar.components.sidebar-content', function() {
   describe('showSelectedTabs', () => {
     beforeEach(() => {
       setFrames([{ uri: 'http://www.example.com' }]);
-      ctrl.search = { query: sinon.stub().returns(undefined) };
     });
 
     it('returns false if there is a search query', () => {
-      ctrl.search = { query: sinon.stub().returns('tag:foo') };
+      store.setFilterQuery('tag:foo');
       assert.isFalse(ctrl.showSelectedTabs());
     });
 

src/sidebar/index.js

@@ -91,7 +91,7 @@ function configureRoutes($routeProvider) {
   });
   $routeProvider.otherwise({
     template:
-      '<sidebar-content search="vm.search" auth="vm.auth" on-login="vm.login()"></sidebar-content>',
+      '<sidebar-content auth="vm.auth" on-login="vm.login()"></sidebar-content>',
     reloadOnSearch: false,
     resolve: resolve,
   });

src/sidebar/templates/search-status-bar.html

-<div class="search-status-bar" ng-if="vm.filterActive">
+<div class="search-status-bar" ng-if="vm.filterActive()">
   <button class="primary-action-btn primary-action-btn--short"
           ng-click="vm.onClearSelection()"
           title="Clear the search filter and show all annotations"
@@ -7,11 +7,11 @@
   </button>
   <span ng-pluralize
            count="vm.filterMatchCount()"
-           when="{'0': 'No results for “{{vm.searchQuery}}”',
+           when="{'0': 'No results for “{{vm.filterQuery()}}”',
                   'one': '1 search result',
                   'other': '{} search results'}"></span>
 </div>
-<div class="search-status-bar" ng-if="!vm.filterActive && vm.areAllAnnotationsVisible()">
+<div class="search-status-bar" ng-if="!vm.filterActive() && vm.areAllAnnotationsVisible()">
   <button class="primary-action-btn primary-action-btn--short"
           ng-click="vm.onClearSelection()"
           title="Clear the selection and show all annotations">

src/sidebar/templates/sidebar-content.html

@@ -10,9 +10,7 @@
 
 <search-status-bar
   ng-show="!vm.isLoading()"
-  filter-active="!!vm.search.query()"
   on-clear-selection="vm.clearSelection()"
-  search-query="vm.search.query()"
   selected-tab="vm.selectedTab"
   total-annotations="vm.totalAnnotations"
   total-notes="vm.totalNotes">