[Задача 12794] Добавил счетчик опечаток с помощью bootstrap элемента Badge.…

cp/javascript/src/components/SiteList.jsx

 import React from 'react'
-import {Nav, NavItem, NavLink, TabContent, TabPane, Alert} from "reactstrap";
+import {Nav, NavItem, NavLink, TabContent, TabPane, Alert, Badge} from "reactstrap";
 import TypoList from "./TypoList/";
 
 export default class SiteList extends React.Component {
@@ -56,6 +56,11 @@ export default class SiteList extends React.Component {
                 <NavLink className={this.state.activeTab === index ? "active" : ""}
                          onClick={() => { this.toggle(index) }}>
                     {site.name}
+
+                    <Badge id={site.id + "-typos-count"} className={"typos-count"}
+                           hidden={this.state.activeTab !== index}>
+                        {this.typos.length}
+                    </Badge>
                 </NavLink>
             </NavItem>
         );

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

@@ -24,6 +24,7 @@ export default class TypoList extends Component {
             alertify.success(`<p>Опечатка ${typoId} была подтверждена.</p>
                 <p>Исправления применены к тексту, содержащему опечатку.</p>`);
             this.state.currentTypo++;
+            this._decrementSiteTyposCount();
             this.forceUpdate();
         });
     }
@@ -38,6 +39,7 @@ export default class TypoList extends Component {
         this._setTypoStatus(0, typoId, this.state.siteId, () => {
             alertify.success(`Опечатка ${typoId} была отклонена`);
             this.state.currentTypo++;
+            this._decrementSiteTyposCount();
             this.forceUpdate();
         });
     }
@@ -108,4 +110,13 @@ export default class TypoList extends Component {
             </div>
         )
     }
+
+    /**
+     * Уменьшает счетчик опечаток сайта
+     * @private
+     */
+    _decrementSiteTyposCount() {
+        const value = parseInt($(`#${this.state.siteId}-typos-count`).text());
+        $(`#${this.state.siteId}-typos-count`).text(value-1);
+    }
 }
\ No newline at end of file

cp/javascript/src/style.css

+
+.badge.typos-count {
+    margin-left: 10px;
+    color: black;
+    background-color: #ffc107;
+}
\ No newline at end of file

cp/javascript/src/typos.jsx

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import 'bootstrap'
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-// Общие стили
+
 import './style.css'
 
 import SiteList from "./components/SiteList";