HM-92 Добавил рендер страницы после создания апи и добавил отображение текста ошибки (#35)

src/app.html

@@ -331,6 +331,7 @@
                 <code contenteditable class="Create__editor"></code>
             </div>
             <div class="Create__footer">
+                <div class="Create__error-container"></div>
             </div>
         </div>
     </template>

src/components/api-page/ApiPage.js

@@ -3,6 +3,8 @@ import TableComponent from '../table-component';
 import storageApi from '../../api/StorageServiceAPI';
 import FilterApiComponent from '../search-component/index';
 import ApiInfoComponent from '../api-info-component/index';
+import CreateApiComponent from '../create-api-component/index';
+import ButtonComponent from '../button-component/ButtonComponent';
 
 class ApiPage extends Component {
     constructor (mainNodeSelector, parentNode) {
@@ -11,10 +13,19 @@ class ApiPage extends Component {
         this.filterBox = new FilterApiComponent(this.mainNode);
         this.storageListTable = new TableComponent(this.mainNode);
         this.infoBox = new ApiInfoComponent();
+        this.createWindow = new CreateApiComponent();
         this.addSubscribe(this.storageListTable, 'showInfo', (obj) => {
             this.infoBox.render(obj);
         });
 
+        this.createBtn = new ButtonComponent(this.filterBox.filterButtonBox, '✚', 'btn btn-primary mb-3 Create__btn');
+        this.addSubscribe(this.createBtn, 'click', () => {
+            this.createWindow.show();
+        });
+        this.addSubscribe(this.createWindow, 'renderTable', () => {
+            this.initStorageListTable();
+        });
+
         this.initStorageListTable();
 
         this.addSubscribe(this.infoBox, 'deleteApi', () => {

src/components/create-api-component/CreateApiComponent.css

@@ -14,10 +14,25 @@
 .Create__title {
     text-align: center;
 }
+.Create__send {
+    align-self: flex-end;
+}
 .Create__sidebar {
     width: 30%;
     overflow-y: auto;
 }
+.Create__footer {
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    display: flex;
+    width: 100%;
+}
+.Create__error-container {
+    font-size: 0.8em;
+    color: #F46E42;
+    margin: auto;
+}
 .Create__editor {
     border: 1px solid #F2F2F2;
     text-align: left;

src/components/create-api-component/CreateApiComponent.js

@@ -2,7 +2,6 @@ import Component from '../component/index';
 import ButtonComponent from '../button-component/ButtonComponent';
 import './CreateApiComponent.css';
 import storageApi from '../../api/StorageServiceAPI';
-import routeService from '../../services/RouteService';
 import Modal from '../modal/Modal';
 
 class CreateApiComponent extends Component {
@@ -13,12 +12,13 @@ class CreateApiComponent extends Component {
         this.inputServiceName = this.mainNode.querySelector('.Create__serviceName');
         this.inputDescription = this.mainNode.querySelector('.Create__description');
         this.inputAuthor = this.mainNode.querySelector('.Create__author');
+        this.createError = this.mainNode.querySelector('.Create__error-container');
         this.header = this.mainNode.querySelector('.Create__title');
         this.body = this.mainNode.querySelector('.Create__body');
         this.footer = this.mainNode.querySelector('.Create__footer');
         this.form = this.mainNode.querySelector('.Create__form');
         this.editor = this.mainNode.querySelector('.Create__editor');
-        this.button = new ButtonComponent(this.footer, 'Создать', 'btn btn-outline-primary');
+        this.button = new ButtonComponent(this.footer, 'Создать', 'btn btn-outline-primary Create__send');
         this.content = {
             headerNode: this.header,
             contentNode: this.body,
@@ -37,18 +37,39 @@ class CreateApiComponent extends Component {
         this.modal.show();
     }
 
-    send = () => {
+    parseString = async (text) => {
-        const obj = JSON.parse(this.editor.textContent);
+        const obj = await JSON.parse(text);
-        this.data = {
+        return obj;
-            key: this.inputKey.value,
+    }
-            value: obj,
-            description: this.inputDescription.value,
-            service_name: this.inputServiceName.value,
-            author: this.inputAuthor.value
-        };
 
-        storageApi.create(this.data);
+    send = async () => {
-        routeService.goTo('/api');
+        try {
+            const obj = await JSON.parse(this.editor.textContent);
+            this.data = {
+                key: this.inputKey.value,
+                value: obj,
+                description: this.inputDescription.value,
+                service_name: this.inputServiceName.value,
+                author: this.inputAuthor.value
+            };
+
+            try {
+                await storageApi.create(this.data);
+                this.createError.textContent = '';
+                this.modal.hide();
+                this.next('renderTable');
+            } catch (err) {
+                if (err.response.status === 502) {
+                    this.createError.textContent = 'Заполните все необходимые поля для создания хранилища';
+                } else if (err.response.status === 404) {
+                    this.createError.textContent = 'Не удалось создать хранилище. Возможно Вы используете не уникальное название хранилища';
+                } else {
+                    this.createError.textContent = 'Что-то пошло не так';
+                }
+            }
+        } catch {
+            this.createError.textContent = 'Тело хранилища не соответствует требованиям';
+        }
     }
 }
 export default CreateApiComponent;

src/components/search-component/FilterApiComponent.js

@@ -4,7 +4,6 @@ import './FilterApiComponent.css';
 import routeService from '../../services/RouteService';
 import {FILTER_ROWS} from './constants';
 import FilterInputComponent from '../filter-input-component/index';
-import CreateApiComponent from '../create-api-component/index';
 
 class FilterApiComponent extends Component {
     constructor (container) {
@@ -13,9 +12,6 @@ class FilterApiComponent extends Component {
         this.filterInputsBox = this.mainNode.querySelector('.Filter__inputs-box');
         this.filterButtonBox = this.mainNode.querySelector('.Filter__button-box');
         this.searchBtn = new ButtonComponent(this.filterButtonBox, 'Найти', 'btn btn-primary mb-3');
-        this.createBtn = new ButtonComponent(this.filterButtonBox, '✚', 'btn btn-primary mb-3 Create__btn');
-        this.createWindow = new CreateApiComponent();
-        this.createBtn.subscribe('click', () => this.createWindow.show());
 
         this.inputs = FILTER_ROWS.map((item) => {
             const {query} = routeService.getUrlData();