Ht7.2

src/App.js

@@ -1,44 +1,52 @@
 import React, { Component } from 'react'
-import { Route, Switch, Redirect } from 'react-router-dom'
+import { Redirect, Route, Switch } from 'react-router-dom'
 import ArticlesRoute from './components/routes/articles'
 import Filters from './components/filters'
 import UserForm from './components/user-form'
 import Counter from './components/counter'
 import CommentsRoute from './components/routes/comments'
 import MainMenu, { MenuItem } from './components/main-menu'
 import { Provider as UserProvider } from './contexts/user-context'
+import { Provider as LanguageProvider } from './contexts/language-context'
+import LanguageSelector from './components/language-selector'
 
 class App extends Component {
   state = {
-    username: 'Roma'
+    username: 'Roma',
+    lang: 'EN'
   }
 
   setUsername = (username) => this.setState({ username })
 
+  setLanguage = (lang) => this.setState({ lang })
+
   render() {
     return (
-      <UserProvider value={this.state.username}>
-        <div>
-          <h1>Article App</h1>
-          <MainMenu>
-            <MenuItem link="/articles">Articles</MenuItem>
-            <MenuItem link="/filters">Filters</MenuItem>
-            <MenuItem link="/counter">Counter</MenuItem>
-            <MenuItem link="/comments">Comments</MenuItem>
-          </MainMenu>
-          <UserForm value={this.state.username} onChange={this.setUsername} />
-          <Switch>
-            <Redirect from="/" exact to="/articles" />
-            <Route path="/counter" component={Counter} exact />
-            <Route path="/filters" component={Filters} />
-            <Route path="/articles/new" render={() => <h1>New article form</h1>} />
-            <Route path="/articles" component={ArticlesRoute} />
-            <Route path="/comments" component={CommentsRoute} />
-            <Route path="/error" render={() => <h1>Error Page</h1>} />
-            <Route path="/" render={() => <h1>Not Found Page</h1>} />
-          </Switch>
-        </div>
-      </UserProvider>
+      <LanguageProvider value={this.state.lang}>
+        <UserProvider value={this.state.username}>
+          <div>
+            <h1>Article App</h1>
+            <LanguageSelector value={this.state.lang} onChange={this.setLanguage} />
+            <MainMenu>
+              <MenuItem link="/articles">Articles</MenuItem>
+              <MenuItem link="/filters">Filters</MenuItem>
+              <MenuItem link="/counter">Counter</MenuItem>
+              <MenuItem link="/comments">Comments</MenuItem>
+            </MainMenu>
+            <UserForm value={this.state.username} onChange={this.setUsername} />
+            <Switch>
+              <Redirect from="/" exact to="/articles" />
+              <Route path="/counter" component={Counter} exact />
+              <Route path="/filters" component={Filters} />
+              <Route path="/articles/new" render={() => <h1>New article form</h1>} />
+              <Route path="/articles" component={ArticlesRoute} />
+              <Route path="/comments" component={CommentsRoute} />
+              <Route path="/error" render={() => <h1>Error Page</h1>} />
+              <Route path="/" render={() => <h1>Not Found Page</h1>} />
+            </Switch>
+          </div>
+        </UserProvider>
+      </LanguageProvider>
     )
   }
 }

src/components/language-selector.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+
+class LanguageSelector extends Component {
+  render() {
+    return (
+      <div style={{ margin: '20px 0' }}>
+        {this.renderItem('EN')}
+        {this.renderItem('RU')}
+      </div>
+    )
+  }
+
+  renderItem(lang) {
+    const { value } = this.props
+
+    if (value === lang) {
+      return <b>{lang}</b>
+    } else {
+      return (
+        <a href="#" onClick={(e) => this.onLanguageClick(e, lang)}>
+          {lang}
+        </a>
+      )
+    }
+  }
+
+  onLanguageClick(e, lang) {
+    e.preventDefault()
+
+    if (this.props.onChange) {
+      this.props.onChange(lang)
+    }
+  }
+}
+
+export default LanguageSelector

src/components/routes/articles.js

@@ -1,13 +1,15 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import { Route } from 'react-router-dom'
 import ArticleList from '../article-list'
 import Article from '../article'
+import { articlesLoadedSelector } from '../../selectors/index'
 
-function ArticlesRoute() {
+function ArticlesRoute({ loadedArticles }) {
   return (
     <div>
       <ArticleList />
-      <Route path="/articles/:id" children={getArticle} />
+      {loadedArticles && <Route path="/articles/:id" children={getArticle} />}
     </div>
   )
 }
@@ -17,4 +19,10 @@ const getArticle = ({ match }) =>
 
 ArticlesRoute.propTypes = {}
 
-export default ArticlesRoute
+function mapStateToProps(state) {
+  return {
+    loadedArticles: articlesLoadedSelector(state)
+  }
+}
+
+export default connect(mapStateToProps)(ArticlesRoute)

src/components/user-form.js

@@ -1,11 +1,15 @@
 import React, { Component } from 'react'
+import { Consumer as LanguageConsumer } from '../contexts/language-context'
 
 class UserForm extends Component {
   render() {
     const { value } = this.props
     return (
       <div>
-        Username: <input value={value} onChange={this.handleChange} />
+        <LanguageConsumer>
+          {(language, dict) => <span>{language === 'EN' ? 'Username' : 'Пользователь'}</span>}
+        </LanguageConsumer>
+        <input value={value} onChange={this.handleChange} />
       </div>
     )
   }

src/contexts/language-context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const { Provider, Consumer } = createContext('EN')
+
+export { Provider, Consumer }