From 791f24b31d888114e771456f21fafcd06515c755 Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Tue, 20 Mar 2018 14:46:44 +0200
Subject: [PATCH 1/4] Get article by direct url

---
 src/App.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index a650aee..8a5b7c1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import Filters from './components/filters'
 import Counter from './components/counter'
 import 'react-select/dist/react-select.css'
 import CommentsPage from './components/routes/comments-page'
+import Article from './components/article'
 
 class App extends Component {
     static propTypes = {
@@ -43,6 +44,7 @@ class App extends Component {
                     <Route path = "/counter" component = {Counter} exact />
                     <Route path = "/filters" component = {Filters} />
                     <Route path = "/articles/new" render = {() => <h1>New Article Form</h1>} />
+                    <Route path = "/articles/:id" component = {({ match }) => <Article id = {match.params.id} key = {match.params.id} isOpen />} />
                     <Route path = "/articles" component = {ArticlesPage} />
                     <Route path = "/comments" component = {CommentsPage} />
                     <Route path = "/error" render = {() => <h1>Error page</h1>} />
@@ -55,4 +57,4 @@ class App extends Component {
     handleUserChange = username => this.setState({ username })
 }
 
-export default App
\ No newline at end of file
+export default App

From f344101361802c91af936772a0e9acec0713cde2 Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Tue, 20 Mar 2018 19:39:57 +0200
Subject: [PATCH 2/4] Add Intl

---
 src/App.js                           | 29 +++++++----
 src/components/article-list/index.js |  2 +-
 src/components/article/index.js      | 12 ++---
 src/components/comment-form/index.js |  9 ++--
 src/components/comment-list/index.js |  5 +-
 src/components/counter.js            |  5 +-
 src/components/filters/select.js     |  2 +-
 src/components/loader.js             |  7 +--
 src/components/routes/articles.js    |  7 +--
 src/components/user-form.js          |  8 +--
 src/constants/index.js               |  4 +-
 src/decorators/FormatIntl.js         | 23 ++++++++
 src/international.js                 | 78 ++++++++++++++++++++++++++++
 13 files changed, 153 insertions(+), 38 deletions(-)
 create mode 100644 src/decorators/FormatIntl.js
 create mode 100644 src/international.js

diff --git a/src/App.js b/src/App.js
index 8a5b7c1..008807d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,35 +9,46 @@ import Counter from './components/counter'
 import 'react-select/dist/react-select.css'
 import CommentsPage from './components/routes/comments-page'
 import Article from './components/article'
+import { EN, RU } from './constants'
+import FormatIntl from './decorators/FormatIntl'
 
 class App extends Component {
     static propTypes = {
     };
 
     static childContextTypes = {
-        user: PropTypes.string
+        user: PropTypes.string,
+        lang: PropTypes.string
     }
 
     state = {
-        username: ''
+        username: '',
+        lang: EN,
     }
 
     getChildContext() {
         return {
-            user: this.state.username
+            user: this.state.username,
+            lang: this.state.lang
         }
     }
 
+    handleLangButton = lang => {
+      this.setState({ lang })
+    }
+
     render() {
-        console.log('---', 'rendering App')
+        console.log('---context', this.context)
         return (
             <div>
+                <button onClick = {() => this.handleLangButton(RU)}>RU</button>
+                <button onClick = {() => this.handleLangButton(EN)}>EN</button>
                 <UserForm value = {this.state.username} onChange = {this.handleUserChange}/>
                 <ul>
-                    <li><NavLink to = "/counter" activeStyle = {{ color: 'red' }}>counter</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>
+                    <li><NavLink to = "/counter" activeStyle = {{ color: 'red' }}>{this.props.getIntl("counter", this.state.lang)}</NavLink></li>
+                    <li><NavLink to = "/filters" activeStyle = {{ color: 'red' }}>{this.props.getIntl("filters", this.state.lang)}</NavLink></li>
+                    <li><NavLink to = "/articles" activeStyle = {{ color: 'red' }}>{this.props.getIntl("articles", this.state.lang)}</NavLink></li>
+                    <li><NavLink to = "/comments/1" activeStyle = {{ color: 'red' }}>{this.props.getIntl("comments", this.state.lang)}</NavLink></li>
                 </ul>
                 <Switch>
                     <Redirect from = "/" to = "/articles" exact />
@@ -57,4 +68,4 @@ class App extends Component {
     handleUserChange = username => this.setState({ username })
 }
 
-export default App
+export default FormatIntl(App)
diff --git a/src/components/article-list/index.js b/src/components/article-list/index.js
index 3e743d8..5ef59da 100644
--- a/src/components/article-list/index.js
+++ b/src/components/article-list/index.js
@@ -43,4 +43,4 @@ export default connect(state => ({
     loading: loadingArticlesSelector(state),
     loaded: loadedArticlesSelector(state),
     router: state.router
-}), { loadAllArticles })(accordion(ArticleList))
\ No newline at end of file
+}), { loadAllArticles })(accordion(ArticleList))
diff --git a/src/components/article/index.js b/src/components/article/index.js
index cdaa19a..1f69990 100644
--- a/src/components/article/index.js
+++ b/src/components/article/index.js
@@ -6,6 +6,7 @@ import CommentList from '../comment-list'
 import Loader from '../loader'
 import { deleteArticle, loadArticleById } from '../../AC'
 import { articleSelector } from '../../selectors'
+import FormatIntl from '../../decorators/FormatIntl'
 import './style.css'
 
 class Article extends Component {
@@ -34,14 +35,8 @@ class Article extends Component {
             <Fragment>
                 <h2>
                     {article.title}
-                    <button
-                        className = "test__article--button"
-                        onClick={() => onButtonClick(article.id)}
-                    >
-                        {isOpen ? 'close' : 'open'}
-                    </button>
                     <button onClick = {this.handleDelete}>
-                        delete me
+                        {this.props.getIntl("deleteMe")}
                     </button>
                 </h2>
                 <CSSTransition
@@ -84,9 +79,8 @@ Article.propTypes = {
         title: PropTypes.string,
         text: PropTypes.string
     }),
-    onButtonClick: PropTypes.func
 }
 
 export default connect((state, props) => ({
     article: articleSelector(state, props)
-}), { deleteArticle, loadArticleById }, null, { pure: false })(Article)
\ No newline at end of file
+}), { deleteArticle, loadArticleById }, null, { pure: false })(FormatIntl(Article))
diff --git a/src/components/comment-form/index.js b/src/components/comment-form/index.js
index e5a795b..d0c4b51 100644
--- a/src/components/comment-form/index.js
+++ b/src/components/comment-form/index.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import {connect} from 'react-redux'
 import {addComment} from '../../AC'
