diff --git a/src/App.js b/src/App.js
index a650aee..c8c75ab 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,7 +14,7 @@ class App extends Component {
};
static childContextTypes = {
- user: PropTypes.string
+ user: PropTypes.object,
}
state = {
@@ -23,7 +23,7 @@ class App extends Component {
getChildContext() {
return {
- user: this.state.username
+ user: this.state.username,
}
}
@@ -55,4 +55,4 @@ class App extends Component {
handleUserChange = username => this.setState({ username })
}
-export default App
\ No newline at end of file
+export default App
diff --git a/src/components/article/index.js b/src/components/article/index.js
index cdaa19a..88b97bb 100644
--- a/src/components/article/index.js
+++ b/src/components/article/index.js
@@ -5,10 +5,17 @@ import { connect } from 'react-redux'
import CommentList from '../comment-list'
import Loader from '../loader'
import { deleteArticle, loadArticleById } from '../../AC'
-import { articleSelector } from '../../selectors'
+// import { articleSelector, translateSelector } from '../../selectors'
+import { articleSelector} from '../../selectors'
+// import {dictionary} from '../../fixtures'
+import { translate } from '../../decorators/translation'
import './style.css'
class Article extends Component {
+ static contextTypes = {
+ dictionary: PropTypes.object,
+ }
+
state = {
error: null
}
@@ -20,6 +27,7 @@ class Article extends Component {
componentDidMount() {
const { loadArticleById, article, id } = this.props
+ console.log('componentDidMount', article)
if (!article || (!article.text && !article.loading)) loadArticleById(id)
}
@@ -27,7 +35,7 @@ class Article extends Component {
console.log('---', 'rendering Article')
if (this.state.error) return
{this.state.error.message}
- const { isOpen, article, onButtonClick } = this.props
+ const { isOpen, article, onButtonClick, __ } = this.props
if (!article) return null
return (
@@ -38,10 +46,10 @@ class Article extends Component {
className = "test__article--button"
onClick={() => onButtonClick(article.id)}
>
- {isOpen ? 'close' : 'open'}
+ {isOpen ? __( 'close') : __('open')}
({
article: articleSelector(state, props)
-}), { deleteArticle, loadArticleById }, null, { pure: false })(Article)
\ No newline at end of file
+}), { deleteArticle, loadArticleById }, null, { pure: false })(translate(Article))
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
index 7bb587e..d4b3b0e 100644
--- a/src/components/comment-list/index.js
+++ b/src/components/comment-list/index.js
@@ -6,6 +6,7 @@ import Comment from '../comment'
import CommentForm from '../comment-form'
import Loader from '../loader'
import toggleOpen from '../../decorators/toggleOpen'
+import { translate } from '../../decorators/translation'
import {loadArticleComments} from '../../AC'
import './style.css'
@@ -34,9 +35,9 @@ class CommentList extends Component {
}
render() {
- const {isOpen, toggleOpen} = this.props
+ const {isOpen, toggleOpen, __ } = this.props
console.log('---', 'rendering CommentList')
- const text = isOpen ? 'hide comments' : 'show comments'
+ const text = isOpen ? __('hide comments') : __('show comments')
return (
@@ -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(translate(CommentList)))
diff --git a/src/decorators/translation.js b/src/decorators/translation.js
new file mode 100644
index 0000000..82e509a
--- /dev/null
+++ b/src/decorators/translation.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { translateSelector } from '../selectors'
+
+
+export class Translator extends React.Component {
+
+ static childContextTypes = {
+ dictionary: PropTypes.dict
+ }
+
+ getChildContext() {
+ return {
+ dictionary: this.props.dictionary
+ }
+ }
+
+ render() {
+ return
{this.props.children}
+ }
+}
+
+
+export function translate (OriginalComponent) {
+ return class Translated extends React.Component {
+
+ static contextTypes = {
+ dictionary: PropTypes.object,
+ }
+
+ translateWord = message => translateSelector(this.context.dictionary, message)
+
+ render() {
+ return
+ }
+ }
+}
diff --git a/src/fixtures.js b/src/fixtures.js
index 97eed41..7dbf16c 100644
--- a/src/fixtures.js
+++ b/src/fixtures.js
@@ -269,4 +269,14 @@ export default [
"text": "Commodo laborum sit nostrud reprehenderit cupidatat officia laboris. Ipsum minim culpa in enim. Voluptate dolor ea irure nisi incididunt enim magna.\n\nCupidatat quis cillum velit culpa tempor esse irure nostrud ea consectetur officia fugiat irure qui. Enim quis officia do in. Velit veniam ipsum consequat aliqua duis voluptate. Minim nisi ex aute ad.\n\nNisi Lorem ex tempor adipisicing labore. Quis occaecat fugiat pariatur labore culpa cillum laboris. Labore occaecat ut laborum sit ex do sit. Deserunt consectetur elit aute laboris est deserunt officia ullamco sit laboris officia aliquip. Aliqua ut sunt nostrud voluptate excepteur quis incididunt Lorem ut."
}
-]
\ No newline at end of file
+]
+
+export const dictionary = {
+ translateEntries: {
+ 'close': 'закрыть',
+ 'open': 'открыть',
+ 'delete me': 'удали меня',
+ 'show comments': 'показать',
+ 'hide comments': 'скрыть'
+ }
+}
diff --git a/src/index.js b/src/index.js
index 6745a62..66e6187 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,11 +6,15 @@ import App from './App'
import registerServiceWorker from './registerServiceWorker'
import store from './store'
import history from './history'
+import {Translator} from './decorators/translation'
+import {dictionary} from './fixtures'
ReactDOM.render(
+
+
, document.getElementById('root'))
diff --git a/src/reducer/articles.js b/src/reducer/articles.js
index 1eab84b..4de063e 100644
--- a/src/reducer/articles.js
+++ b/src/reducer/articles.js
@@ -41,7 +41,7 @@ export default (articles = new ReducerState(), action) => {
case LOAD_ALL_ARTICLES + SUCCESS:
return articles
- .set('entities', arrToMap(response, ArticleRecord))
+ .setIn(['entities'], arrToMap(response, ArticleRecord).merge(articles.entities))
.set('loading', false)
.set('loaded', true)
@@ -49,7 +49,9 @@ export default (articles = new ReducerState(), action) => {
return articles.setIn(['entities', payload.id, 'loading'], true)
case LOAD_ARTICLE + SUCCESS:
- return articles.setIn(['entities', payload.id], new ArticleRecord(payload.response))
+ return articles
+ .setIn(['entities', payload.id], new ArticleRecord(payload.response))
+ .setIn(['entities', payload.id, 'loading'], false)
case LOAD_ARTICLE_COMMENTS + START:
return articles.setIn(['entities', payload.articleId, 'commentsLoading'], true)
@@ -62,4 +64,4 @@ export default (articles = new ReducerState(), action) => {
default:
return articles
}
-}
\ No newline at end of file
+}
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 421e61a..6c6c752 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -22,4 +22,9 @@ export const filtratedArticles = createSelector(articleListSelector, filtersSele
export const articleSelector = createSelector(articlesMapSelector, idSelector, (articles, id) => articles.get(id))
-export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments.get(id))
\ No newline at end of file
+export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments.get(id))
+
+
+const entriesSelector = dictionary => dictionary.translateEntries
+const patternSelector = (_, message) => message//.toLowerCase()
+export const translateSelector = createSelector(entriesSelector, patternSelector, (entries, pattern) => entries[pattern] ? entries[pattern] : pattern)