HM-31. Добавлен роутинг для страниц (#9)

src/components/api-page/ApiPage.js

@@ -0,0 +1,19 @@
+import Component from '../component/index';
+import TableComponent from '../table-component';
+import storageApi from '../../api/StorageServiceAPI';
+
+class ApiPage extends Component {
+    constructor (mainNodeSelector, parentNode) {
+        super(mainNodeSelector, parentNode);
+
+        const initStorageListTable = async () => {
+            const list = await storageApi.request();
+            const storageListTable = new TableComponent(this.mainNode);
+            return storageListTable.render(list);
+        };
+
+        initStorageListTable();
+    }
+}
+
+export default ApiPage;

src/components/api-page/index.js

@@ -0,0 +1,3 @@
+import ApiPage from './ApiPage';
+
+export default ApiPage;

src/components/component/Component.js

@@ -1,21 +1,17 @@
+import EmitService from '../../services/EmitService';
+
 /**
  * Класс для создания компонентов приложения. Необходим для наследования.
  * @param {string} mainNodeSelector - селектор, с помощью которого извлекается шаблон компонента
  * @param {Node} parentNode - родительский Node, в который следует положить созданный элемент
  */
-class Component {
+class Component extends EmitService {
     /**
      * Список слушателей компонента
      * @type {{element: Node, eventName: string, listener: Function}[]}
      */
     _listeners;
 
-    /**
-     * События компонента
-     * @type {Object<string, Function[]>}
-     */
-    _events;
-
     /**
      * Корневой элемент компонента
      * @type {Node} - корневой элемент компонента
@@ -23,6 +19,7 @@ class Component {
     mainNode;
 
     constructor (mainNodeSelector, parentNode) {
+        super();
         const content = document.querySelector(mainNodeSelector).content;
         if (content.children.length > 1) {
             const message = '<template> должен содержать только один элемент children';
@@ -45,31 +42,6 @@ class Component {
         this._listeners.push({element, eventName, listener});
     }
 
-    /**
-     * Метод подписки на события компонента
-     * @param {string} eventName - событие компонента, на которое будет реагировать обработчик
-     * @param {Function} listener - обработчик события
-     */
-    subscribe = (eventName, listener) => {
-        const listeners = this._events[eventName] || [];
-        this._events[eventName] = [
-            ...listeners,
-            listener,
-        ];
-    }
-
-    /**
-     * Метод генерирует событие
-     * @param {string} eventName - событие, которое необходимо сгенерировать
-     * @param  {unknown[]} args - аругемнты, который необходимо передать обработчикам события
-     */
-    next = (eventName, ...args) => {
-        const listeners = this._events[eventName];
-        listeners.forEach((listener) => {
-            listener(...args);
-        });
-    }
-
     /**
      * Метод уничтожения компонента. Удаляет элемент из верстки, снимает обработчики и очищает подписки
      */
@@ -79,7 +51,7 @@ class Component {
         });
         this.mainNode.remove();
         this._listeners = [];
-        this._events = {};
+        this.clearSubscribes();
     }
 }
 

src/components/main-page/MainPage.js

@@ -0,0 +1,11 @@
+import Component from '../component/index';
+
+class MainPage extends Component {
+    constructor (mainNodeSelector, parentNode) {
+        super(mainNodeSelector, parentNode);
+
+        this.mainNode.textContent = 'Главная страница';
+    }
+}
+
+export default MainPage;

src/components/main-page/index.js

@@ -0,0 +1,3 @@
+import MainPage from './MainPage';
+
+export default MainPage;

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

@@ -0,0 +1,3 @@
+html, body, .PageContainer, .Page {
+    height: 100%;
+}

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

@@ -0,0 +1,35 @@
+import Component from '../component/index';
+import routeService from '../../services/RouteService';
+
+import './RouterPagesContainer.css';
+
+class RouterPagesContainer extends Component {
+    routes = [];
+
+    currentPage;
+
+    constructor () {
+        super('#page-container', document.body);
+
+        routeService.onChange(({url}) => {
+            const {pageComponent: PageComponent} = this.routes.find((route) => {
+                return route.url === url;
+            }) || {};
+
+            if (this.currentPage) {
+                this.currentPage.destroy();
+            }
+
+            if (PageComponent) {
+                this.currentPage = new PageComponent('#page', this.mainNode);
+            }
+        });
+
+    }
+
+    addRoutes = (routes) => {
+        this.routes = this.routes.concat(routes);
+    }
+}
+
+export default RouterPagesContainer;

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

@@ -0,0 +1,5 @@
+import RouterPagesContainer from './RouterPagesContainer';
+
+const routerPagesContainer = new RouterPagesContainer();
+
+export default routerPagesContainer;

src/components/table-component/TableComponent.js

@@ -5,8 +5,8 @@ import TableColumnComponent from '../table-column-component/index';
 import TableRowComponent from '../table-row-component/TableRowComponent';
 
 class TableComponent extends Component {
-    constructor () {
-        super('#main-table', document.body);
+    constructor (parentNode) {
+        super('#main-table', parentNode);
 
         this.tableHead = this.mainNode.querySelector('.Table__head');
         this.tableBody = this.mainNode.querySelector('.Table__body');