From f8a6d6c1f14304085ab3c7fde71dad5adb0c90ab Mon Sep 17 00:00:00 2001 From: Nikita Kuvykin Date: Tue, 20 Mar 2018 14:45:40 +0500 Subject: [PATCH 1/2] ht7.1 done --- src/App.js | 22 +++++++++++++++------ src/components/article/index.js | 12 ++++++++---- src/components/comment-list/index.js | 14 +++++++++----- src/components/counter.js | 8 ++++++-- src/components/loader.js | 23 ++++++++++++++-------- src/dictionary.js | 23 ++++++++++++++++++++++ src/provider/LangProvider.js | 29 ++++++++++++++++++++++++++++ 7 files changed, 106 insertions(+), 25 deletions(-) create mode 100644 src/dictionary.js create mode 100644 src/provider/LangProvider.js diff --git a/src/App.js b/src/App.js index a650aee..cb0de79 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ import ArticlesPage from './components/routes/articles' import UserForm from './components/user-form' import Filters from './components/filters' import Counter from './components/counter' +import LangProvider from './provider/LangProvider' import 'react-select/dist/react-select.css' import CommentsPage from './components/routes/comments-page' @@ -18,7 +19,8 @@ class App extends Component { } state = { - username: '' + username: '', + language: 'ru' } getChildContext() { @@ -27,10 +29,19 @@ class App extends Component { } } + changeLanguage = (language) => (ev) => { + this.setState({language}) + ev.preventDefault() + } + + handleUserChange = username => this.setState({ username }) + render() { - console.log('---', 'rendering App') return ( -
+ + Rus +
+ Eng
  • counter
    • @@ -48,11 +59,10 @@ class App extends Component {

    Error page

    } />

    Not Found Page

    } /> -
+ ) } - handleUserChange = username => this.setState({ username }) } -export default App \ No newline at end of file +export default App diff --git a/src/components/article/index.js b/src/components/article/index.js index cdaa19a..e645b56 100644 --- a/src/components/article/index.js +++ b/src/components/article/index.js @@ -13,6 +13,10 @@ class Article extends Component { error: null } + static contextTypes = { + dictionary: PropTypes.object + } + componentDidCatch(error) { console.log('---', error) this.setState({ error }) @@ -24,10 +28,10 @@ class Article extends Component { } render() { - console.log('---', 'rendering Article') if (this.state.error) return

{this.state.error.message}

const { isOpen, article, onButtonClick } = this.props + const { dictionary } = this.context if (!article) return null return ( @@ -38,10 +42,10 @@ class Article extends Component { className = "test__article--button" onClick={() => onButtonClick(article.id)} > - {isOpen ? 'close' : 'open'} + {isOpen ? dictionary['close'] : dictionary['open']} ({ article: articleSelector(state, props) -}), { deleteArticle, loadArticleById }, null, { pure: false })(Article) \ No newline at end of file +}), { deleteArticle, loadArticleById }, null, { pure: false })(Article) diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js index 7bb587e..af960f4 100644 --- a/src/components/comment-list/index.js +++ b/src/components/comment-list/index.js @@ -24,7 +24,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 }) { @@ -35,8 +36,9 @@ class CommentList extends Component { render() { const {isOpen, toggleOpen} = this.props - console.log('---', 'rendering CommentList') - const text = isOpen ? 'hide comments' : 'show comments' + const {dictionary} = this.context + + const text = isOpen ? dictionary['hide comments'] : dictionary['show comments'] return (
@@ -53,6 +55,8 @@ class CommentList extends Component { getBody() { const {article: { comments, id, commentsLoading, commentsLoaded }, isOpen} = this.props + const {dictionary} = this.context + if (!isOpen) return null if (commentsLoading) return if (!commentsLoaded) return null @@ -63,7 +67,7 @@ class CommentList extends Component { { comments.length ? this.getComments() - :

No comments yet

+ :

{dictionary['No comments yet']}

}
@@ -85,4 +89,4 @@ class CommentList extends Component { } -export default connect(null, { loadArticleComments }, null, { pure: false })(toggleOpen(CommentList)) \ No newline at end of file +export default connect(null, { loadArticleComments }, null, { pure: false })(toggleOpen(CommentList)) diff --git a/src/components/counter.js b/src/components/counter.js index b49ee19..c23e312 100644 --- a/src/components/counter.js +++ b/src/components/counter.js @@ -8,12 +8,16 @@ class Counter extends Component { count: PropTypes.number }; + static contextTypes = { + dictionary: PropTypes.object + } + render() { return (

{this.props.count} - +

) @@ -29,4 +33,4 @@ const mapStateToProps = state => ({ count: state.counter }) -export default connect(mapStateToProps)(Counter) \ No newline at end of file +export default connect(mapStateToProps)(Counter) diff --git a/src/components/loader.js b/src/components/loader.js index 9418787..8772a1a 100644 --- a/src/components/loader.js +++ b/src/components/loader.js @@ -1,12 +1,19 @@ -import React from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' -function Loader() { - return ( -

Loading...

- ) -} +class Loader extends Component { + + static propTypes = {} + + static contextTypes = { + dictionary: PropTypes.object + } -Loader.propTypes = { + render() { + return ( +

{this.context.dictionary['Loading']}

+ ) + } } -export default Loader \ No newline at end of file +export default Loader diff --git a/src/dictionary.js b/src/dictionary.js new file mode 100644 index 0000000..b1f07a6 --- /dev/null +++ b/src/dictionary.js @@ -0,0 +1,23 @@ +export const en = { + 'increment': 'increment', + 'delete me': 'delete me', + 'show comments': 'show comments', + 'hide comments': 'hide comments', + 'No comments yet': 'No comments yet', + 'Loading': 'Loading...', + 'close': 'close', + 'open': 'open' +} + +export const ru = { + 'increment': 'увеличить', + 'delete me': 'удалить статью', + 'show comments': 'показать комментарии', + 'hide comments': 'скрыть комментарии', + 'Loading': 'Загрузка...', + 'No comments yet': 'Пока нет комментариев', + 'close': 'закрыть', + 'open': 'открыть', +} + +export default { ru, en } diff --git a/src/provider/LangProvider.js b/src/provider/LangProvider.js new file mode 100644 index 0000000..083c5ed --- /dev/null +++ b/src/provider/LangProvider.js @@ -0,0 +1,29 @@ +import React, { Component } from 'react'; +import propTypes from 'prop-types' +import dictionaryObject from '../dictionary' + +class LangProvider extends Component{ + + static propTypes = { + language: propTypes.string + } + + static childContextTypes = { + dictionary: propTypes.object + } + + getChildContext() { + return { + dictionary: dictionaryObject[this.props.language] + } + } + + render() { + return ( +
{this.props.children}
+ ) + } + +} + +export default LangProvider From ca28220f6cafed39e0cdeab1a330ede9c6624d9d Mon Sep 17 00:00:00 2001 From: Nikita Kuvykin Date: Tue, 20 Mar 2018 15:59:09 +0500 Subject: [PATCH 2/2] ht7.2 done --- src/reducer/articles.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/reducer/articles.js b/src/reducer/articles.js index 1eab84b..e176ebb 100644 --- a/src/reducer/articles.js +++ b/src/reducer/articles.js @@ -41,7 +41,7 @@ export default (articles = new ReducerState(), action) => { case LOAD_ALL_ARTICLES + SUCCESS: return articles - .set('entities', arrToMap(response, ArticleRecord)) + .update('entities', entities => arrToMap(response, ArticleRecord).merge(entities)) .set('loading', false) .set('loaded', true) @@ -62,4 +62,4 @@ export default (articles = new ReducerState(), action) => { default: return articles } -} \ No newline at end of file +}