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

src/components/component/Component.js

@@ -12,6 +12,12 @@ class Component extends EmitService {
      */
     _listeners;
 
+    /**
+     * Отображает текущее состояние компонента жив он или мертв
+     * @type {Boolean} - текущее состояние компонента
+     */
+    _isAlive;
+
     /**
      * Корневой элемент компонента
      * @type {Node} - корневой элемент компонента
@@ -31,6 +37,7 @@ class Component extends EmitService {
         }
         this._listeners = [];
         this._events = {};
+        this._isAlive = true;
     }
 
     /**
@@ -51,16 +58,28 @@ class Component extends EmitService {
         this._listeners.forEach(({element, eventName, listener}) => {
             element.removeEventListener(eventName, listener);
         });
+        this._listeners = [];
+    }
+
+    /**
+     * Позволяет запускать рендер только в том случае, если компонент жив
+     * @param {Function} renderFunction - функция рендера
+     */
+    render (renderFunction) {
+        if (this._isAlive) {
+            renderFunction();
+        }
     }
 
     /**
      * Метод уничтожения компонента. Удаляет элемент из верстки, снимает обработчики и очищает подписки
      */
     destroy = () => {
+        this._isAlive = false;
         this.clearListeners();
-        this.mainNode.remove();
-        this._listeners = [];
         this.clearSubscribes();
+        this.clearEvents();
+        this.mainNode.remove();
     }
 }
 

src/components/logs-page/LogsPage.js

@@ -5,7 +5,7 @@ import Pagination from '../pagination';
 import LogsFilters from '../logs-filters';
 import routeService from '../../services/RouteService';
 import {prepareToNumber} from '../../utils/urlUtils';
-import {LOG_TYPE, LOG_COLS} from '../../consts';
+import {LOG_TYPE, LOG_COLS, EVENTS} from '../../consts';
 import {createElement, markText} from '../../utils/elementUtils';
 
 const ELEMENTS_ON_PAGE = 15;
@@ -36,16 +36,19 @@ class LogsPage extends Component {
 
         this.pagination = new Pagination(this.footer);
 
-        routeService.onChange(this.renderTable);
+        this.logList = {
+            [LOG_TYPE.SERVER]: [],
+            [LOG_TYPE.CLIENT]: [],
+        };
+
+        this.addSubscribe(routeService, EVENTS.ROUTE_SEARCH_CHANGE, this.renderTable);
 
         this.initPage();
     }
 
     initPage = async () => {
-        this.logList = {
-            [LOG_TYPE.SERVER]: await storageLogsApi.requestServerLogs(),
-            [LOG_TYPE.CLIENT]: await storageLogsApi.requestClientLogs(),
-        };
+        this.logList[LOG_TYPE.SERVER] = await storageLogsApi.requestServerLogs();
+        this.logList[LOG_TYPE.CLIENT] = await storageLogsApi.requestClientLogs();
         this.renderTable();
     }
 
@@ -84,14 +87,16 @@ class LogsPage extends Component {
     }
 
     renderTable = () => {
-        const {query} = routeService.getUrlData();
-        const {tableType, ...omitQuery} = query;
-        this.table?.mainNode?.remove();
-        this.table = this.tables[tableType];
-        this.body.appendChild(this.table.mainNode);
-        const filteredRows = this.filterRows(this.logList[tableType], omitQuery);
-        const rows = this.cutPagginationPage(filteredRows, query.pageNumber);
-        this.table.render(rows);
+        this.render(() => {
+            const {query} = routeService.getUrlData();
+            const {tableType, ...omitQuery} = query;
+            this.table?.mainNode?.remove();
+            this.table = this.tables[tableType];
+            this.body.appendChild(this.table.mainNode);
+            const filteredRows = this.filterRows(this.logList[tableType], omitQuery);
+            const rows = this.cutPagginationPage(filteredRows, query.pageNumber);
+            this.table.render(rows);
+        });
     }
 }
 

src/components/pagination/Pagination.js

@@ -2,12 +2,11 @@ import Component from '../component/index';
 import routeService from '../../services/RouteService';
 import {createElement} from '../../utils/elementUtils';
 import {prepareToNumber} from '../../utils/urlUtils';
+import {EVENTS} from '../../consts';
 
 const LEFT_ICON = '«';
 const RIGHT_ICON = '»';
 
-const CHAGE_PAGE = 'changePage';
-
 class Pagination extends Component {
     buttons = [];
 
@@ -19,9 +18,7 @@ class Pagination extends Component {
 
         this.container = this.mainNode.querySelector('.pagination');
 
-        routeService.onChange(() => {
-            this.renderButtons();
-        });
+        this.addSubscribe(routeService, EVENTS.ROUTE_SEARCH_CHANGE, this.renderButtons);
     }
 
     renderOneButton = (text, isDisabled = false) => {
@@ -99,12 +96,6 @@ class Pagination extends Component {
         }
 
         this.renderOneButton(RIGHT_ICON, this.currentPage >= this.countPages);
-
-        this.next(CHAGE_PAGE, this.currentPage);
-    }
-
-    onPageChange = (listener) => {
-        this.subscribe(CHAGE_PAGE, listener);
     }
 }
 

src/components/router-pages-container/RouterPagesContainer.js

@@ -3,6 +3,7 @@ import routeService from '../../services/RouteService';
 import NotFoundPage from '../not-found-page';
 
 import './RouterPagesContainer.css';
+import {EVENTS} from '../../consts';
 
 /**
  * @interface Route
@@ -35,7 +36,7 @@ class RouterPagesContainer extends Component {
     constructor () {
         super('#page-container', document.body);
 
-        routeService.onChange(({url}) => {
+        this.addSubscribe(routeService, EVENTS.ROUTE_CHANGE, ({url}) => {
             // Если под указанный url нет pageComponent, то будет испольщована страница NotFound
             const {pageComponent: PageComponent = NotFoundPage} = this.routes.find((route) => {
                 return route.url === url;
@@ -52,7 +53,6 @@ class RouterPagesContainer extends Component {
                 this.currentPage = new PageComponent('#page', this.mainNode);
             }
         });
-
     }
 
     /**