Make language preferences persisted

src/LangSwitcher/index.js

@@ -18,25 +18,25 @@ class LangSwitcher extends Component {
         this.onLangChanged = props.onLangChanged;
 
         this.state = {
-            activeLanguage: 0
+            activeLanguage: this.props.activeLanguage || this.languages[0]
         };
     }
 
-    changeLanguage = index => {
-        this.setState({ activeLanguage: index });
-        this.onLangChanged(this.languages[index]);
+    changeLanguage = element => {
+        this.setState({ activeLanguage: element });
+        this.onLangChanged(element);
     }
 
     render() {
         const thumbs = this.languages.map((element, index) => {
-            if (index === this.state.activeLanguage) {
+            if (element === this.state.activeLanguage) {
                 return <Thumbnail key={index} className="lang-thumb active" 
                     src={countryImages[element]}
-                    onClick={e => this.changeLanguage(index)}></Thumbnail>
+                    onClick={e => this.changeLanguage(element)}></Thumbnail>
             } else {
                 return <Thumbnail key={index} className="lang-thumb" 
                     src={countryImages[element]}
-                    onClick={e => this.changeLanguage(index)}></Thumbnail>
+                    onClick={e => this.changeLanguage(element)}></Thumbnail>
             }
         });
 

src/Modal/index.js

@@ -21,14 +21,13 @@ class TypoModal extends Component {
       text: this.props.text,
       correct: this.props.text,
       context: this.props.context,
-      language: config.defaultLanguage,
+      language: this.getLanguage(),
       comment: "",
       error: ""
     }
 
     this.languages = [ "ru", "en" ];
 
-    // TODO: English support
     i18n.setLanguage(this.state.language);
 
     this.closeCallback = props.closeCallback;
@@ -149,10 +148,22 @@ class TypoModal extends Component {
     });
   }
 
+  // Returns language from local storage preferences or from default config value
+  getLanguage() {
+    const persisted = window.localStorage.getItem(`${config.appStorageKey}.lang`);
+    return persisted || config.defaultLanguage;
+  }
+
+  // Save language user preference to the local storage
+  persistLanguage(lang) {
+    window.localStorage.setItem(`${config.appStorageKey}.lang`, lang);
+  }
+
   onLangChanged = language => {
     i18n.setLanguage(language);
     this.setState({language: language});
-    this.forceUpdate();
+    
+    this.persistLanguage(language);
   }
 
   render() {
@@ -193,7 +204,7 @@ class TypoModal extends Component {
         </Modal.Body>
 
         <Modal.Footer>
-          <LangSwitcher onLangChanged={this.onLangChanged} languages={this.languages}></LangSwitcher>
+          <LangSwitcher activeLanguage={this.state.language} onLangChanged={this.onLangChanged} languages={this.languages}></LangSwitcher>
 
           <Button onClick={this.handleClose}>{i18n.close}</Button>
           <Button onClick={this.submitTypo} bsStyle="primary">{i18n.saveChanges}</Button>

src/config.js

@@ -10,4 +10,6 @@ export const config = {
     requestTimeout:         10000,
 
     defaultLanguage:        "ru",
+
+    appStorageKey:          "typos.etersoft",
 };
\ No newline at end of file