Add alertify.js library and rewrite alerts using it. Add data validation and error handling

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "alertify.js": "^1.0.12",
     "bootstrap": "^3.3.7",
     "jquery": "^3.3.1",
     "react": "^16.4.1",

src/App/index.js

@@ -6,6 +6,8 @@ import {i18n} from '../Localization';
 
 import {config} from '../config';
 
+const alertify = require("alertify.js");
+
 class App extends Component {
 
   constructor(props, context) {
@@ -32,10 +34,15 @@ class App extends Component {
     $(document).keydown(event => {
       if (event.ctrlKey && event.keyCode === 13) {
         const selection = this.getSelectedText();
+
+        if (selection === "") {
+          return;
+        }
+
         if (selection.length < config.minTypoLength || 
           selection.length > config.maxTypoLength) 
         {
-          alert(i18n.formatString(i18n.errorSelectionLength, 
+          alertify.error(i18n.formatString(i18n.errorSelectionLength, 
             config.minTypoLength, config.maxTypoLength));
             
           return;

src/Localization.js

@@ -11,8 +11,12 @@ export const i18n = new LocalizedStrings({
         modalCommentPlaceholder:    `Например, "опечатка"`,
         modalCommentLabel:          "Пояснения к исправлению",
         errorSelectionLength:       "Опечатка должна быть длиной от {0} до {1} символов",  
+        errorCorrectLength:         "Исправление должно быть длиной от {0} до {1} символов",
+        errorDoesNotDistinct:       "Исправленный вариант идентичен исходному",
         close:                      "Закрыть",
-        saveChanges:                "Сохранить изменения"
+        saveChanges:                "Сохранить изменения",
+        messageSuccess:             "Благодарим за отправку. Опечатка будет исправлена",
+        messageFailture:            "Не удалось отправить исправление",
     },
     en: {
 

src/Modal/index.js

 import React, { Component } from 'react';
-import { Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock } from 'react-bootstrap'
+import { Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock, Alert } from 'react-bootstrap'
+
 import './Modal.css';
+import {i18n} from '../Localization';
+
+import {config} from '../config';
 
-import {i18n} from '../Localization'
+const alertify = require("alertify.js");
 
 class TypoModal extends Component {
 
@@ -13,7 +17,8 @@ class TypoModal extends Component {
       show: this.props.show,
       text: this.props.text,
       correct: this.props.text,
-      comment: ""
+      comment: "",
+      error: "",
     }
 
     this.closeCallback = props.closeCallback;
@@ -43,10 +48,36 @@ class TypoModal extends Component {
     this.setState({ correct: event.target.value });
   }
 
+  // Validate input data
+  checkData = () => {
+    
+    if (this.state.text === this.state.correct) {
+      this.setState({ error: i18n.errorDoesNotDistinct });
+      return false;
+    }
+
+    if (this.state.correct.length > config.maxCorrectLength ||
+        this.state.correct.length < config.minCorrectLength) {
+      this.setState({ 
+        error: i18n.formatString(i18n.errorCorrectLength, 
+          config.minCorrectLength, 
+          config.maxCorrectLength) 
+      });
+      return false;
+    }
+
+    return true;
+  }
+
   // Send typo to the typos server
   submitTypo = (corrected, comment) => {
-    alert(`Submit typo ${this.state.text}->${this.state.correct} (${this.state.comment})`);
-    this.handleClose();
+    if (this.checkData()) {
+      this.handleClose();
+      alertify.success(i18n.messageSuccess);
+      return;
+    }
+
+    alertify.error(i18n.messageFailture)
   }
 
   render() {
@@ -82,6 +113,8 @@ class TypoModal extends Component {
                 onChange={this.onChangeComment}/> 
             </FormGroup>
           </form>
+
+          { this.state.error ? <Alert bsStyle="danger">{this.state.error}</Alert> : null }
         </Modal.Body>
 
         <Modal.Footer>

src/config.js

 export const config = {
     maxTypoLength:          50,
-    minTypoLength:          2,
+    minTypoLength:          4,
     maxCorrectLength:       100,
     minCorrectLength:       1,
 };
\ No newline at end of file