[Задача 12794] Добавил сообщение в случае, когда нет доступных опечаток. Вынес…

cp/javascript/src/components/SiteList.jsx

 import React from 'react'
 import {Nav, NavItem, NavLink, TabContent, TabPane, Alert} from "reactstrap";
-import TypoList from "./TypoList";
+import TypoList from "./TypoList/";
 
 export default class SiteList extends React.Component {
 

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

 import React, {Component} from 'react';
-import Typo from "./Typo/index";
+import {Card, CardHeader, CardBody, CardText} from 'reactstrap'
+
+import Typo from "../Typo/";
+
+import './style.css'
 
 const alertify = require("alertify.js");
 
@@ -60,6 +64,23 @@ export default class TypoList extends Component {
         });
     }
 
+    static _displayEmptyMessage() {
+        return (
+            <Card className="text-center" inverse color="danger">
+                <CardHeader>
+                    Список опечаток для сайта пуст
+                </CardHeader>
+                <CardBody>
+                    <CardText>
+                        В данный момент нет неисправленых опечаток.<br />
+                        Когда новые опечатки будут отправлены, вы получите
+                        уведомление на почту.
+                    </CardText>
+                </CardBody>
+            </Card>
+        )
+    }
+
     render() {
 
         const {typos} = this.props;
@@ -68,6 +89,10 @@ export default class TypoList extends Component {
 
         console.log("Render typolist for site " + this.state.siteId);
 
+        if (typos.length === 0) {
+            return TypoList._displayEmptyMessage();
+        }
+
         const typoCards = typos.map((typo, index) =>
             <Typo key={typo.id} typo={typo}
                   show={this.state.currentTypo === index}

cp/javascript/src/components/TypoList/style.css

+
+#typo-list-empty {
+    text-align: center;
+}
\ No newline at end of file

cp/javascript/src/typos.jsx

@@ -4,6 +4,9 @@ import ReactDOM from 'react-dom';
 import 'bootstrap'
 import 'bootstrap/dist/css/bootstrap.min.css';
 
+// Общие стили
+import './style.css'
+
 import SiteList from "./components/SiteList";
 
 // Get json array of typos and render component application