MD Bookmarks: Update URL router to work in new data binding system

chrome/browser/resources/md_bookmarks/router.js

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 Polymer({
   /**
    * This element is a one way bound interface that routes the page URL to
    * the searchTerm and selectedId. Clients must initialize themselves by
    * reading the router's fields after attach.
    */
   is: 'bookmarks-router',
 
+  behaviors: [
+    bookmarks.StoreClient,
+  ],
+
   properties: {
-    // Parameter q is routed to the searchTerm.
-    // Parameter id is routed to the selectedId.
+    /**
+     * Parameter q is routed to the searchTerm.
+     * Parameter id is routed to the selectedId.
+     * @private
+     */
     queryParams_: Object,
 
-    searchTerm: {
-      type: String,
-      observer: 'onSearchTermChanged_',
-    },
+    /** @private */
+    searchTerm_: String,
 
-    /** @type {?string} */
-    selectedId: {
-      type: String,
-      observer: 'onSelectedIdChanged_',
-    },
+    /** @private {?string} */
+    selectedId_: String,
   },
 
   observers: [
-    'onQueryChanged_(queryParams_.*)',
+    'onQueryChanged_(queryParams_.q)',
+    'onFolderChanged_(queryParams_.id)',
+    'onStateChanged_(searchTerm_, selectedId_)',
   ],
 
+  attached: function() {
+    this.watch('selectedId_', function(state) {
+      return state.selectedFolder;
+    });
+    this.watch('searchTerm_', function(state) {
+      return state.search.term;
+    });
+  },
+
   /** @private */
   onQueryChanged_: function() {
-    this.searchTerm = this.queryParams_.q || '';
-    this.selectedId = this.queryParams_.id;
-
-    if (this.searchTerm)
-      this.fire('search-term-changed', this.searchTerm);
-    else
-      this.fire('selected-folder-changed', this.selectedId);
+    var searchTerm = this.queryParams_.q || '';
+    if (searchTerm && searchTerm != this.searchTerm_) {
+      this.searchTerm_ = searchTerm;
+      this.dispatch(bookmarks.actions.setSearchTerm(searchTerm));
+    }
   },
 
   /** @private */
-  onSelectedIdChanged_: function() {
-    this.set('queryParams_.id', this.selectedId || null);
+  onFolderChanged_: function() {
+    var selectedId = this.queryParams_.id;
+    if (selectedId && selectedId != this.selectedId_) {
+      this.selectedId_ = selectedId;
+      this.dispatch(bookmarks.actions.selectFolder(selectedId));
+    }
   },
 
   /** @private */
-  onSearchTermChanged_: function() {
-    this.set('queryParams_.q', this.searchTerm || null);
+  onStateChanged_: function() {
+    this.debounce('updateQueryParams', this.updateQueryParams_.bind(this));
+  },
+
+  /** @private */
+  updateQueryParams_: function() {
+    if (this.searchTerm_)
+      this.queryParams_ = {q: this.searchTerm_};
+    else
+      this.queryParams_ = {id: this.selectedId_};
   },
 });