ht 7.1

src/App.js

@@ -14,26 +14,50 @@ class App extends Component {
     };
 
     static childContextTypes = {
-        user: PropTypes.string
+        user: PropTypes.string,
+        lang: PropTypes.string,
+        vocab: PropTypes.object
     }
 
     state = {
-        username: ''
+        username: '',
+        language: 'en',
+        vocabulary: {
+          'counter':{
+            'en':'counter',
+            'ru':'счетчик'
+          },
+          'hide comments':{
+            'en':'hide comments',
+            'ru':'скрыть комментарии'
+          },
+          'Articles page':{
+            'en':'Articles page',
+            'ru':'Страница статей'
+          }
+        }
     }
 
     getChildContext() {
         return {
-            user: this.state.username
+            user: this.state.username,
+            lang: this.state.language,
+            vocab: this.state.vocabulary
         }
     }
 
     render() {
         console.log('---', 'rendering App')
         return (
             <div>
+                Language:
+                <input type="radio" name="language" onChange={this.handleLanguageChange}  value='en' checked={this.state.language === 'en' }/>English
+                <input type="radio" name="language" onChange={this.handleLanguageChange}  value='ru' checked={this.state.language === 'ru' }/>Russian
+
                 <UserForm value = {this.state.username} onChange = {this.handleUserChange}/>
+
                 <ul>
-                    <li><NavLink to = "/counter" activeStyle = {{ color: 'red' }}>counter</NavLink></li>
+                    <li><NavLink to = "/counter" activeStyle = {{ color: 'red' }}>{this.state.vocabulary['counter'][this.state.language]}</NavLink></li>
                     <li><NavLink to = "/filters" activeStyle = {{ color: 'red' }}>filters</NavLink></li>
                     <li><NavLink to = "/articles" activeStyle = {{ color: 'red' }}>articles</NavLink></li>
                     <li><NavLink to = "/comments/1" activeStyle = {{ color: 'red' }}>comments</NavLink></li>
@@ -53,6 +77,7 @@ class App extends Component {
     }
 
     handleUserChange = username => this.setState({ username })
+    handleLanguageChange = changeEvent => this.setState({ language: changeEvent.target.value })
 }
 
-export default App
+export default App

src/components/comment-list/index.js

@@ -24,7 +24,10 @@ class CommentList extends Component {
     static contextTypes = {
         store: PropTypes.object,
         router: PropTypes.object,
-        user: PropTypes.string
+        user: PropTypes.string,
+        vocab: PropTypes.object,
+        lang: PropTypes.string
+
     }
 
     componentWillReceiveProps({ isOpen, article, loadArticleComments }) {
@@ -36,7 +39,7 @@ class CommentList extends Component {
     render() {
         const {isOpen, toggleOpen} = this.props
         console.log('---', 'rendering CommentList')
-        const text = isOpen ? 'hide comments' : 'show comments'
+        const text = isOpen ? this.context.vocab['hide comments'][this.context.lang] : 'show comments'
         return (
             <div>
                 <button onClick={toggleOpen} className="test__comment-list--btn">{text}</button>
@@ -85,4 +88,4 @@ class CommentList extends Component {
 }
 
 
-export default connect(null, { loadArticleComments }, null, { pure: false })(toggleOpen(CommentList))
+export default connect(null, { loadArticleComments }, null, { pure: false })(toggleOpen(CommentList))

src/components/routes/articles.js

@@ -2,17 +2,23 @@ import React, { Component } from 'react'
 import { Route } from 'react-router-dom'
 import ArticleList from '../article-list'
 import Article from '../article'
+import PropTypes from 'prop-types'
 
 class ArticlesRoute extends Component {
     static propTypes = {
 
     };
 
+    static contextTypes = {
+        vocab: PropTypes.object,
+        lang: PropTypes.string
+    };
+
     render() {
         console.log('---', 'rendering Articles Page')
         return (
             <div>
-                <h2>Articles page</h2>
+                <h2>{this.context.vocab['Articles page'][this.context.lang]}</h2>
                 <ArticleList />
                 <Route path = {`${this.props.match.path}/:id`} children = {this.getArticle}/>
             </div>
@@ -26,4 +32,4 @@ class ArticlesRoute extends Component {
     }
 }
 
-export default ArticlesRoute
+export default ArticlesRoute