Make the seventh lesson

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",

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 (
-      <UserProvider value={this.state.user}>
-        <div>
-          <Menu>
-            <MenuItem link="/articles" children="Articles" />
-            <MenuItem link="/filters">Filters</MenuItem>
-            <MenuItem link="/counter">Counter</MenuItem>
-            <MenuItem link="/comments">Comments</MenuItem>
-          </Menu>
-          <UserForm value={this.state.user} onChange={this.setUser} />
+    const { locale, user } = this.state
 
-          <Switch>
-            <Redirect from="/" exact to="/articles" />
-            <Route path="/counter" component={Counter} exact />
-            <Route path="/comments" component={CommentsPage} />
-            <Route path="/filters" component={Filters} />
-            <Route
-              path="/articles/new"
-              render={() => <h1>New Article Page</h1>}
-            />
-            <Route path="/articles" component={ArticlesPage} />
-            <Route path="/error" render={() => <h1>Error Page</h1>} />
-            <Route path="*" render={() => <h1>Not Found Page</h1>} />
-          </Switch>
-        </div>
-      </UserProvider>
+    return (
+      <LocaleProvider value={DICTIONARY[locale]}>
+        <UserProvider value={user}>
+          <div>
+            <Locale locale={locale} onChange={this.setLocale} />
+            <Menu>
+              <MenuItem link="/articles" children="Articles" />
+              <MenuItem link="/filters">
+                {<LocaleConsumer>{(val) => val.filtersLabel}</LocaleConsumer>}
+              </MenuItem>
+              <MenuItem link="/counter">
+                {
+                  // Возможно ли сохранять значение, приходящее в LocaleConsumer в state?
+                  // Например, в componentDidUpdate?
+                  // Чтобы избежать постоянного обращения к LocaleConsumer
+                  <LocaleConsumer>{(val) => val.counterLabel}</LocaleConsumer>
+                }
+              </MenuItem>
+              <MenuItem link="/comments">
+                {<LocaleConsumer>{(val) => val.commentsLabel}</LocaleConsumer>}
+              </MenuItem>
+            </Menu>
+            <UserForm value={this.state.user} onChange={this.setUser} />
+            <Switch>
+              <Redirect from="/" exact to="/articles" />
+              <Redirect from="/en" exact to="/articles" />
+              <Route path="/counter" component={Counter} exact />
+              <Route path="/comments" component={CommentsPage} />
+              <Route path="/filters" component={Filters} />
+              <Route
+                path="/articles/new"
+                render={() => <h1>New Article Page</h1>}
+              />
+              <Route path="/articles" component={ArticlesPage} />
+              <Route path="/error" render={() => <h1>Error Page</h1>} />
+              <Route path="*" render={() => <h1>Not Found Page</h1>} />
+            </Switch>
+          </div>
+        </UserProvider>
+      </LocaleProvider>
     )
   }
 }

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 {
       <div>
         <h3>
           {article.title}
-          <button onClick={this.handleDeleteClick}>delete me</button>
+          <button onClick={this.handleDeleteClick}>
+            <LocaleConsumer>{(val) => val.deleteButton}</LocaleConsumer>
+          </button>
         </h3>
         <CSSTransition
           transitionAppear

src/components/comment-list/index.js

@@ -9,6 +9,7 @@ import { loadArticleComments } from '../../ac'
 import './style.css'
 import Loader from '../common/loader'
 import { Consumer as UserConsumer } from '../../contexts/user'
+import { Consumer as LocaleConsumer } from '../../contexts/locale'
 
 class CommentList extends Component {
   static propTypes = {
@@ -37,11 +38,15 @@ class CommentList extends Component {
 
   render() {
     const { isOpen, toggleOpen } = this.props
-    const text = isOpen ? 'hide comments' : 'show comments'
+    const Text = (
+      <LocaleConsumer>
+        {(val) => (isOpen ? val.hideCommentsLabel : val.showCommentsLabel)}
+      </LocaleConsumer>
+    )
     return (
       <div>
         <button onClick={toggleOpen} className="test__comment-list--btn">
-          {text}
+          {Text}
         </button>
         <CSSTransition
           transitionName="comments"

src/components/comment.js

@@ -2,11 +2,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { createCommentSelector } from '../selectors'
+import { Consumer as LocaleConsumer } from '../contexts/locale'
 
 function Comment({ comment }) {
   return (
     <div>
-      {comment.text} <b>by {comment.user}</b>
+      {comment.text}
+      <b>
+        <LocaleConsumer>{(val) => val.byLabel}</LocaleConsumer>
+        {` ${comment.user}`}
+      </b>
     </div>
   )
 }

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 (
+      <FormControl component="fieldset">
+        <RadioGroup
+          name="locale"
+          value={this.props.locale}
+          onChange={this.handleChange}
+        >
+          <FormControlLabel value="en" control={<Radio />} label="en" />
+          <FormControlLabel value="rus" control={<Radio />} label="rus" />
+        </RadioGroup>
+      </FormControl>
+    )
+  }
+
+  handleChange = (ev) => {
+    this.props.onChange(ev.target.value)
+  }
+}
+
+export default Locale

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 (
       <div>
-        Username:{' '}
+        <LocaleConsumer>{(val) => val.usernameLabel}</LocaleConsumer>{' '}
         <input value={this.props.value} onChange={this.handleUserChange} />
       </div>
     )

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 }