Extract navigate mixin (#1865)

* Extract navigate to function

* Remove eventsmixin properly and side effects

src/common/navigate.ts

@@ -0,0 +1,14 @@
+import { fireEvent } from "./dom/fire_event.js";
+
+export const navigate = (
+  node: HTMLElement,
+  path: string,
+  replace: boolean = false
+) => {
+  if (replace) {
+    history.replaceState(null, "", path);
+  } else {
+    history.pushState(null, "", path);
+  }
+  fireEvent(node, "location-changed");
+};

src/mixins/navigate-mixin.js

@@ -1,5 +1,5 @@
 import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
-import EventsMixin from "./events-mixin";
+import { navigate } from "../common/navigate";
 
 /*
  * @polymerMixin
@@ -7,14 +7,9 @@ import EventsMixin from "./events-mixin";
  */
 export default dedupingMixin(
   (superClass) =>
-    class extends EventsMixin(superClass) {
+    class extends superClass {
-      navigate(path, replace = false) {
+      navigate(...args) {
-        if (replace) {
+        navigate(this, ...args);
-          history.replaceState(null, null, path);
-        } else {
-          history.pushState(null, null, path);
-        }
-        this.fire("location-changed");
       }
     }
 );

src/panels/config/dashboard/ha-config-dashboard.js

@@ -52,7 +52,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
           <template is="dom-if" if="[[computeIsLoaded(hass, 'cloud')]]">
             <paper-card>
               <a href='/config/cloud' tabindex="-1">
-                <paper-item on-click="_navigate">
+                <paper-item>
                   <paper-item-body two-line="">
                     [[localize('ui.panel.config.cloud.caption')]]
                     <template is="dom-if" if="[[cloudStatus.logged_in]]">

src/panels/config/users/ha-config-users.js

@@ -8,6 +8,7 @@ import NavigateMixin from "../../../mixins/navigate-mixin.js";
 
 import "./ha-user-picker.js";
 import "./ha-user-editor.js";
+import { fireEvent } from "../../../common/dom/fire_event.js";
 
 /*
  * @appliesMixin NavigateMixin
@@ -68,8 +69,8 @@ class HaConfigUsers extends NavigateMixin(PolymerElement) {
   _checkRoute(route) {
     if (!route || route.path.substr(0, 6) !== "/users") return;
 
-    // prevent list gettung under toolbar
+    // prevent list getting under toolbar
-    this.fire("iron-resize");
+    fireEvent(this, "iron-resize");
 
     this._debouncer = Debouncer.debounce(
       this._debouncer,