[Задача 12799] Общие исправления. Изменение компонента хранилища состояния опечаток

cp/javascript/src/components/SiteList.jsx

@@ -11,14 +11,15 @@ export default class SiteList extends React.Component {
         super(props);
 
         this.sites = this.props.sites;
+
+        console.log("Render SiteList");
         this.state = {
             activeTab: 0,
             error: false,
-            refreshing: true
+            refreshing: true,
+            typos: []
         };
 
-        this.typos = [];
-
         // Настройка прогресс бара
         TopBarProgress.config({
             barColors: {
@@ -59,7 +60,9 @@ export default class SiteList extends React.Component {
         $.ajax({
             url: `${window.baseUrl}/users/typos/getSiteTypos/${this.sites[siteId].id}`,
         }).done((typos) => {
-            this.typos = typos;
+            this.setState({
+                typos: typos
+            });
 
             if (done) {
                 done();
@@ -74,6 +77,12 @@ export default class SiteList extends React.Component {
         });
     }
 
+    removeTypoFromList = (typoId) => {
+        this.setState({
+            typos: this.state.typos.filter((typo) => {typo.id !== typoId})
+        });
+    }
+
     render() {
         const tabItems = this.sites.map((site, index) =>
             <NavItem key={index}>
@@ -83,7 +92,7 @@ export default class SiteList extends React.Component {
 
                     <Badge id={site.id + "-typos-count"} className={"typos-count"}
                            hidden={this.state.activeTab !== index}>
-                        {this.typos.length}
+                        {this.state.typos.length}
                     </Badge>
                 </NavLink>
                 {this.state.activeTab === index &&
@@ -113,7 +122,7 @@ export default class SiteList extends React.Component {
             if (this.state.activeTab === index) {
                 return (
                     <TabPane key={index} tabId={index}>
-                        <TypoList siteId={site.id} typos={this.typos} />
+                        <TypoList siteId={site.id} typos={this.state.typos} removeTypoCallback={this.removeTypoFromList}/>
                     </TabPane>
                 );
             } else { // Если не активная вкладка - то не рендерим содержимое

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

@@ -112,20 +112,13 @@ export default class Typo extends Component {
 
     render() {
         const typo = this.typo;
-        const {show} = this.props;
 
-        const display = show ? "d-block" : "d-none";
+        const display = "d-block";
         const textColor = "text-white";
         const backgroundColor = "bg-primary";
 
         const className = `TypoCard text-center ${display} ${backgroundColor} ${textColor}`;
 
-        if (show) {
-            console.log("Render typo #" + typo.id);
-        } else {
-            return null;
-        }
-
         if (!this.state.textHighlighted) {
             this._highlightTypoInContext();
             this.state.textHighlighted = true;

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

@@ -13,12 +13,19 @@ import './style.css'
 const alertify = require("alertify.js");
 
 export default class TypoList extends Component {
-    state = {
+    constructor(props) {
+        super(props);
+
+        this.state = {
             loading: false,
-        siteId: 0,
-        resolvedTypos: []
+            siteId: this.props.siteId,
         };
 
+        this.removeTypo = this.props.removeTypoCallback.bind(this);
+
+        console.log("Construct(TypoList):", this);
+    }
+
     /**
      * Одобряет исправление опечатки
      * и вносит соответствующее исправление в текст.
@@ -37,8 +44,7 @@ export default class TypoList extends Component {
                     alertify.success(`<p>Опечатка ${typoId} была подтверждена.</p>
                         <p>Исправления применены к тексту, содержащему опечатку.</p>`);
 
-                    this.state.resolvedTypos.push(typoId);
-                    this._decrementSiteTyposCount();
+                    this.removeTypo(typoId);
                 } else {
                     alertify.error(response.message);
                 }
@@ -66,9 +72,7 @@ export default class TypoList extends Component {
         this._setTypoStatus(0, typoId, this.state.siteId)
             .done(() => {
                 alertify.success(`Опечатка ${typoId} была отклонена`);
-                
-                this.state.resolvedTypos.push(typoId);
-                this._decrementSiteTyposCount();
+                this.removeTypo(typoId);
             })
             .fail(() => {
                 alertify.error("Ошибка исправления опечатки, попробуйте позже");
@@ -121,20 +125,18 @@ export default class TypoList extends Component {
     }
 
     render() {
+        console.log("Render typolist for site " + this.state.siteId);
 
-        const {typos} = this.props;
-
-        this.state.siteId = this.props.siteId;
+        this.updateSiteTyposCount();
 
-        console.log("Render typolist for site " + this.state.siteId);
+        const typos = this.props.typos;
 
-        if (typos.length === 0 || this.state.resolvedTypos.length >= typos.length) {
+        if (typos.length === 0) {
             return TypoList._displayEmptyMessage();
         }
 
         const typoCards = typos.map((typo, index) =>
             <Typo key={typo.id} typo={typo}
-                  show={!this.state.resolvedTypos.includes(typo.id)}
                   acceptCallback={this.acceptCorrection.bind(this, typo.id)}
                   declineCallback={this.declineCorrection.bind(this, typo.id)}/>
         );
@@ -153,8 +155,7 @@ export default class TypoList extends Component {
      * Уменьшает счетчик опечаток сайта
      * @private
      */
-    _decrementSiteTyposCount() {
-        const value = parseInt($(`#${this.state.siteId}-typos-count`).text());
-        $(`#${this.state.siteId}-typos-count`).text(value-1);
+    updateSiteTyposCount() {
+        $(`#${this.state.siteId}-typos-count`).text(this.props.typos.length);
     }
 }
\ No newline at end of file