hm7 kazmin

src/app.js

@@ -7,45 +7,60 @@ import Filters from './components/filters'
 import Counter from './components/counter'
 import Menu, { MenuItem } from './components/menu'
 import { Provider as UserProvider } from './context/user'
+import { Provider as LanguageProvider } from './context/language'
+import LanguageSwitcher from './components/language-switcher'
+import t from './i18n'
+
+import { LANGUAGES } from './constants'
 
 class App extends Component {
   state = {
-    username: 'roma'
+    username: 'roma',
+    lang: LANGUAGES.ENGLISH
   }
 
   handleUserChange = (username) => this.setState({ username })
 
   render() {
     return (
-      <UserProvider value={this.state.username}>
-        <div>
-          <Menu>
-            <MenuItem path="/filters">Filters</MenuItem>
-            <MenuItem path="/articles">Articles</MenuItem>
-            <MenuItem path="/counter">Counter</MenuItem>
-            <MenuItem path="/comments/1">Comments</MenuItem>
-          </Menu>
-          <UserForm
-            value={this.state.username}
-            onChange={this.handleUserChange}
-          />
-          <Switch>
-            <Redirect from="/" to="/articles" exact />
-            <Route path="/counter" component={Counter} exact />
-            <Route path="/filters" component={Filters} />
-            <Route
-              path="/articles/new"
-              render={() => <h1>Add New Article</h1>}
+      <LanguageProvider value={this.state.lang}>
+        <UserProvider value={this.state.username}>
+          <LanguageSwitcher onLangChange={this.onLangChange} />
+          <div>
+            <Menu>
+              <MenuItem path="/filters">{t('filters')}</MenuItem>
+              <MenuItem path="/articles">{t('articles')}</MenuItem>
+              <MenuItem path="/counter">{t('counter')}</MenuItem>
+              <MenuItem path="/comments/1">{t('comments')}</MenuItem>
+            </Menu>
+            <UserForm
+              value={this.state.username}
+              onChange={this.handleUserChange}
             />
-            <Route path="/articles" component={ArticleRoute} />
-            <Route path="/comments" component={CommentsPage} />
-            <Route path="/error" render={() => <h1>Some Error</h1>} />
-            <Route path="/" render={() => <h1>Not Found</h1>} />
-          </Switch>
-        </div>
-      </UserProvider>
+            <Switch>
+              <Redirect from="/" to="/articles" exact />
+              <Route path="/counter" component={Counter} exact />
+              <Route path="/filters" component={Filters} />
+              <Route
+                path="/articles/new"
+                render={() => <h1>Add New Article</h1>}
+              />
+              <Route path="/articles" component={ArticleRoute} />
+              <Route path="/comments" component={CommentsPage} />
+              <Route path="/error" render={() => <h1>Some Error</h1>} />
+              <Route path="/" render={() => <h1>Not Found</h1>} />
+            </Switch>
+          </div>
+        </UserProvider>
+      </LanguageProvider>
     )
   }
+
+  onLangChange = (lang) => {
+    this.setState({
+      lang
+    })
+  }
 }
 
 export default App

src/components/language-switcher.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Consumer as LangConsumer } from '../context/language'
+
+import { LANGUAGES } from '../constants'
+
+class LanguageSwitcher extends Component {
+  static propTypes = {
+    onLangChange: PropTypes.func.isRequired
+  }
+
+  render() {
+    return (
+      <ul>
+        <LangConsumer>
+          {(activeLang) => this.getLanguageList(activeLang)}
+        </LangConsumer>
+      </ul>
+    )
+  }
+
+  getLanguageList(activeLang) {
+    return Object.values(LANGUAGES).map((lang) => (
+      <li
+        onClick={() => this.props.onLangChange(lang)}
+        style={activeLang === lang ? { color: 'red' } : null}
+        key={lang}
+      >
+        {lang}
+      </li>
+    ))
+  }
+}
+
+export default LanguageSwitcher

src/components/menu/index.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 import MenuItem from './menu-item'
+import t from '../../i18n'
 
 class Menu extends Component {
   static propTypes = {}
 
   render() {
     return (
       <div>
-        <h2>Main Menu</h2>
+        <h2>{t('mainMenu')}</h2>
         {this.props.children}
       </div>
     )

src/constants/index.js

@@ -14,3 +14,8 @@ export const LOAD_COMMENTS_FOR_PAGE = 'LOAD_COMMENTS_FOR_PAGE'
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'
 export const FAIL = '_FAIL'
+
+export const LANGUAGES = {
+  ENGLISH: 'en',
+  RUSSIAN: 'ru'
+}

src/context/language.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const { Provider, Consumer } = createContext()
+
+export { Provider, Consumer }

src/i18n/dictionary.js

@@ -0,0 +1,15 @@
+export const ru = {
+  mainMenu: 'Главное меню',
+  filters: 'Фильтры',
+  articles: 'Статьи',
+  counter: 'Счетчик',
+  comments: 'Комментарии'
+}
+
+export const en = {
+  mainMenu: 'Main menu',
+  filters: 'Filters',
+  articles: 'Articles',
+  counter: 'Counters',
+  comments: 'Comments'
+}

src/i18n/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Consumer } from '../context/language'
+import * as dicts from './dictionary'
+
+export default function translate(string) {
+  return <Consumer>{(lang) => getTranslatedString(string, lang)}</Consumer>
+}
+
+function getTranslatedString(string, lang) {
+  return dicts[lang] && dicts[lang][string] ? dicts[lang][string] : string
+}

src/reducer/articles.js

@@ -46,7 +46,9 @@ export default (state = new ReducerRecord(), action) => {
 
     case LOAD_ALL_ARTICLES + SUCCESS:
       return state
-        .set('entities', arrToMap(response, ArticleModel))
+        .updateIn(['entities'], (entities) =>
+          arrToMap(response, ArticleModel).mergeDeep(entities)
+        )
         .set('loading', false)
         .set('loaded', true)