[Задача 12799] Добавил progress bar для всех действий над опечатками

cp/javascript/src/components/SiteList.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {Nav, NavItem, NavLink, TabContent, TabPane, Alert, Badge} from "reactstrap";
 import TypoList from "./TypoList/";
 import FaRefresh from 'react-icons/lib/fa/refresh';
-
+import TopBarProgress from 'react-topbar-progress-indicator';
 
 export default class SiteList extends React.Component {
 
@@ -13,28 +13,43 @@ export default class SiteList extends React.Component {
         this.state = {
             activeTab: 0,
             error: false,
+            refreshing: true
         };
 
         this.typos = [];
 
-        this.updateTyposForActiveSite();
-    }
+        // Настройка прогресс бара
+        TopBarProgress.config({
+            barColors: {
+                "0": "#ffc107",
+                "1.0": "#ffc107",
+            }
+        });
 
-    updateTyposForActiveSite = () => {
-        this.loadSiteTypos(this.state.activeTab, () =>
-            this.forceUpdate()
-        );
+        this.updateTab();
     }
 
-    toggle = (tab) => {
-        if (this.state.activeTab !== tab) {
-            /* Обновляем стейт только после загрузки опечаток */
-            this.loadSiteTypos(tab, () => {
-                this.state.activeTab = tab;
-                this.forceUpdate();
+    /**
+     * Обновляет содержимое данной вкладки или текущей активной вкладки,
+     * если параметр не указан. Если указанная вкладка не является активной,
+     * то делает её активной.
+     *
+     * @param tab Если указан, то обновляет содержимое данной вкладки
+     */
+    updateTab = (tab) => {
+        this.setState({
+           refreshing: true
+        });
+
+        tab = tab === undefined ? this.state.activeTab : tab;
+
+        this.loadSiteTypos(tab, () =>
+            this.setState({
+                refreshing: false,
+                activeTab: tab
             })
-        }
-    };
+        );
+    }
 
     loadSiteTypos(siteId, done) {
         $.ajax({
@@ -59,7 +74,7 @@ export default class SiteList extends React.Component {
         const tabItems = this.sites.map((site, index) =>
             <NavItem key={index}>
                 <NavLink className={this.state.activeTab === index ? "active" : ""}
-                         onClick={() => { this.toggle(index) }}>
+                         onClick={() => { this.updateTab(index) }}>
                     {site.name}
 
                     <Badge id={site.id + "-typos-count"} className={"typos-count"}
@@ -67,9 +82,9 @@ export default class SiteList extends React.Component {
                         {this.typos.length}
                     </Badge>
                 </NavLink>
-                {this.state.activeTab === index ?
-                    <FaRefresh className="refresh-site" title="Обновить" onClick={this.updateTyposForActiveSite} /> :
-                    null}
+                {this.state.activeTab === index &&
+                    <FaRefresh className="refresh-site" title="Обновить"
+                               onClick={ () => { this.updateTab() } } />}
             </NavItem>
         );
 
@@ -107,6 +122,7 @@ export default class SiteList extends React.Component {
 
         return (
             <div>
+                {this.state.refreshing && <TopBarProgress />}
                 <Nav pills fill>
                     {tabItems}
                 </Nav>

cp/javascript/src/components/TypoList/index.jsx

 import React, {Component} from 'react';
 import {Card, CardHeader, CardBody, CardText} from 'reactstrap'
+import TopBarProgress from 'react-topbar-progress-indicator';
 
 import Typo from "../Typo/";
 
@@ -13,6 +14,7 @@ const alertify = require("alertify.js");
 
 export default class TypoList extends Component {
     state = {
+        loading: false,
         siteId: 0,
         resolvedTypos: []
     };
@@ -25,25 +27,29 @@ export default class TypoList extends Component {
      * @param corrected Финальный вариант исправления
      */
     acceptCorrection(typoId, corrected) {
+        this.setState({
+            loading: true
+        });
+
         this._setTypoStatus(1, typoId, this.state.siteId, corrected)
             .done((response) => {
                 if (response.error === false) {
                     alertify.success(`<p>Опечатка ${typoId} была подтверждена.</p>
                         <p>Исправления применены к тексту, содержащему опечатку.</p>`);
 
-                    this.state.resolvedTypos.push(typoId)
+                    this.state.resolvedTypos.push(typoId);
                     this._decrementSiteTyposCount();
-                    this.forceUpdate();
-                    return true;
+                } else {
+                    alertify.error(response.message);
                 }
-
-                alertify.error(response.message);
-                return false;
             })
             .fail(() => {
                 alertify.error("Ошибка исправления опечатки, попробуйте позже");
-                return false;
-            })
+            }).always(() => {
+                this.setState({
+                    loading: false
+                });
+            });
     }
 
     /**
@@ -53,19 +59,23 @@ export default class TypoList extends Component {
      * @param typoId Идентификатор опечатки.
      */
     declineCorrection(typoId) {
+        this.setState({
+            loading: true
+        });
+
         this._setTypoStatus(0, typoId, this.state.siteId)
             .done(() => {
                 alertify.success(`Опечатка ${typoId} была отклонена`);
                 
                 this.state.resolvedTypos.push(typoId);
                 this._decrementSiteTyposCount();
-                this.forceUpdate();
-
-                return true;
             })
             .fail(() => {
                 alertify.error("Ошибка исправления опечатки, попробуйте позже");
-                return false;
+            }).always(() => {
+                this.setState({
+                    loading: false
+                });
             });
     }
 
@@ -133,6 +143,7 @@ export default class TypoList extends Component {
 
         return (
             <div>
+                {this.state.loading && <TopBarProgress />}
                 {typoCards}
             </div>
         )

cp/package.json

@@ -14,6 +14,7 @@
     "react": "^16.3.2",
     "react-dom": "^16.3.0",
     "react-icons": "^2.2.7",
+    "react-topbar-progress-indicator": "^2.0.0",
     "reactstrap": "^5.0.0-beta.3",
     "whatwg-fetch": "^2.0.4"
   },