home task 7

src/App.js

@@ -8,13 +8,15 @@ 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 dictionary from './dictionary';
 
 class App extends Component {
     static propTypes = {
     };
 
     static childContextTypes = {
-        user: PropTypes.string
+        user: PropTypes.string,
+        dictionary: PropTypes.object
     }
 
     state = {
@@ -23,7 +25,8 @@ class App extends Component {
 
     getChildContext() {
         return {
-            user: this.state.username
+            user: this.state.username,
+            dictionary: dictionary
         }
     }
 

src/components/article-list/index.js

@@ -24,6 +24,7 @@ export class ArticleList extends Component {
 
     render() {
         const { articles, loading } = this.props
+        console.log('LOADING', loading);
         if (loading) return <Loader />
         const articleElements = articles.map(article =>
             <li key = {article.id} className = "test__article-list--item">

src/components/article/index.js

@@ -13,6 +13,10 @@ class Article extends Component {
         error: null
     }
 
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
+
     componentDidCatch(error) {
         console.log('---', error)
         this.setState({ error })
@@ -25,6 +29,7 @@ class Article extends Component {
 
     render() {
         console.log('---', 'rendering Article')
+        const {dictionary: {deleteMe, open, close}} = this.context
         if (this.state.error) return <h2>{this.state.error.message}</h2>
 
         const { isOpen, article, onButtonClick } = this.props
@@ -38,10 +43,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
+                        {deleteMe}
                     </button>
                 </h2>
                 <CSSTransition

src/components/comment-list/index.js

@@ -24,7 +24,8 @@ class CommentList extends Component {
     static contextTypes = {
         store: PropTypes.object,
         router: PropTypes.object,
-        user: PropTypes.string
+        user: PropTypes.string,
+        dictionary: PropTypes.object
     }
 
     componentWillReceiveProps({ isOpen, article, loadArticleComments }) {
@@ -34,9 +35,10 @@ class CommentList extends Component {
     }
 
     render() {
-        const {isOpen, toggleOpen} = this.props
+        const {isOpen, toggleOpen} = this.props,
+            {hideComments, showComments} = this.context;
         console.log('---', 'rendering CommentList')
-        const text = isOpen ? 'hide comments' : 'show comments'
+        const text = isOpen ? hideComments : showComments;
         return (
             <div>
                 <button onClick={toggleOpen} className="test__comment-list--btn">{text}</button>

src/components/routes/articles.js

@@ -2,25 +2,31 @@ import React, { Component } from 'react'
 import { Route } from 'react-router-dom'
 import ArticleList from '../article-list'
 import Article from '../article'
+import PropTypes from "prop-types";
 
 class ArticlesRoute extends Component {
     static propTypes = {
 
     };
 
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
+
     render() {
         console.log('---', 'rendering Articles Page')
         return (
             <div>
-                <h2>Articles page</h2>
+                <h2>{this.context.dictionary.articlePage}</h2>
                 <ArticleList />
                 <Route path = {`${this.props.match.path}/:id`} children = {this.getArticle}/>
             </div>
         )
     }
 
     getArticle = ({ match }) => {
-        if (!match) return <h2>Please select an article</h2>
+        const {dictionary} = this.context
+        if (!match) return <h2>{dictionary.pleaseSelectArticle}</h2>
 
         return <Article id = {match.params.id} key = {match.params.id} isOpen />
     }

src/components/user-form.js

@@ -1,14 +1,19 @@
 import React, { Component } from 'react'
+import PropTypes from "prop-types";
 
 class UserForm extends Component {
     static propTypes = {
 
-    };
+    }
+
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
 
     render() {
         return (
             <div>
-                username: <input value = {this.props.value} onChange = {this.handleChange}/>
+                {this.context.dictionary.username}: <input value = {this.props.value} onChange = {this.handleChange}/>
             </div>
         )
     }

src/dictionary.js

@@ -0,0 +1,14 @@
+const dictionary = {
+    username: 'Имя пользователя',
+    articlesPage: 'Статьи',
+    pleaseSelectArticle: 'Выберите статью',
+    loading: 'Загрузка',
+    hideComments: 'Спрятать коментарии',
+    showComments: 'Показать комментарии',
+    articlePage: 'Стараница статей',
+    deleteMe: 'Удалить',
+    open: 'Открыть',
+    close: 'Закрыть'
+}
+
+export default dictionary

src/middlewares/logger.js

@@ -1,8 +1,11 @@
+import articles from "../reducer/articles";
+import comments from "../reducer/comments";
+
 export default store => next => action => {
     console.log('---', 'state before: ', store.getState())
     console.log('---', 'dispatching action: ', action)
 
     next(action)
 
-    console.log('---', 'state after: ', store.getState())
+    console.log('---', 'state after: ', store.getState().articles.toJS(),  store.getState().comments.toJS());
 }

src/reducer/articles.js

@@ -3,7 +3,7 @@ import {
     START, SUCCESS, FAIL
 } from '../constants'
 import { arrToMap } from './utils'
-import { Record } from 'immutable'
+import { Record, fromJS } from 'immutable'
 
 const ArticleRecord = Record({
     id: null,
@@ -41,7 +41,7 @@ export default (articles = new ReducerState(), action) => {
 
         case LOAD_ALL_ARTICLES + SUCCESS:
             return articles
-                .set('entities', arrToMap(response, ArticleRecord))
+                .update('entities', entities => entities.merge(arrToMap(response, ArticleRecord), entities))
                 .set('loading', false)
                 .set('loaded', true)