Add working i18n to the app. Add custom lang switching component

src/App/ContextExtractor.js

@@ -8,6 +8,10 @@ export default class ContextExtractor {
     
     // Returns a context for a current selection
     getContextForSelection() {
+        if (window.getSelection().baseNode === undefined) {
+            return "";
+        }
+        
         const text = window.getSelection()
             .baseNode.parentNode.textContent
             .replace(/\n/g,"")

src/LangSwitcher/images/index.js

+import ruImage from './icon_russian.png';
+import enImage from './icon_english.png';
+
+const countryImages = {
+    ru: ruImage,
+    en: enImage,
+};
+
+export default countryImages;
\ No newline at end of file

src/LangSwitcher/index.js

+import React, {Component} from 'react'
+import {Thumbnail} from 'react-bootstrap'
+
+import { i18n } from '../Localization';
+import { config } from '../config';
+
+import countryImages from './images';
+
+import './styles.css'
+
+class LangSwitcher extends Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.languages = [];
+        this.languages = props.languages;
+
+        this.onLangChanged = props.onLangChanged;
+
+        this.state = {
+            activeLanguage: 0
+        };
+    }
+
+    changeLanguage = index => {
+        this.setState({ activeLanguage: index });
+        this.onLangChanged(this.languages[index]);
+    }
+
+    render() {
+        const thumbs = this.languages.map((element, index) => {
+            if (index === this.state.activeLanguage) {
+                return <Thumbnail key={index} className="lang-thumb active" 
+                    src={countryImages[element]}
+                    onClick={e => this.changeLanguage(index)}></Thumbnail>
+            } else {
+                return <Thumbnail key={index} className="lang-thumb" 
+                    src={countryImages[element]}
+                    onClick={e => this.changeLanguage(index)}></Thumbnail>
+            }
+        });
+
+        return (
+            <div className="lang-switcher">
+                {thumbs}
+            </div>
+        );
+    }
+}
+
+export default LangSwitcher;
\ No newline at end of file

src/LangSwitcher/styles.css

+.lang-switcher {
+    display: inline-block;
+}
+
+.lang-thumb {
+    display: inline-block;
+    margin: 0;
+}
+
+.lang-thumb.active {
+    background: #5cb85c;
+}
+
+.lang-thumb:hover:not(.active) {
+    background: rgba(92, 184, 92, 0.59);
+}
\ No newline at end of file

src/Localization.js

@@ -17,9 +17,26 @@ export const i18n = new LocalizedStrings({
         close:                      "Закрыть",
         saveChanges:                "Сохранить изменения",
         messageSuccess:             "Благодарим за отправку опечатки. Мы уже работаем над её исправлением!",
-        messageFailture:            "Не удалось отправить исправление. Мы уже работаем над решением проблемы!",
+        errorFormContainsErrors:    "Форма отправки содержит ошибки!",
+        errorSendFailture:          "Не удалось отправить исправление. Мы уже работаем над решением проблемы!",
     },
     en: {
-
+        modalTitle:                 "Typo correction system Etersoft",
+        modalInfo:                  "Please, type in a correct variant to the input field bellow and optional commentary. Than press the send button " +
+                                    "to send the correction to the server.",
+        modalCorrectLabel:          "Corrected text",
+        modalCorrectHelp:           "Moderators will check your proposal corretion and fix it!",
+        modalTypoLabel:             "The typo",
+        modalCommentPlaceholder:    `"A typo", for example`,
+        modalCommentLabel:          "Commentary",
+        errorSelectionLength:       "The text length must be in range ({0}-{1})",  
+        errorCorrectLength:         "The corrected text length must be in range ({0}-{1})",
+        errorDoesNotDistinct:       "The original and corrected text are the same",
+        errorTooOften:              "You are sending correction requests too often",
+        close:                      "Close",
+        saveChanges:                "Save changes",
+        messageSuccess:             "Thank you for a typo submitting! We are already working on this report!",
+        errorFormContainsErrors:    "The form contains errors!",
+        errorSendFailture:          "Failed to send request. We are fixing a problem!",
     }
 })
\ No newline at end of file

src/Modal/Modal.css

@@ -9,4 +9,13 @@
 
 .es-typo-text-fg {
   margin-top: 30px;
+}
+
+.ru-lang-thumb, .en-lang-thumb {
+  float: left;
+  width: 50px;
+}
+
+.lang-switcher {
+  float: left;
 }
\ No newline at end of file

src/Modal/index.js

 import React, { Component } from 'react';
-import { Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock, Alert } from 'react-bootstrap'
+import { Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock, Alert, Thumbnail } from 'react-bootstrap'
 
 import $ from 'jquery';
 import './Modal.css';
@@ -7,6 +7,8 @@ import './Modal.css';
 import { i18n } from '../Localization';
 import { config } from '../config';
 
+import LangSwitcher from '../LangSwitcher';
+
 const alertify = require("alertify.js");
 
 class TypoModal extends Component {
@@ -19,12 +21,15 @@ class TypoModal extends Component {
       text: this.props.text,
       correct: this.props.text,
       context: this.props.context,
+      language: config.defaultLanguage,
       comment: "",
       error: ""
     }
 
+    this.languages = [ "ru", "en" ];
+
     // TODO: English support
-    i18n.setLanguage(config.language);
+    i18n.setLanguage(this.state.language);
 
     this.closeCallback = props.closeCallback;
 
@@ -84,7 +89,7 @@ class TypoModal extends Component {
       "https://test.etersoft.ru/test_react_client";
 
     const data = {
-      language: config.language,
+      language: this.state.language,
 
       // Url of the page with a typo
       url: url,
@@ -126,7 +131,7 @@ class TypoModal extends Component {
   async submitTypo(corrected, comment) {
 
     if (!this.checkData()) {
-      alertify.error(i18n.messageFailture);
+      alertify.error(i18n.errorFormContainsErrors);
       return;
     }
 
@@ -140,10 +145,16 @@ class TypoModal extends Component {
         return;
       }
 
-      alertify.error(i18n.messageFailture);
+      alertify.error(i18n.errorSendFailture);
     });
   }
 
+  onLangChanged = language => {
+    i18n.setLanguage(language);
+    this.setState({language: language});
+    this.forceUpdate();
+  }
+
   render() {
     if (!this.state.show) return null;
 
@@ -178,10 +189,12 @@ class TypoModal extends Component {
             </FormGroup>
           </form>
 
-          {this.state.error ? <Alert bsStyle="danger">{this.state.error}</Alert> : null}
+          {this.state.error && <Alert bsStyle="danger">{this.state.error}</Alert>}
         </Modal.Body>
 
         <Modal.Footer>
+          <LangSwitcher onLangChanged={this.onLangChanged} languages={this.languages}></LangSwitcher>
+
           <Button onClick={this.handleClose}>{i18n.close}</Button>
           <Button onClick={this.submitTypo} bsStyle="primary">{i18n.saveChanges}</Button>
         </Modal.Footer>

src/config.js

@@ -9,5 +9,5 @@ export const config = {
 
     requestTimeout:         10000,
 
-    language:               "ru",
+    defaultLanguage:        "ru",
 };
\ No newline at end of file