Hometask8

src/components/App.js

@@ -13,6 +13,10 @@ class App extends Component {
         user: PropTypes.string
     }
 
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
+
     state = {
         username: 'Roma'
     }
@@ -27,14 +31,15 @@ class App extends Component {
 
     render() {
         console.log('---', 1)
+        const { dictionary } = this.context
         return (
             <div>
-                <h1>App name</h1>
+                <h1>{dictionary.APP_NAME}</h1>
                 <Menu>
-                    <MenuItem to = "/articles">Articles</MenuItem>
-                    <MenuItem to = "/filters">Filters</MenuItem>
-                    <MenuItem to = "/counter">Counter</MenuItem>
-                    <MenuItem to = "/comments">Comments</MenuItem>
+                    <MenuItem to = "/articles">{dictionary.ARTICLES}</MenuItem>
+                    <MenuItem to = "/filters">{dictionary.FILTERS}</MenuItem>
+                    <MenuItem to = "/counter">{dictionary.COUNTER}</MenuItem>
+                    <MenuItem to = "/comments">{dictionary.COMMENTS}</MenuItem>
                 </Menu>
                 <UserForm value = {this.state.username} onChange = {this.handleUserChange}/>
                 <Switch>

src/components/CommentList.js

@@ -18,7 +18,8 @@ class CommentList extends Component {
     static contextTypes = {
         store: PropTypes.object,
         router: PropTypes.object,
-        user: PropTypes.string
+        user: PropTypes.string,
+        dictionary: PropTypes.object
     }
 
     componentWillReceiveProps({ isOpen, article, loadArticleComments }) {

src/components/LanguageContextProvider.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import dictionary from '../dictionary'
+
+class LanguageContextProvider extends Component {
+    static childContextTypes = {
+        dictionary: PropTypes.object
+    }
+
+    getChildContext() {
+        return {
+            dictionary: dictionary[this.state.lang]
+        }
+    }
+
+    static defaultProps = {
+        lang: 'ru'
+    }
+
+    state = {
+        lang: this.props.lang
+    }
+
+    handleChange = (e) => this.setState({lang: e.target.value});
+
+    render() {
+        return (
+            <div>
+                <select value={this.state.lang} onChange={this.handleChange}>
+                    <option value="ru">RU</option>
+                    <option value="en">EN</option>
+                </select>
+
+                {this.props.children}
+            </div>
+        )
+    }
+}
+
+export default LanguageContextProvider

src/components/Menu/index.js

@@ -7,10 +7,14 @@ class Menu extends Component {
 
     };
 
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
+
     render() {
         return (
             <div>
-                <h2>Main menu:</h2>
+                <h2>{this.context.dictionary.MAIN_MENU}</h2>
                 {this.props.children}
             </div>
         )

src/components/UserForm.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import dictionary from '../dictionary';
 
 class UserForm extends Component {
     static propTypes = {
@@ -9,11 +11,15 @@ class UserForm extends Component {
         user: ''
     }
 
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
+
     render() {
         const {value} = this.props
         return (
             <div>
-                Username: <input type = "text" value = {value} onChange = {this.handleChange}/>
+                {this.context.dictionary.USERNAME}: <input type = "text" value = {value} onChange = {this.handleChange}/>
             </div>
         )
     }

src/components/routes/ArticleList.js

@@ -2,17 +2,22 @@ import React, { Component } from 'react'
 import ArticleList from '../ArticleList'
 import Article from '../Article'
 import {Route} from 'react-router-dom'
+import PropTypes from 'prop-types'
 
 class ArticleListPage extends Component {
     static propTypes = {
 
     };
 
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
+
     render() {
         console.log('---', 2)
         return (
             <div>
-                <h2>Article list:</h2>
+                <h2>{this.context.dictionary.ARTICLE_LIST}:</h2>
                 <ArticleList/>
                 <Route path = {`${this.props.match.path}/:id`} children = {this.getArticle} />
             </div>

src/dictionary.js

@@ -0,0 +1,24 @@
+const dictionary = {
+    ru: {
+        "APP_NAME": "Приложение",
+        "MAIN_MENU": "Главное меню",
+        "ARTICLES": "Статьи",
+        "FILTERS": "Фильтры",
+        "COUNTER": "Счетчик",
+        "COMMENTS": "Комментарии",
+        "USERNAME": "Имя пользователя",
+        "ARTICLE_LIST": "Список статей"
+    },
+    en: {
+        "APP_NAME" : "App Name",
+        "MAIN_MENU": "Main menu",
+        "ARTICLES": "Articles",
+        "FILTERS": "Filters",
+        "COUNTER": "Counter",
+        "COMMENTS": "Comments",
+        "USERNAME": "username",
+        "ARTICLE_LIST": "Article list"
+    }
+}
+
+export default dictionary

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import {render} from 'react-dom'
 import {Provider} from 'react-redux'
+import LanguageContextProvider from './components/LanguageContextProvider'
 import App from './components/App'
 import {ConnectedRouter} from 'react-router-redux'
 //import {HashRouter, BrowserRouter} from 'react-router-dom'
@@ -9,6 +10,8 @@ import history from './history'
 
 render(<Provider store = {store}>
     <ConnectedRouter history = {history}>
-        <App/>
+        <LanguageContextProvider>
+            <App/>
+        </LanguageContextProvider>
     </ConnectedRouter>
 </Provider>, document.getElementById('container'))

src/reducer/articles.js

@@ -48,7 +48,10 @@ export default (articles = new ReducerRecord(), action) => {
             return articles
                 .set('loading', false)
                 .set('loaded', true)
-                .set('entities', arrToMap(response, ArticleRecord))
+                .update('entities', item =>
+                    item.mergeDeepWith((oldValue, newValue, key) =>
+                        newValue ? newValue : oldValue
+                , arrToMap(response, ArticleRecord)))
 
         case LOAD_ARTICLE + START:
             return articles.setIn(['entities', payload.id, 'loading'], true)