+import FormatIntl from '../../decorators/FormatIntl'
 import './style.css'
 
 class CommentForm extends Component {
@@ -15,13 +16,13 @@ class CommentForm extends Component {
     render() {
         return (
             <form onSubmit = {this.handleSubmit}>
-                user: <input value = {this.state.user}
+                {this.props.getIntl("user")}: <input value = {this.state.user}
                              onChange = {this.handleChange('user')}
                              className = {this.getClassName('user')} />
-                comment: <input value = {this.state.text}
+                {this.props.getIntl("comment")}: <input value = {this.state.text}
                                 onChange = {this.handleChange('text')}
                                 className = {this.getClassName('text')} />
-                <input type = "submit" value = "submit" disabled = {!this.isValidForm()}/>
+                <button onClick={this.handleSubmit} disabled = {!this.isValidForm()}>{this.props.getIntl("submit")}</button>
             </form>
         )
     }
@@ -63,4 +64,4 @@ const limits = {
 
 export default connect(null, (dispatch, ownProps) => ({
     addComment: (comment) => dispatch(addComment(comment, ownProps.articleId))
-}))(CommentForm)
\ No newline at end of file
+}))(FormatIntl(CommentForm))
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
index 7bb587e..21f0883 100644
--- a/src/components/comment-list/index.js
+++ b/src/components/comment-list/index.js
@@ -7,6 +7,7 @@ import CommentForm from '../comment-form'
 import Loader from '../loader'
 import toggleOpen from '../../decorators/toggleOpen'
 import {loadArticleComments} from '../../AC'
