From 8fbac0afdf9b2078a3d301e4a722ba970298ea87 Mon Sep 17 00:00:00 2001 From: ls16 <1@1.ru> Date: Wed, 14 Feb 2018 19:38:36 +0300 Subject: [PATCH 1/2] =?UTF-8?q?=D1=80=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B0=20=D0=BB=D0=BE=D0=BA=D0=B0=D0=BB=D0=B8?= =?UTF-8?q?=D0=B7=D0=B0=D1=86=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/App.js | 18 +++++++++++++----- src/components/Article/index.js | 9 +++++++-- src/components/ArticleList.js | 1 + src/components/CommentForm/index.js | 12 +++++++++--- src/components/CommentList.js | 9 ++++++--- src/components/Header.js | 24 ++++++++++++++++++++++++ src/components/Menu/MenuItem.js | 22 +++++++++++++++------- src/components/Menu/index.js | 7 ++++++- src/components/UserForm.js | 8 +++++++- src/components/common/Loader.js | 17 ++++++++++++----- src/components/routes/ArticleList.js | 8 +++++++- src/components/utils.js | 4 ++++ src/locales.js | 25 +++++++++++++++++++++++++ 13 files changed, 136 insertions(+), 28 deletions(-) create mode 100644 src/components/Header.js create mode 100644 src/components/utils.js create mode 100644 src/locales.js diff --git a/src/components/App.js b/src/components/App.js index f357b24..0ee403c 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -7,29 +7,37 @@ import CounterPage from './routes/Counter' import CommentsPage from './routes/CommentsPage' import { Route, Redirect, Switch } from 'react-router-dom' import Menu, { MenuItem } from './Menu' +import Header from './Header' +import {locales} from '../locales' +import {getLocaleText} from './utils' class App extends Component { static childContextTypes = { - user: PropTypes.string + user: PropTypes.string, + locale: PropTypes.object } state = { - username: 'Roma' + username: 'Roma', + localeName: null } getChildContext() { return { - user: this.state.username + user: this.state.username, + locale: this.state.localeName != null ? locales[this.state.localeName] : null } } handleUserChange = username => this.setState({ username }) + handleLocaleChange = localeName => () => this.setState({ localeName }) + render() { - console.log('---', 1) + console.log('---', 1, this.context) return (
-

App name

+
Articles Filters diff --git a/src/components/Article/index.js b/src/components/Article/index.js index 1b38661..67e82d5 100644 --- a/src/components/Article/index.js +++ b/src/components/Article/index.js @@ -7,6 +7,7 @@ import CommentList from '../CommentList' import Loader from '../common/Loader' import {deleteArticle, loadArticle} from '../../AC' import { articleSelector } from '../../selectors' +import {getLocaleText} from '../utils' import './style.css' class Article extends Component { @@ -31,6 +32,10 @@ class Article extends Component { } } + static contextTypes = { + locale: PropTypes.object + } + componentDidMount() { const { id, isOpen, article, loadArticle } = this.props if (isOpen && (!article || !article.text)) loadArticle(id) @@ -46,10 +51,10 @@ class Article extends Component {

{article.title}

- user: - comment: @@ -63,4 +69,4 @@ const limits = { export default connect(null, (dispatch, ownProps) => ({ addComment: (comment) => dispatch(addComment(comment, ownProps.articleId)) -}))(CommentForm) \ No newline at end of file +}), null, { pure: false })(CommentForm) \ No newline at end of file diff --git a/src/components/CommentList.js b/src/components/CommentList.js index c468574..8019626 100644 --- a/src/components/CommentList.js +++ b/src/components/CommentList.js @@ -6,6 +6,7 @@ import CommentForm from './CommentForm' import Loader from './common/Loader' import {connect} from 'react-redux' import {loadArticleComments} from '../AC' +import {getLocaleText} from './utils' class CommentList extends Component { static propTypes = { @@ -18,7 +19,8 @@ class CommentList extends Component { static contextTypes = { store: PropTypes.object, router: PropTypes.object, - user: PropTypes.string + user: PropTypes.string, + locale: PropTypes.object } componentWillReceiveProps({ isOpen, article, loadArticleComments }) { @@ -30,11 +32,12 @@ class CommentList extends Component { render() { console.log('---', 'context: ', this.context) const {isOpen, toggleOpen} = this.props - const text = isOpen ? 'hide comments' : 'show comments' + const text = isOpen ? getLocaleText(this)('hide comments') : + getLocaleText(this)('show comments') return (
-

User: {this.context.user}

+

{getLocaleText(this)('User')}: {this.context.user}

{this.getBody()}
) diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..a3d38cb --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,24 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import {getLocaleText} from './utils' + +export default class Header extends Component { + static contextTypes = { + locale: PropTypes.object + } + + render() { + const handleLocaleChange = this.props.onLocaleChange + + return ( +
+
+ {getLocaleText(this)('Select language') + ': '} + + +
+

{getLocaleText(this)('App name')}

+
+ ) + } +} \ No newline at end of file diff --git a/src/components/Menu/MenuItem.js b/src/components/Menu/MenuItem.js index 429cf78..21ba689 100644 --- a/src/components/Menu/MenuItem.js +++ b/src/components/Menu/MenuItem.js @@ -1,16 +1,24 @@ -import React from 'react' +import React, {Component} from 'react' import PropTypes from 'prop-types' import {NavLink} from 'react-router-dom' +import {getLocaleText} from '../utils' -function MenuItem({ children, to }) { - return ( -
- {children} -
- ) +class MenuItem extends Component { + render() { + const { children, to } = this.props + return ( +
+ {getLocaleText(this)(children)} +
+ ) + } } MenuItem.propTypes = { } +MenuItem.contextTypes = { + locale: PropTypes.object +} + export default MenuItem \ No newline at end of file diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js index 096e674..26e208d 100644 --- a/src/components/Menu/index.js +++ b/src/components/Menu/index.js @@ -1,16 +1,21 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import MenuItem from './MenuItem' +import {getLocaleText} from '../utils' class Menu extends Component { static propTypes = { }; + static contextTypes = { + locale: PropTypes.object + } + render() { return (
-

Main menu:

+

{getLocaleText(this)('Main menu')}:

{this.props.children}
) diff --git a/src/components/UserForm.js b/src/components/UserForm.js index 9a96e38..6fc27b8 100644 --- a/src/components/UserForm.js +++ b/src/components/UserForm.js @@ -1,10 +1,16 @@ import React, { Component } from 'react' +import PropTypes from 'prop-types' +import {getLocaleText} from './utils' class UserForm extends Component { static propTypes = { }; + static contextTypes = { + locale: PropTypes.object + } + state = { user: '' } @@ -13,7 +19,7 @@ class UserForm extends Component { const {value} = this.props return (
- Username: + {getLocaleText(this)('Username')}:
) } diff --git a/src/components/common/Loader.js b/src/components/common/Loader.js index 7577062..5224ba0 100644 --- a/src/components/common/Loader.js +++ b/src/components/common/Loader.js @@ -1,13 +1,20 @@ -import React from 'react' +import React, {Component} from 'react' import PropTypes from 'prop-types' +import {getLocaleText} from '../utils' -function Loader(props) { - return ( -

Loading...

- ) +class Loader extends Component { + render() { + return ( +

{getLocaleText(this)('Loading') + '...'}

+ ) + } } Loader.propTypes = { } +Loader.contextTypes = { + locale: PropTypes.object +} + export default Loader \ No newline at end of file diff --git a/src/components/routes/ArticleList.js b/src/components/routes/ArticleList.js index 3cceedd..ef45ec8 100644 --- a/src/components/routes/ArticleList.js +++ b/src/components/routes/ArticleList.js @@ -1,18 +1,24 @@ import React, { Component } from 'react' +import PropTypes from 'prop-types' import ArticleList from '../ArticleList' import Article from '../Article' import {Route} from 'react-router-dom' +import {getLocaleText} from '../utils' class ArticleListPage extends Component { static propTypes = { }; + static contextTypes = { + locale: PropTypes.object + } + render() { console.log('---', 2) return (
-

Article list:

+

{getLocaleText(this)('Article list') + ':'}

diff --git a/src/components/utils.js b/src/components/utils.js new file mode 100644 index 0000000..4c755a7 --- /dev/null +++ b/src/components/utils.js @@ -0,0 +1,4 @@ +export const getLocaleText = ctx => text => { + return ctx && ctx.context && ctx.context.locale && + ctx.context.locale[text] != null ? ctx.context.locale[text] : text +} \ No newline at end of file diff --git a/src/locales.js b/src/locales.js new file mode 100644 index 0000000..a4087ab --- /dev/null +++ b/src/locales.js @@ -0,0 +1,25 @@ +export const locales = { + "ru": { + "Select language": "Выберите язык", + "original": "оригинал", + "ru": "ру", + "App name": "Имя приложения", + "Main menu": "Главное меню", + "Username": "Пользователь", + "User": "Пользователь", + "user": "пользователь", + "Article list": "Список статей", + "Please select an article": "Выберите статью", + "Articles": "Статьи", + "Filters": "Фильтры", + "Counter": "Счетчик", + "Comments": "Комментарии", + "comment": "комментарий", + "open": "открыть", + "close": "закрыть", + "delete": "удалить", + "show comments": "показать комментарии", + "hide comments": "скрыть комментарии", + "Loading": "Загрузка" + } +} \ No newline at end of file From 8282f0771d152b632dde7c7a7239cda2f8d93db3 Mon Sep 17 00:00:00 2001 From: ls16 <1@1.ru> Date: Wed, 14 Feb 2018 22:42:28 +0300 Subject: [PATCH 2/2] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=81=D1=82=D0=B0=D1=82=D1=8C=D0=B8?= =?UTF-8?q?=20=D0=BF=D1=80=D0=B8=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7?= =?UTF-8?q?=D0=BA=D0=B5=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Article/index.js | 12 ++++++++++-- src/selectors/index.js | 1 + 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/Article/index.js b/src/components/Article/index.js index 67e82d5..70148c4 100644 --- a/src/components/Article/index.js +++ b/src/components/Article/index.js @@ -6,7 +6,7 @@ import {connect} from 'react-redux' import CommentList from '../CommentList' import Loader from '../common/Loader' import {deleteArticle, loadArticle} from '../../AC' -import { articleSelector } from '../../selectors' +import { articleSelector, articlesLoadingSelector, articlesLoadedSelector } from '../../selectors' import {getLocaleText} from '../utils' import './style.css' @@ -41,6 +41,12 @@ class Article extends Component { if (isOpen && (!article || !article.text)) loadArticle(id) } + componentWillReceiveProps({id, isOpen, article, articlesLoaded, loadArticle}) { + if (isOpen && this.props.articlesLoading && articlesLoaded && article && !article.text) { + loadArticle(id) + } + } + render() { console.log('---', 4) const {article, isOpen, toggleOpen} = this.props @@ -111,5 +117,7 @@ class Article extends Component { export default connect((state, props) => ({ - article: articleSelector(state, props) + article: articleSelector(state, props), + articlesLoading: articlesLoadingSelector(state), + articlesLoaded: articlesLoadedSelector(state) }), { deleteArticle, loadArticle }, null, { pure: false })(Article) \ No newline at end of file diff --git a/src/selectors/index.js b/src/selectors/index.js index 95a4230..3e36538 100644 --- a/src/selectors/index.js +++ b/src/selectors/index.js @@ -2,6 +2,7 @@ import {createSelector} from 'reselect' export const articlesMapSelector = state => state.articles.entities export const articlesLoadingSelector = state => state.articles.loading +export const articlesLoadedSelector = state => state.articles.loaded export const filtersSelector = state => state.filters export const commentMapSelector = state => state.comments.get('entities') export const idSelector = (_, props) => props.id