HM-62. Исправление бага при переходе между страницами (#28)

src/services/EmitService.js

@@ -8,13 +8,19 @@ class EmitService {
      */
     _events;
 
+    /**
+     * Подписки на события других Емитеров
+     */
+    _subscribes;
+
     constructor () {
         this._events = {};
+        this._subscribes = [];
     }
 
     /**
-     * Метод подписки на события компонента
-     * @param {string} eventName - событие компонента, на которое будет реагировать обработчик
+     * Метод подписки на события текущего Емитера
+     * @param {string} eventName - событие Емитера, на которое будет реагировать обработчик
      * @param {Function} listener - обработчик события
      * @example
      * // Подписка на событие
@@ -30,6 +36,16 @@ class EmitService {
         ];
     }
 
+    /**
+     * Метод отписки от события текущего Емитера
+     * @param {string} eventName - событие Емитера, от которого нужно отписатся
+     * @param {Function} listener - обработчик события, нужно передать ту же функцию, что и при добавлении
+     */
+    unsubscribe = (eventName, listener) => {
+        const listeners = this._events[eventName] || [];
+        this._events[eventName] = listeners.filter((innerListener) => innerListener !== listener);
+    }
+
     /**
      * Метод генерирует событие
      * @param {string} eventName - событие, которое необходимо сгенерировать
@@ -47,9 +63,30 @@ class EmitService {
     }
 
     /**
-     * Очищает все события и слушателей
+     * Подписка на событие другого Емитера
+     * @param {EventService} component - экземпляр Емитера на который нужно подписаться
+     * @param {string} eventName - событие на которое нужно подписаться
+     * @param {Function} listener - подписчик
+     */
+    addSubscribe = (emiter, eventName, listener) => {
+        emiter.subscribe(eventName, listener);
+        this._subscribes.push({emiter, eventName, listener});
+    }
+
+    /**
+     * Очищает все подписки на другие Емитеры
      */
     clearSubscribes = () => {
+        this._subscribes.forEach(({emiter, eventName, listener}) => {
+            emiter.unsubscribe(eventName, listener);
+        });
+        this._subscribes = [];
+    }
+
+    /**
+     * Очищает все события и слушателей
+     */
+    clearEvents = () => {
         this._events = {};
     }
 }

src/services/RouteService.js

@@ -1,6 +1,7 @@
 import EmitService from './EmitService';
 import {parse} from 'querystring';
 import {makeUrlWithQuery} from '../utils/urlUtils';
+import {EVENTS} from '../consts';
 
 /**
  * @function RouterListener
@@ -8,12 +9,6 @@ import {makeUrlWithQuery} from '../utils/urlUtils';
  * @param {Object<string, string>} query - объект ключ-значение из url
  */
 
-/**
- * Константа для события изменения роута
- * @private
- */
-const ROUTE_CHANGE = 'routeChange';
-
 /**
  * Класс для работы с роутингом. Позволяет переходить по роутам и генерит событие изменения роута.
  */
@@ -28,7 +23,19 @@ class RouteService extends EmitService {
         super();
 
         this.history = window.history;
-        this._events[ROUTE_CHANGE] = [];
+        this._events[EVENTS.ROUTE_CHANGE] = [];
+    }
+
+    _nextUrl = (url, query = {}) => {
+        const prepareQuery = Object.entries(query)
+            .reduce((memo, [key, value]) => {
+                if (value) {
+                    memo[key] = value;
+                }
+                return memo;
+            }, {});
+        const urlWithQuery = makeUrlWithQuery(url, prepareQuery);
+        this.history.pushState({}, '', urlWithQuery);
     }
 
     /**
@@ -47,7 +54,11 @@ class RouteService extends EmitService {
      * @private
      */
     generateNext = () => {
-        this.next(ROUTE_CHANGE, this.getUrlData());
+        this.next(EVENTS.ROUTE_CHANGE, this.getUrlData());
+    }
+
+    generatePushQuery = () => {
+        this.next(EVENTS.ROUTE_SEARCH_CHANGE, this.getUrlData());
     }
 
     /**
@@ -73,16 +84,8 @@ class RouteService extends EmitService {
      * });
      * // Это создаст строку в url - site.ru/users?key=testApi&author=Petrov
      */
-    goTo = (url, query = {}) => {
-        const prepareQuery = Object.entries(query)
-            .reduce((memo, [key, value]) => {
-                if (value) {
-                    memo[key] = value;
-                }
-                return memo;
-            }, {});
-        const urlWithQuery = makeUrlWithQuery(url, prepareQuery);
-        this.history.pushState({}, '', urlWithQuery);
+    goTo = (url, query) => {
+        this._nextUrl(url, query);
         this.generateNext();
     }
 
@@ -94,23 +97,11 @@ class RouteService extends EmitService {
      */
     pushQuery = (newQuery, isClear = false) => {
         const {url, query} = this.getUrlData();
-        this.goTo(url, {
+        this._nextUrl(url, {
             ...(isClear ? {} : query),
             ...newQuery,
         });
-    }
-
-    /**
-     * С помощью этого метода подписываемся на событие изменения роута.
-     * @param {RouterListener} listener - слушатель для события изменения роута
-     * @example
-     * // Подписка на изменение url
-     * _.onChange(({url, query}) => {
-     *     ...
-     * });
-     */
-    onChange = (listener) => {
-        this.subscribe(ROUTE_CHANGE, listener);
+        this.generatePushQuery();
     }
 }