From aa038ebc478d02738b42dde7a449d899deb66f26 Mon Sep 17 00:00:00 2001 From: Roughtron Date: Wed, 14 Feb 2018 18:44:05 +0500 Subject: [PATCH 1/2] add dictionary --- src/components/App.js | 15 ++++++--- src/components/CommentList.js | 3 +- src/components/LanguageContextProvider.js | 40 +++++++++++++++++++++++ src/components/Menu/index.js | 6 +++- src/components/UserForm.js | 8 ++++- src/components/routes/ArticleList.js | 7 +++- src/dictionary.js | 24 ++++++++++++++ src/index.js | 5 ++- 8 files changed, 98 insertions(+), 10 deletions(-) create mode 100644 src/components/LanguageContextProvider.js create mode 100644 src/dictionary.js diff --git a/src/components/App.js b/src/components/App.js index f357b24..a9dcf74 100644 --- a/src/components/App.js +++ b/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 (
-

App name

+

{dictionary.APP_NAME}

- Articles - Filters - Counter - Comments + {dictionary.ARTICLES} + {dictionary.FILTERS} + {dictionary.COUNTER} + {dictionary.COMMENTS} diff --git a/src/components/CommentList.js b/src/components/CommentList.js index c468574..2df13ad 100644 --- a/src/components/CommentList.js +++ b/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 }) { diff --git a/src/components/LanguageContextProvider.js b/src/components/LanguageContextProvider.js new file mode 100644 index 0000000..bc77205 --- /dev/null +++ b/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 ( +
+ + + {this.props.children} +
+ ) + } +} + +export default LanguageContextProvider \ No newline at end of file diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js index 096e674..7e628ba 100644 --- a/src/components/Menu/index.js +++ b/src/components/Menu/index.js @@ -7,10 +7,14 @@ class Menu extends Component { }; + static contextTypes = { + dictionary: PropTypes.object + } + render() { return (
-

Main menu:

+

{this.context.dictionary.MAIN_MENU}

{this.props.children}
) diff --git a/src/components/UserForm.js b/src/components/UserForm.js index 9a96e38..30bfd3b 100644 --- a/src/components/UserForm.js +++ b/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 (
- Username: + {this.context.dictionary.USERNAME}:
) } diff --git a/src/components/routes/ArticleList.js b/src/components/routes/ArticleList.js index 3cceedd..22fb10b 100644 --- a/src/components/routes/ArticleList.js +++ b/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 (
-

Article list:

+

{this.context.dictionary.ARTICLE_LIST}:

diff --git a/src/dictionary.js b/src/dictionary.js new file mode 100644 index 0000000..f5ecd66 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/index.js b/src/index.js index 8615453..014584b 100644 --- a/src/index.js +++ b/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( - + + + , document.getElementById('container')) \ No newline at end of file From 508c7675c232063797f14a2533cd9a636677c338 Mon Sep 17 00:00:00 2001 From: Roughtron Date: Wed, 14 Feb 2018 18:54:08 +0500 Subject: [PATCH 2/2] fix loading article --- src/reducer/articles.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/reducer/articles.js b/src/reducer/articles.js index ebde012..8da60fa 100644 --- a/src/reducer/articles.js +++ b/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)