+import FormatIntl from '../../decorators/FormatIntl'
 import './style.css'
 
 class CommentList extends Component {
@@ -36,7 +37,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.props.getIntl("hideComments") : this.props.getIntl("showComments")
         return (
             <div>
                 <button onClick={toggleOpen} className="test__comment-list--btn">{text}</button>
@@ -85,4 +86,4 @@ class CommentList extends Component {
 }
 
 
-export default connect(null, { loadArticleComments }, null, { pure: false })(toggleOpen(CommentList))
\ No newline at end of file
+export default connect(null, { loadArticleComments }, null, { pure: false })(toggleOpen(FormatIntl(CommentList)))
diff --git a/src/components/counter.js b/src/components/counter.js
index b49ee19..20ca740 100644
--- a/src/components/counter.js
+++ b/src/components/counter.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {increment} from '../AC'
+import FormatIntl from '../decorators/FormatIntl'
 
 class Counter extends Component {
     static propTypes = {
@@ -13,7 +14,7 @@ class Counter extends Component {
             <div>
                 <h3>
                     {this.props.count}
-                    <button onClick = {this.handleIncrement}>increment</button>
+                    <button onClick = {this.handleIncrement}>{this.props.getIntl("incriment")}</button>
                 </h3>
             </div>
         )
@@ -29,4 +30,4 @@ const mapStateToProps = state => ({
     count: state.counter
 })
 
-export default connect(mapStateToProps)(Counter)
\ No newline at end of file
+export default connect(mapStateToProps)(FormatIntl(Counter))
diff --git a/src/components/filters/select.js b/src/components/filters/select.js
index 9f57049..78e1221 100644
--- a/src/components/filters/select.js
+++ b/src/components/filters/select.js
@@ -33,4 +33,4 @@ class SelectFilter extends Component {
 export default connect(state => ({
     selected: state.filters.selected,
     articles: articleListSelector(state)
-}), { changeSelection })(SelectFilter)
\ No newline at end of file
+}), { changeSelection })(SelectFilter)
diff --git a/src/components/loader.js b/src/components/loader.js
index 9418787..6d0bc35 100644
--- a/src/components/loader.js
+++ b/src/components/loader.js
@@ -1,12 +1,13 @@
 import React from 'react'
+import FormatIntl from '../decorators/FormatIntl'
 
-function Loader() {
+function Loader({ getIntl }) {
     return (
-        <h2>Loading...</h2>
+        <h2>{getIntl("loading")}...</h2>
     )
 }
 
 Loader.propTypes = {
 }
 
-export default Loader
\ No newline at end of file
+export default FormatIntl(Loader)
diff --git a/src/components/routes/articles.js b/src/components/routes/articles.js
index 7d866b8..43ab21e 100644
--- a/src/components/routes/articles.js
+++ b/src/components/routes/articles.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { Route } from 'react-router-dom'
 import ArticleList from '../article-list'
 import Article from '../article'
+import FormatIntl from '../../decorators/FormatIntl'
 
 class ArticlesRoute extends Component {
     static propTypes = {
@@ -12,7 +13,7 @@ class ArticlesRoute extends Component {
         console.log('---', 'rendering Articles Page')
         return (
             <div>
-                <h2>Articles page</h2>
+                <h2>{this.props.getIntl("articlesPage")}</h2>
                 <ArticleList />
                 <Route path = {`${this.props.match.path}/:id`} children = {this.getArticle}/>
             </div>
@@ -20,10 +21,10 @@ class ArticlesRoute extends Component {
     }
 
     getArticle = ({ match }) => {
-        if (!match) return <h2>Please select an article</h2>
+        if (!match) return <h2>{this.props.getIntl("pleaseSelectAnArticle")}</h2>
 
         return <Article id = {match.params.id} key = {match.params.id} isOpen />
     }
 }
 
-export default ArticlesRoute
\ No newline at end of file
+export default FormatIntl(ArticlesRoute)
diff --git a/src/components/user-form.js b/src/components/user-form.js
index 15083af..19ed28e 100644
--- a/src/components/user-form.js
+++ b/src/components/user-form.js
@@ -1,14 +1,16 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import FormatIntl from '../decorators/FormatIntl'
 
 class UserForm extends Component {
     static propTypes = {
-
+      getIntl: PropTypes.func
     };
 
     render() {
         return (
             <div>
-                username: <input value = {this.props.value} onChange = {this.handleChange}/>
+                {this.props.getIntl("username")}: <input value = {this.props.value} onChange = {this.handleChange}/>
             </div>
         )
     }
@@ -22,4 +24,4 @@ class UserForm extends Component {
     }
 }
 
-export default UserForm
\ No newline at end of file
+export default FormatIntl(UserForm)
diff --git a/src/constants/index.js b/src/constants/index.js
index 38d2c92..41bfe52 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -13,4 +13,6 @@ export const LOAD_COMMENTS_FOR_PAGE = 'LOAD_COMMENTS_FOR_PAGE'
 
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'
-export const FAIL = '_FAIL'
\ No newline at end of file
+export const FAIL = '_FAIL'
+export const RU = 'RU'
+export const EN = 'EN'
diff --git a/src/decorators/FormatIntl.js b/src/decorators/FormatIntl.js
new file mode 100644
index 0000000..b74036f
--- /dev/null
+++ b/src/decorators/FormatIntl.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { RU, EN } from '../constants'
+import { MESSAGES } from '../international'
+
+export default (OriginalComponent) => class FormatIntl extends Component {
+
+  static contextTypes = {
+      lang: PropTypes.string
+  }
+
+  getIntl = (id, langParam) => {
+    const { lang } = this.context
+    const message = MESSAGES[id][lang || langParam]
+    return <span>{message || 'No id'}</span>
+  }
+
+  render() {
+    return  <OriginalComponent {...this.props} getIntl = {this.getIntl} />
+  }
+
+
+}
diff --git a/src/international.js b/src/international.js
new file mode 100644
index 0000000..8461995
--- /dev/null
+++ b/src/international.js
@@ -0,0 +1,78 @@
+export const MESSAGES = {
+  "username": {
+    "EN": "username",
+    "RU": "имя пользователя"
+  },
+  "counter": {
+    "EN": "counter",
+    "RU": "счетчик"
+  },
+  "filters": {
+    "EN": "filters",
+    "RU": "фильтры"
+  },
+  "articles": {
+    "EN": "articles",
+    "RU": "статьи"
+  },
+  "articlesPage": {
+    "EN": "Articles page",
+    "RU": "Список статей"
+  },
+  "pleaseSelectAnArticle": {
+    "EN": "Please select an article",
+    "RU": "Пожалуста выберите статью"
+  },
+  "comments": {
+    "EN": "comments",
+    "RU": "комментарии"
+  },
+  "incriment": {
+    "EN": "incriment",
+    "RU": "приращивание"
+  },
+  "select": {
+    "EN": "Select",
+    "RU": "Выберите статью"
+  },
+  "loading": {
+    "EN": "Loading",
+    "RU": "Загрузка"
+  },
+  "close": {
+    "EN": "close",
+    "RU": "закрыть"
+  },
+  "deleteMe": {
+    "EN": "delete me",
+    "RU": "удали меня"
+  },
+  "showComments": {
+    "EN": "show comments",
+    "RU": "показать комментарии"
+  },
+  "hideComments": {
+    "EN": "hide comments",
+    "RU": "скрыть комментарии"
+  },
+  "user": {
+    "EN": "user",
+    "RU": "пользователь"
+  },
+  "comment": {
+    "EN": "comment",
+    "RU": "комментировать"
+  },
+  "submit": {
+    "EN": "submit",
+    "RU": "запостить"
+  },
+  "errorPage": {
+    "EN": "Error Page",
+    "RU": "Страница не доступна"
+  },
+  "open": {
+    "EN": "open",
+    "RU": "открыто"
+  }
+}

From 4612a75cf61a47701207402cee81b35f42a885da Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Tue, 20 Mar 2018 19:51:27 +0200
Subject: [PATCH 3/4] Add Error and Not Found Pages

---
 src/App.js           | 4 ++--
 src/international.js | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 008807d..9874cbc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -58,8 +58,8 @@ class App extends Component {
                     <Route path = "/articles/:id" component = {({ match }) => <Article id = {match.params.id} key = {match.params.id} isOpen />} />
                     <Route path = "/articles" component = {ArticlesPage} />
                     <Route path = "/comments" component = {CommentsPage} />
-                    <Route path = "/error" render = {() => <h1>Error page</h1>} />
-                    <Route path = "*" render = {() => <h1>Not Found Page</h1>} />
+                    <Route path = "/error" render = {() => <h1>{this.props.getIntl("errorPage", this.state.lang)}</h1>} />
+                    <Route path = "*" render = {() => <h1>{this.props.getIntl("notFoundPage", this.state.lang)}</h1>} />
                 </Switch>
             </div>
         )
diff --git a/src/international.js b/src/international.js
index 8461995..3a44060 100644
--- a/src/international.js
+++ b/src/international.js
@@ -69,10 +69,14 @@ export const MESSAGES = {
   },
   "errorPage": {
     "EN": "Error Page",
-    "RU": "Страница не доступна"
+    "RU": "Ошибка"
   },
   "open": {
     "EN": "open",
     "RU": "открыто"
+  },
+  "notFoundPage": {
+    "EN": "Not Found Page",
+    "RU": "Страница не найдена"
   }
 }

From e7c89446ece4f32c6d7e6ecb05ac6da7e20b0e21 Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Tue, 20 Mar 2018 19:58:00 +0200
Subject: [PATCH 4/4] Add No Commenyts yet

---
 src/components/comment-list/index.js | 2 +-
 src/international.js                 | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
index 21f0883..0d253e0 100644
--- a/src/components/comment-list/index.js
+++ b/src/components/comment-list/index.js
@@ -64,7 +64,7 @@ class CommentList extends Component {
                 {
                     comments.length
                         ? this.getComments()
-                        : <h3 className="test__comment-list--empty">No comments yet</h3>
+                        : <h3 className="test__comment-list--empty">{this.props.getIntl("noCommentsYet")}</h3>
                 }
                 <CommentForm articleId = {id} />
             </div>
diff --git a/src/international.js b/src/international.js
index 3a44060..0999053 100644
--- a/src/international.js
+++ b/src/international.js
@@ -78,5 +78,9 @@ export const MESSAGES = {
   "notFoundPage": {
     "EN": "Not Found Page",
     "RU": "Страница не найдена"
+  },
+  "noCommentsYet": {
+    "EN": "No comments yet",
+    "RU": "Пока комментариев нет"
   }
 }