HT7

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
+export default App

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,14 +27,15 @@ class Article extends Component {
 
     componentDidMount() {
         const { loadArticleById, article, id } = this.props
+        console.log('componentDidMount', article)
         if (!article || (!article.text && !article.loading)) loadArticleById(id)
     }
 
     render() {
         console.log('---', 'rendering Article')
         if (this.state.error) return <h2>{this.state.error.message}</h2>
 
-        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')}
                     </button>
                     <button onClick = {this.handleDelete}>
-                        delete me
+                        {__("delete me")}
                     </button>
                 </h2>
                 <CSSTransition
@@ -89,4 +97,4 @@ Article.propTypes = {
 
 export default connect((state, props) => ({
     article: articleSelector(state, props)
-}), { deleteArticle, loadArticleById }, null, { pure: false })(Article)
+}), { deleteArticle, loadArticleById }, null, { pure: false })(translate(Article))

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 (
             <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))
+export default connect(null, { loadArticleComments }, null, { pure: false })(toggleOpen(translate(CommentList)))

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 <div> {this.props.children} </div>
+  }
+}
+
+
+export function translate (OriginalComponent) {
+  return class Translated extends React.Component {
+
+    static contextTypes = {
+        dictionary: PropTypes.object,
+    }
+
+    translateWord = message => translateSelector(this.context.dictionary, message)
+
+    render() {
+        return <OriginalComponent {...this.props} {...this.state} __ = {this.translateWord}/>
+    }
+  }
+}

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(
     <Provider store = {store}>
         <ConnectedRouter history = {history}>
+          <Translator dictionary = {dictionary} >
             <App />
+          </Translator>
         </ConnectedRouter>
     </Provider>
     , document.getElementById('root'))

src/reducer/articles.js

@@ -41,15 +41,17 @@ 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)
 
         case LOAD_ARTICLE + START:
             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
     }
-}
+}

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))
+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)