diff --git a/src/App.js b/src/App.js
index a650aee..9874cbc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,45 +8,58 @@ 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'
+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 (
+
+
- - counter
- - filters
- - articles
- - comments
+ - {this.props.getIntl("counter", this.state.lang)}
+ - {this.props.getIntl("filters", this.state.lang)}
+ - {this.props.getIntl("articles", this.state.lang)}
+ - {this.props.getIntl("comments", this.state.lang)}
New Article Form
} />
+ } />
- Error page
} />
- Not Found Page
} />
+ {this.props.getIntl("errorPage", this.state.lang)}
} />
+ {this.props.getIntl("notFoundPage", this.state.lang)}
} />
)
@@ -55,4 +68,4 @@ class App extends Component {
handleUserChange = username => this.setState({ username })
}
-export default App
\ No newline at end of file
+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 {
{article.title}
-
({
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 (
)
}
@@ -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..0d253e0 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 (
@@ -63,7 +64,7 @@ class CommentList extends Component {
{
comments.length
? this.getComments()
- :
No comments yet
+ : {this.props.getIntl("noCommentsYet")}
}
@@ -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 {
{this.props.count}
-
+
)
@@ -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 (
- Loading...
+ {getIntl("loading")}...
)
}
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 (
-
Articles page
+
{this.props.getIntl("articlesPage")}
@@ -20,10 +21,10 @@ class ArticlesRoute extends Component {
}
getArticle = ({ match }) => {
- if (!match) return Please select an article
+ if (!match) return {this.props.getIntl("pleaseSelectAnArticle")}
return
}
}
-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 (
- username:
+ {this.props.getIntl("username")}:
)
}
@@ -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 {message || 'No id'}
+ }
+
+ render() {
+ return
+ }
+
+
+}
diff --git a/src/international.js b/src/international.js
new file mode 100644
index 0000000..0999053
--- /dev/null
+++ b/src/international.js
@@ -0,0 +1,86 @@
+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": "открыто"
+ },
+ "notFoundPage": {
+ "EN": "Not Found Page",
+ "RU": "Страница не найдена"
+ },
+ "noCommentsYet": {
+ "EN": "No comments yet",
+ "RU": "Пока комментариев нет"
+ }
+}