diff --git a/package.json b/package.json index 5578951..a23c5d4 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "connected-react-router": "^5.0.1", "history": "^4.7.2", "immutable": "^4.0.0-rc.11", + "@material-ui/core": "latest", "prop-types": "^15.6.2", "react": "^16.5.2", "react-addons-css-transition-group": "^15.6.2", diff --git a/src/components/app.js b/src/components/app.js index f3c5c8d..946be00 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -1,47 +1,72 @@ import React, { Component } from 'react' import { Route, Switch, Redirect } from 'react-router-dom' import ArticlesPage from './routes/articles-page' +import Locale from './locale' import UserForm from './user-form' import Filters from './filters' import Counter from './counter' import CommentsPage from './routes/comments-page' import Menu, { MenuItem } from './menu' import { Provider as UserProvider } from '../contexts/user' +import { + Provider as LocaleProvider, + Consumer as LocaleConsumer, + DICTIONARY +} from '../contexts/locale' class App extends Component { state = { - user: 'roma' + user: 'roma', + locale: 'en' } + setLocale = (locale) => this.setState({ locale }) + setUser = (user) => this.setState({ user }) render() { - return ( - -
- - - Filters - Counter - Comments - - + const { locale, user } = this.state - - - - - -

New Article Page

} - /> - -

Error Page

} /> -

Not Found Page

} /> -
-
-
+ return ( + + +
+ + + + + {{(val) => val.filtersLabel}} + + + { + // Возможно ли сохранять значение, приходящее в LocaleConsumer в state? + // Например, в componentDidUpdate? + // Чтобы избежать постоянного обращения к LocaleConsumer + {(val) => val.counterLabel} + } + + + {{(val) => val.commentsLabel}} + + + + + + + + + +

New Article Page

} + /> + +

Error Page

} /> +

Not Found Page

} /> +
+
+
+
) } } diff --git a/src/components/article/index.js b/src/components/article/index.js index 655133a..db0ec19 100644 --- a/src/components/article/index.js +++ b/src/components/article/index.js @@ -7,6 +7,7 @@ import { deleteArticle, loadArticleById } from '../../ac' import './style.css' import Loader from '../common/loader' import { articleSelector } from '../../selectors' +import { Consumer as LocaleConsumer } from '../../contexts/locale' class Article extends PureComponent { static propTypes = { @@ -41,7 +42,9 @@ class Article extends PureComponent {

{article.title} - +

+ {(val) => (isOpen ? val.hideCommentsLabel : val.showCommentsLabel)} + + ) return (
- {comment.text} by {comment.user} + {comment.text} + + {(val) => val.byLabel} + {` ${comment.user}`} +
) } diff --git a/src/components/locale.js b/src/components/locale.js new file mode 100644 index 0000000..5ea40f0 --- /dev/null +++ b/src/components/locale.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react' +import RadioGroup from '@material-ui/core/RadioGroup' +import Radio from '@material-ui/core/Radio' +import FormControlLabel from '@material-ui/core/FormControlLabel' +import FormControl from '@material-ui/core/FormControl' + +class Locale extends Component { + render() { + return ( + + + } label="en" /> + } label="rus" /> + + + ) + } + + handleChange = (ev) => { + this.props.onChange(ev.target.value) + } +} + +export default Locale diff --git a/src/components/user-form.js b/src/components/user-form.js index dddfbdd..6c48964 100644 --- a/src/components/user-form.js +++ b/src/components/user-form.js @@ -1,10 +1,11 @@ import React, { Component } from 'react' +import { Consumer as LocaleConsumer } from '../contexts/locale' class UserForm extends Component { render() { return (
- Username:{' '} + {(val) => val.usernameLabel}{' '}
) diff --git a/src/contexts/locale.js b/src/contexts/locale.js new file mode 100644 index 0000000..627b931 --- /dev/null +++ b/src/contexts/locale.js @@ -0,0 +1,28 @@ +import { createContext } from 'react' + +const { Provider, Consumer } = createContext() + +const DICTIONARY = { + en: { + deleteButton: 'Delete', + byLabel: 'by', + usernameLabel: 'Username:', + filtersLabel: 'Filters', + counterLabel: 'Counter', + commentsLabel: 'Comments', + hideCommentsLabel: 'Hide comments', + showCommentsLabel: 'Show comments' + }, + rus: { + deleteButton: 'Удалить', + byLabel: 'Автор', + usernameLabel: 'Имя пользователя:', + filtersLabel: 'Фильтры', + counterLabel: 'Счетчик', + commentsLabel: 'Комментарии', + hideCommentsLabel: 'Скрыть комментарии', + showCommentsLabel: 'Показать комментарии' + } +} + +export { Provider, Consumer, DICTIONARY }