Hw 8

src/components/App.js

@@ -7,29 +7,37 @@ import CounterPage from './routes/Counter'
 import CommentsPage from './routes/CommentsPage'
 import { Route, Redirect, Switch } from 'react-router-dom'
 import Menu, { MenuItem } from './Menu'
+import Header from './Header'
+import {locales} from '../locales'
+import {getLocaleText} from './utils'
 
 class App extends Component {
     static childContextTypes = {
-        user: PropTypes.string
+        user: PropTypes.string,
+        locale: PropTypes.object
     }
 
     state = {
-        username: 'Roma'
+        username: 'Roma',
+        localeName: null
     }
 
     getChildContext() {
         return {
-            user: this.state.username
+            user: this.state.username,
+            locale: this.state.localeName != null ? locales[this.state.localeName] : null
         }
     }
 
     handleUserChange = username => this.setState({ username })
 
+    handleLocaleChange = localeName => () => this.setState({ localeName })
+
     render() {
-        console.log('---', 1)
+        console.log('---', 1, this.context)
         return (
             <div>
-                <h1>App name</h1>
+                <Header onLocaleChange = {this.handleLocaleChange} />
                 <Menu>
                     <MenuItem to = "/articles">Articles</MenuItem>
                     <MenuItem to = "/filters">Filters</MenuItem>

src/components/Article/index.js

@@ -6,7 +6,8 @@ import {connect} from 'react-redux'
 import CommentList from '../CommentList'
 import Loader from '../common/Loader'
 import {deleteArticle, loadArticle} from '../../AC'
-import { articleSelector } from '../../selectors'
+import { articleSelector, articlesLoadingSelector, articlesLoadedSelector } from '../../selectors'
+import {getLocaleText} from '../utils'
 import './style.css'
 
 class Article extends Component {
@@ -31,11 +32,21 @@ class Article extends Component {
         }
     }
 
+    static contextTypes = {
+        locale: PropTypes.object
+    }
+
     componentDidMount() {
         const { id, isOpen, article, loadArticle } = this.props
         if (isOpen && (!article || !article.text)) loadArticle(id)
     }
 
+    componentWillReceiveProps({id, isOpen, article, articlesLoaded, loadArticle}) {
+        if (isOpen && this.props.articlesLoading && articlesLoaded && article && !article.text) {
+            loadArticle(id)
+        }
+    }
+
     render() {
         console.log('---', 4)
         const {article, isOpen, toggleOpen} = this.props
@@ -46,10 +57,10 @@ class Article extends Component {
                 <h2 ref = {this.setTitleRef} onClick = {this.increment}>
                     {article.title}
                     <button onClick={toggleOpen}>
-                        {isOpen ? 'close' : 'open'}
+                        {isOpen ? getLocaleText(this)('close') : getLocaleText(this)('open')}
                     </button>
                     <button onClick = {this.handleDelete}>
-                        delete
+                        {getLocaleText(this)('delete')}
                     </button>
                 </h2>
                 <CSSTransition
@@ -106,5 +117,7 @@ class Article extends Component {
 
 
 export default connect((state, props) => ({
-    article: articleSelector(state, props)
+    article: articleSelector(state, props),
+    articlesLoading: articlesLoadingSelector(state),
+    articlesLoaded: articlesLoadedSelector(state)
 }), { deleteArticle, loadArticle }, null, { pure: false })(Article)

src/components/ArticleList.js

@@ -6,6 +6,7 @@ import {filtratedArticlesSelector, articlesLoadingSelector} from '../selectors'
 import {loadAllArticles} from '../AC'
 import Loader from './common/Loader'
 import {NavLink, withRouter} from 'react-router-dom'
+import {getLocaleText} from './utils'
 
 class ArticleList extends Accordion {
     componentDidMount() {

src/components/CommentForm/index.js

@@ -1,12 +1,18 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {addComment} from '../../AC'
+import {getLocaleText} from '../utils'
 import './style.css'
 
 class CommentForm extends Component {
     static propTypes = {
     };
 
+    static contextTypes = {
+        locale: PropTypes.object
+    }
+
     state = {
         user: '',
         text: ''
@@ -15,10 +21,10 @@ class CommentForm extends Component {
     render() {
         return (
             <form onSubmit = {this.handleSubmit}>
-                user: <input value = {this.state.user}
+                {getLocaleText(this)('user')}: <input value = {this.state.user}
                              onChange = {this.handleChange('user')}
                              className = {this.getClassName('user')} />
-                comment: <input value = {this.state.text}
+                {getLocaleText(this)('comment')}: <input value = {this.state.text}
                                 onChange = {this.handleChange('text')}
                                 className = {this.getClassName('text')} />
                 <input type = "submit" value = "submit" disabled = {!this.isValidForm()}/>
@@ -63,4 +69,4 @@ const limits = {
 
 export default connect(null, (dispatch, ownProps) => ({
     addComment: (comment) => dispatch(addComment(comment, ownProps.articleId))
-}))(CommentForm)
+}), null, { pure: false })(CommentForm)

src/components/CommentList.js

@@ -6,6 +6,7 @@ import CommentForm from './CommentForm'
 import Loader from './common/Loader'
 import {connect} from 'react-redux'
 import {loadArticleComments} from '../AC'
+import {getLocaleText} from './utils'
 
 class CommentList extends Component {
     static propTypes = {
@@ -18,7 +19,8 @@ class CommentList extends Component {
     static contextTypes = {
         store: PropTypes.object,
         router: PropTypes.object,
-        user: PropTypes.string
+        user: PropTypes.string,
+        locale: PropTypes.object
     }
 
     componentWillReceiveProps({ isOpen, article, loadArticleComments }) {
@@ -30,11 +32,12 @@ class CommentList extends Component {
     render() {
         console.log('---', 'context: ', this.context)
         const {isOpen, toggleOpen} = this.props
-        const text = isOpen ? 'hide comments' : 'show comments'
+        const text = isOpen ? getLocaleText(this)('hide comments') :
+            getLocaleText(this)('show comments')
         return (
             <div>
                 <button onClick={toggleOpen}>{text}</button>
-                <h2>User: {this.context.user}</h2>
+                <h2>{getLocaleText(this)('User')}: {this.context.user}</h2>
                 {this.getBody()}
             </div>
         )

src/components/Header.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {getLocaleText} from './utils'
+
+export default class Header extends Component {
+    static contextTypes = {
+        locale: PropTypes.object
+    }
+
+    render() {
+        const handleLocaleChange = this.props.onLocaleChange
+
+        return (
+            <div>
+                <div>
+                    {getLocaleText(this)('Select language') + ': '}
+                    <button onClick= {handleLocaleChange()}>{getLocaleText(this)('original')}</button>
+                    <button onClick= {handleLocaleChange('ru')}>{getLocaleText(this)('ru')}</button>
+                </div>
+                <h1>{getLocaleText(this)('App name')}</h1>
+            </div>
+        )
+    }
+}

src/components/Menu/MenuItem.js

@@ -1,16 +1,24 @@
-import React from 'react'
+import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import {NavLink} from 'react-router-dom'
+import {getLocaleText} from '../utils'
 
-function MenuItem({ children, to }) {
-    return (
-        <div>
-            <NavLink to = {to} activeStyle = {{ color: 'red' }}>{children}</NavLink>
-        </div>
-    )
+class MenuItem extends Component {
+    render() {
+        const { children, to } = this.props
+        return (
+            <div>
+                <NavLink to = {to} activeStyle = {{ color: 'red' }}>{getLocaleText(this)(children)}</NavLink>
+            </div>
+        )
+    }
 }
 
 MenuItem.propTypes = {
 }
 
+MenuItem.contextTypes = {
+    locale: PropTypes.object
+}
+
 export default MenuItem

src/components/Menu/index.js

@@ -1,16 +1,21 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import MenuItem from './MenuItem'
+import {getLocaleText} from '../utils'
 
 class Menu extends Component {
     static propTypes = {
 
     };
 
+    static contextTypes = {
+        locale: PropTypes.object
+    }
+
     render() {
         return (
             <div>
-                <h2>Main menu:</h2>
+                <h2>{getLocaleText(this)('Main menu')}:</h2>
                 {this.props.children}
             </div>
         )

src/components/UserForm.js

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

src/components/common/Loader.js

@@ -1,13 +1,20 @@
-import React from 'react'
+import React, {Component} from 'react'
 import PropTypes from 'prop-types'
+import {getLocaleText} from '../utils'
 
-function Loader(props) {
-    return (
-        <h2>Loading...</h2>
-    )
+class Loader extends Component {
+    render() {
+        return (
+            <h2>{getLocaleText(this)('Loading') + '...'}</h2>
+        )
+    }
 }
 
 Loader.propTypes = {
 }
 
+Loader.contextTypes = {
+    locale: PropTypes.object
+}
+
 export default Loader

src/components/routes/ArticleList.js

@@ -1,18 +1,24 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import ArticleList from '../ArticleList'
 import Article from '../Article'
 import {Route} from 'react-router-dom'
+import {getLocaleText} from '../utils'
 
 class ArticleListPage extends Component {
     static propTypes = {
 
     };
 
+    static contextTypes = {
+        locale: PropTypes.object
+    }
+
     render() {
         console.log('---', 2)
         return (
             <div>
-                <h2>Article list:</h2>
+                <h2>{getLocaleText(this)('Article list') + ':'}</h2>
                 <ArticleList/>
                 <Route path = {`${this.props.match.path}/:id`} children = {this.getArticle} />
             </div>

src/components/utils.js

@@ -0,0 +1,4 @@
+export const getLocaleText = ctx => text => {
+    return ctx && ctx.context && ctx.context.locale &&
+        ctx.context.locale[text] != null ? ctx.context.locale[text] : text
+}

src/locales.js

@@ -0,0 +1,25 @@
+export const locales = {
+    "ru": {
+        "Select language": "Выберите язык",
+        "original": "оригинал",
+        "ru": "ру",
+        "App name": "Имя приложения",
+        "Main menu": "Главное меню",
+        "Username": "Пользователь",
+        "User": "Пользователь",
+        "user": "пользователь",
+        "Article list": "Список статей",
+        "Please select an article": "Выберите статью",
+        "Articles": "Статьи",
+        "Filters": "Фильтры",
+        "Counter": "Счетчик",
+        "Comments": "Комментарии",
+        "comment": "комментарий",
+        "open": "открыть",
+        "close": "закрыть",
+        "delete": "удалить",
+        "show comments": "показать комментарии",
+        "hide comments": "скрыть комментарии",
+        "Loading": "Загрузка"
+    }
+}

src/selectors/index.js

@@ -2,6 +2,7 @@ import {createSelector} from 'reselect'
 
 export const articlesMapSelector = state => state.articles.entities
 export const articlesLoadingSelector = state => state.articles.loading
+export const articlesLoadedSelector = state => state.articles.loaded
 export const filtersSelector = state => state.filters
 export const commentMapSelector = state => state.comments.get('entities')
 export const idSelector = (_, props) => props.id