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 (
-
-
-
-
+ const { locale, user } = this.state
-
-
-
-
-
- New Article Page
}
- />
-
- Error Page
} />
- Not Found Page
} />
-
-
-
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ 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 }