Hometask 8

src/components/App.js

@@ -13,6 +13,10 @@ class App extends Component {
         user: PropTypes.string
     }
 
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
+
     state = {
         username: 'Roma'
     }
@@ -27,25 +31,26 @@ class App extends Component {
 
     render() {
         console.log('---', 1)
+        const { dictionary } = this.context
         return (
             <div>
-                <h1>App name</h1>
+                <h1>{dictionary.App_name}</h1>
                 <Menu>
-                    <MenuItem to = "/articles">Articles</MenuItem>
-                    <MenuItem to = "/filters">Filters</MenuItem>
-                    <MenuItem to = "/counter">Counter</MenuItem>
-                    <MenuItem to = "/comments">Comments</MenuItem>
+                    <MenuItem to = "/articles">{dictionary.Articles}</MenuItem>
+                    <MenuItem to = "/filters">{dictionary.Filters}</MenuItem>
+                    <MenuItem to = "/counter">{dictionary.Counter}</MenuItem>
+                    <MenuItem to = "/comments">{dictionary.Comments}</MenuItem>
                 </Menu>
                 <UserForm value = {this.state.username} onChange = {this.handleUserChange}/>
                 <Switch>
                     <Route path = "/counter" component = {CounterPage} exact/>
                     <Route path = "/filters" component = {FiltersPage}/>
-                    <Route path = "/articles/new" render = {() => <h2>Add new Article form</h2>}/>
+                    <Route path = "/articles/new" render = {() => <h2>{dictionary.Add_new_Article_form}</h2>}/>
                     <Route path = "/articles" component = {ArticleListPage}/>
                     <Route path = "/comments" component = {CommentsPage}/>
-                    <Route path = "/error" render = {() => <h1>Error page</h1>}/>
+                    <Route path = "/error" render = {() => <h1>{dictionary.Error_page}</h1>}/>
                     <Redirect from = "/" exact to = "/articles" />
-                    <Route path = "*" render = {() => <h1>Nor found</h1>}/>
+                    <Route path = "*" render = {() => <h1>{dictionary.Nor_found}</h1>}/>
                 </Switch>
             </div>
         )

src/components/Article/index.js

@@ -22,6 +22,10 @@ class Article extends Component {
         }),
     }
 
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
+
     constructor(props) {
         super(props)
 
@@ -39,17 +43,18 @@ class Article extends Component {
     render() {
         console.log('---', 4)
         const {article, isOpen, toggleOpen} = this.props
+        const { dictionary } = this.context
         if (!article) return null
 
         return (
             <div>
                 <h2 ref = {this.setTitleRef} onClick = {this.increment}>
                     {article.title}
                     <button onClick={toggleOpen}>
-                        {isOpen ? 'close' : 'open'}
+                        {isOpen ? dictionary.close : dictionary.open}
                     </button>
                     <button onClick = {this.handleDelete}>
-                        delete
+                        {dictionary.delete}
                     </button>
                 </h2>
                 <CSSTransition

src/components/ArticleList.js

@@ -8,6 +8,10 @@ import Loader from './common/Loader'
 import {NavLink, withRouter} from 'react-router-dom'
 
 class ArticleList extends Accordion {
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
+
     componentDidMount() {
         this.props.loadAllArticles()
     }
@@ -16,7 +20,7 @@ class ArticleList extends Accordion {
         const {articles, loading} = this.props
 
         if (loading) return <Loader />
-        if (!articles.length) return <h3>No Articles</h3>
+        if (!articles.length) return <h3>{this.context.dictionary.No_Articles}</h3>
         const articleElements = articles.map((article) => <li key={article.id}>
             <NavLink to = {`/articles/${article.id}`} activeStyle = {{color: 'red'}}>{article.title}</NavLink>
         </li>)
@@ -43,4 +47,4 @@ export default withRouter(connect(state => {
         loading: articlesLoadingSelector(state),
 //        router: state.router
     }
-}, { loadAllArticles })(ArticleList))
+}, { loadAllArticles }, null, { pure: false })(ArticleList))

src/components/CommentList.js

@@ -18,7 +18,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 }) {
@@ -28,13 +29,13 @@ class CommentList extends Component {
     }
 
     render() {
-        console.log('---', 'context: ', this.context)
         const {isOpen, toggleOpen} = this.props
-        const text = isOpen ? 'hide comments' : 'show comments'
+        const {dictionary} = this.context
+        const text = isOpen ? dictionary.hide_comments : dictionary.show_comments
         return (
             <div>
                 <button onClick={toggleOpen}>{text}</button>
-                <h2>User: {this.context.user}</h2>
+                <h2>{this.context.dictionary.User}: {this.context.user}</h2>
                 {this.getBody()}
             </div>
         )
@@ -50,7 +51,7 @@ class CommentList extends Component {
             <ul>
                 {comments.map(id => <li key = {id}><Comment id = {id} /></li>)}
             </ul>
-        ) : <h3>No comments yet</h3>
+        ) : <h3>{this.context.dictionary.No_comments_yet}</h3>
 
         return (
             <div>

src/components/Menu/index.js

@@ -7,10 +7,14 @@ class Menu extends Component {
 
     };
 
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
+
     render() {
         return (
             <div>
-                <h2>Main menu:</h2>
+                <h2>{this.context.dictionary.Main_menu}:</h2>
                 {this.props.children}
             </div>
         )

src/components/Root.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import App from './App'
+import dictionary from '../dictionary'
+
+class Root extends Component {
+    static childContextTypes = {
+        dictionary: PropTypes.object
+    }
+
+    getChildContext() {
+        return {
+            dictionary
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <App/>
+            </div>
+        )
+    }
+}
+
+export default Root

src/components/UserForm.js

@@ -1,9 +1,14 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 class UserForm extends Component {
     static propTypes = {
 
-    };
+    }
+
+    static contextTypes = {
+        dictionary: PropTypes.object
+    }
 
     state = {
         user: ''
@@ -13,7 +18,7 @@ class UserForm extends Component {
         const {value} = this.props
         return (
             <div>
-                Username: <input type = "text" value = {value} onChange = {this.handleChange}/>
+                {this.context.dictionary.Username}: <input type = "text" value = {value} onChange = {this.handleChange}/>
             </div>
         )
     }

src/components/common/Loader.js

@@ -1,13 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-function Loader(props) {
+function Loader(props, {dictionary}) {
     return (
-        <h2>Loading...</h2>
+        <h2>{dictionary.Loading}...</h2>
     )
 }
 
 Loader.propTypes = {
 }
 
+Loader.contextTypes = {
+    dictionary: PropTypes.object
+}
+
 export default Loader

src/components/routes/ArticleList.js

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

src/dictionary.js

@@ -0,0 +1,23 @@
+export default {
+    'App_name': 'Название приложения',
+    'Articles': 'Статьи',
+    'Filters': 'Фильтры',
+    'Counter': 'Счетчик',
+    'Comments': 'Комментарии',
+    'Add_new_Article_form': 'Добавить новую статью',
+    'Error_page': 'Ошбика',
+    'Nor_found': 'Не найдено',
+    'Main_menu': 'Главное меню',
+    'Username': 'Имя пользователя',
+    'No_Articles': 'Нет статей',
+    'Article_list': 'Список статей',
+    'Please_select_an_article': 'Пожалуйста, выберите статью',
+    'Loading': 'Загрузка',
+    'User': 'Пользователь',
+    'No_comments_yet': 'Пока нет комментариев',
+    'hide_comments': 'скрыть комментарии',
+    'show_comments': 'показать комметарии',
+    'close': 'закрыть',
+    'open': 'открыть',
+    'delete': 'удалить'
+}

src/index.js

@@ -1,14 +1,16 @@
 import React from 'react'
 import {render} from 'react-dom'
 import {Provider} from 'react-redux'
-import App from './components/App'
+import Root from './components/Root'
 import {ConnectedRouter} from 'react-router-redux'
 //import {HashRouter, BrowserRouter} from 'react-router-dom'
 import store from './store'
 import history from './history'
 
+
+
 render(<Provider store = {store}>
     <ConnectedRouter history = {history}>
-        <App/>
+        <Root/>
     </ConnectedRouter>
 </Provider>, document.getElementById('container'))

src/reducer/articles.js

@@ -48,7 +48,11 @@ export default (articles = new ReducerRecord(), action) => {
             return articles
                 .set('loading', false)
                 .set('loaded', true)
-                .set('entities', arrToMap(response, ArticleRecord))
+                .update('entities', (entitiesValue) => {
+                    return entitiesValue.mergeDeepWith((oldValue, newValue, key)=> {
+                        return newValue === null ? oldValue : newValue
+                    }, arrToMap(response, ArticleRecord))
+                })
 
         case LOAD_ARTICLE + START:
             return articles.setIn(['entities', payload.id, 'loading'], true)