Hw7 lazucov dmitrii

src/App.js

@@ -8,45 +8,58 @@ 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 Article from './components/article'
+import { EN, RU } from './constants'
+import FormatIntl from './decorators/FormatIntl'
 
 class App extends Component {
     static propTypes = {
     };
 
     static childContextTypes = {
-        user: PropTypes.string
+        user: PropTypes.string,
+        lang: PropTypes.string
     }
 
     state = {
-        username: ''
+        username: '',
+        lang: EN,
     }
 
     getChildContext() {
         return {
-            user: this.state.username
+            user: this.state.username,
+            lang: this.state.lang
         }
     }
 
+    handleLangButton = lang => {
+      this.setState({ lang })
+    }
+
     render() {
-        console.log('---', 'rendering App')
+        console.log('---context', this.context)
         return (
             <div>
+                <button onClick = {() => this.handleLangButton(RU)}>RU</button>
+                <button onClick = {() => this.handleLangButton(EN)}>EN</button>
                 <UserForm value = {this.state.username} onChange = {this.handleUserChange}/>
                 <ul>
-                    <li><NavLink to = "/counter" activeStyle = {{ color: 'red' }}>counter</NavLink></li>
-                    <li><NavLink to = "/filters" activeStyle = {{ color: 'red' }}>filters</NavLink></li>
-                    <li><NavLink to = "/articles" activeStyle = {{ color: 'red' }}>articles</NavLink></li>
-                    <li><NavLink to = "/comments/1" activeStyle = {{ color: 'red' }}>comments</NavLink></li>
+                    <li><NavLink to = "/counter" activeStyle = {{ color: 'red' }}>{this.props.getIntl("counter", this.state.lang)}</NavLink></li>
+                    <li><NavLink to = "/filters" activeStyle = {{ color: 'red' }}>{this.props.getIntl("filters", this.state.lang)}</NavLink></li>
+                    <li><NavLink to = "/articles" activeStyle = {{ color: 'red' }}>{this.props.getIntl("articles", this.state.lang)}</NavLink></li>
+                    <li><NavLink to = "/comments/1" activeStyle = {{ color: 'red' }}>{this.props.getIntl("comments", this.state.lang)}</NavLink></li>
                 </ul>
                 <Switch>
                     <Redirect from = "/" to = "/articles" exact />
                     <Route path = "/counter" component = {Counter} exact />
                     <Route path = "/filters" component = {Filters} />
                     <Route path = "/articles/new" render = {() => <h1>New Article Form</h1>} />
+                    <Route path = "/articles/:id" component = {({ match }) => <Article id = {match.params.id} key = {match.params.id} isOpen />} />
                     <Route path = "/articles" component = {ArticlesPage} />
                     <Route path = "/comments" component = {CommentsPage} />
-                    <Route path = "/error" render = {() => <h1>Error page</h1>} />
-                    <Route path = "*" render = {() => <h1>Not Found Page</h1>} />
+                    <Route path = "/error" render = {() => <h1>{this.props.getIntl("errorPage", this.state.lang)}</h1>} />
+                    <Route path = "*" render = {() => <h1>{this.props.getIntl("notFoundPage", this.state.lang)}</h1>} />
                 </Switch>
             </div>
         )
@@ -55,4 +68,4 @@ class App extends Component {
     handleUserChange = username => this.setState({ username })
 }
 
-export default App
+export default FormatIntl(App)

src/components/article-list/index.js

@@ -43,4 +43,4 @@ export default connect(state => ({
     loading: loadingArticlesSelector(state),
     loaded: loadedArticlesSelector(state),
     router: state.router
-}), { loadAllArticles })(accordion(ArticleList))
+}), { loadAllArticles })(accordion(ArticleList))

src/components/article/index.js

@@ -6,6 +6,7 @@ import CommentList from '../comment-list'
 import Loader from '../loader'
 import { deleteArticle, loadArticleById } from '../../AC'
 import { articleSelector } from '../../selectors'
+import FormatIntl from '../../decorators/FormatIntl'
 import './style.css'
 
 class Article extends Component {
@@ -34,14 +35,8 @@ class Article extends Component {
             <Fragment>
                 <h2>
                     {article.title}
-                    <button
-                        className = "test__article--button"
-                        onClick={() => onButtonClick(article.id)}
-                    >
-                        {isOpen ? 'close' : 'open'}
-                    </button>
                     <button onClick = {this.handleDelete}>
-                        delete me
+                        {this.props.getIntl("deleteMe")}
                     </button>
                 </h2>
                 <CSSTransition
@@ -84,9 +79,8 @@ Article.propTypes = {
         title: PropTypes.string,
         text: PropTypes.string
     }),
-    onButtonClick: PropTypes.func
 }
 
 export default connect((state, props) => ({
     article: articleSelector(state, props)
-}), { deleteArticle, loadArticleById }, null, { pure: false })(Article)
+}), { deleteArticle, loadArticleById }, null, { pure: false })(FormatIntl(Article))

src/components/comment-form/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import {connect} from 'react-redux'
 import {addComment} from '../../AC'
+import FormatIntl from '../../decorators/FormatIntl'
 import './style.css'
 
 class CommentForm extends Component {
@@ -15,13 +16,13 @@ class CommentForm extends Component {
     render() {
         return (
             <form onSubmit = {this.handleSubmit}>
-                user: <input value = {this.state.user}
+                {this.props.getIntl("user")}: <input value = {this.state.user}
                              onChange = {this.handleChange('user')}
                              className = {this.getClassName('user')} />
-                comment: <input value = {this.state.text}
+                {this.props.getIntl("comment")}: <input value = {this.state.text}
                                 onChange = {this.handleChange('text')}
                                 className = {this.getClassName('text')} />
-                <input type = "submit" value = "submit" disabled = {!this.isValidForm()}/>
+                <button onClick={this.handleSubmit} disabled = {!this.isValidForm()}>{this.props.getIntl("submit")}</button>
             </form>
         )
     }
@@ -63,4 +64,4 @@ const limits = {
 
 export default connect(null, (dispatch, ownProps) => ({
     addComment: (comment) => dispatch(addComment(comment, ownProps.articleId))
-}))(CommentForm)
+}))(FormatIntl(CommentForm))

src/components/comment-list/index.js

@@ -7,6 +7,7 @@ import CommentForm from '../comment-form'
 import Loader from '../loader'
 import toggleOpen from '../../decorators/toggleOpen'
 import {loadArticleComments} from '../../AC'
+import FormatIntl from '../../decorators/FormatIntl'
 import './style.css'
 
 class CommentList extends Component {
@@ -36,7 +37,7 @@ class CommentList extends Component {
     render() {
         const {isOpen, toggleOpen} = this.props
         console.log('---', 'rendering CommentList')
-        const text = isOpen ? 'hide comments' : 'show comments'
+        const text = isOpen ? this.props.getIntl("hideComments") : this.props.getIntl("showComments")
         return (
             <div>
                 <button onClick={toggleOpen} className="test__comment-list--btn">{text}</button>
@@ -63,7 +64,7 @@ class CommentList extends Component {
                 {
                     comments.length
                         ? this.getComments()
-                        : <h3 className="test__comment-list--empty">No comments yet</h3>
+                        : <h3 className="test__comment-list--empty">{this.props.getIntl("noCommentsYet")}</h3>
                 }
                 <CommentForm articleId = {id} />
             </div>
@@ -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(FormatIntl(CommentList)))

src/components/counter.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {increment} from '../AC'
+import FormatIntl from '../decorators/FormatIntl'
 
 class Counter extends Component {
     static propTypes = {
@@ -13,7 +14,7 @@ class Counter extends Component {
             <div>
                 <h3>
                     {this.props.count}
-                    <button onClick = {this.handleIncrement}>increment</button>
+                    <button onClick = {this.handleIncrement}>{this.props.getIntl("incriment")}</button>
                 </h3>
             </div>
         )
@@ -29,4 +30,4 @@ const mapStateToProps = state => ({
     count: state.counter
 })
 
-export default connect(mapStateToProps)(Counter)
+export default connect(mapStateToProps)(FormatIntl(Counter))

src/components/filters/select.js

@@ -33,4 +33,4 @@ class SelectFilter extends Component {
 export default connect(state => ({
     selected: state.filters.selected,
     articles: articleListSelector(state)
-}), { changeSelection })(SelectFilter)
+}), { changeSelection })(SelectFilter)

src/components/loader.js

@@ -1,12 +1,13 @@
 import React from 'react'
+import FormatIntl from '../decorators/FormatIntl'
 
-function Loader() {
+function Loader({ getIntl }) {
     return (
-        <h2>Loading...</h2>
+        <h2>{getIntl("loading")}...</h2>
     )
 }
 
 Loader.propTypes = {
 }
 
-export default Loader
+export default FormatIntl(Loader)

src/components/routes/articles.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { Route } from 'react-router-dom'
 import ArticleList from '../article-list'
 import Article from '../article'
+import FormatIntl from '../../decorators/FormatIntl'
 
 class ArticlesRoute extends Component {
     static propTypes = {
@@ -12,18 +13,18 @@ class ArticlesRoute extends Component {
         console.log('---', 'rendering Articles Page')
         return (
             <div>
-                <h2>Articles page</h2>
+                <h2>{this.props.getIntl("articlesPage")}</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.props.getIntl("pleaseSelectAnArticle")}</h2>
 
         return <Article id = {match.params.id} key = {match.params.id} isOpen />
     }
 }
 
-export default ArticlesRoute
+export default FormatIntl(ArticlesRoute)

src/components/user-form.js

@@ -1,14 +1,16 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import FormatIntl from '../decorators/FormatIntl'
 
 class UserForm extends Component {
     static propTypes = {
-
+      getIntl: PropTypes.func
     };
 
     render() {
         return (
             <div>
-                username: <input value = {this.props.value} onChange = {this.handleChange}/>
+                {this.props.getIntl("username")}: <input value = {this.props.value} onChange = {this.handleChange}/>
             </div>
         )
     }
@@ -22,4 +24,4 @@ class UserForm extends Component {
     }
 }
 
-export default UserForm
+export default FormatIntl(UserForm)

src/constants/index.js

@@ -13,4 +13,6 @@ export const LOAD_COMMENTS_FOR_PAGE = 'LOAD_COMMENTS_FOR_PAGE'
 
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'
-export const FAIL = '_FAIL'
+export const FAIL = '_FAIL'
+export const RU = 'RU'
+export const EN = 'EN'

src/decorators/FormatIntl.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { RU, EN } from '../constants'
+import { MESSAGES } from '../international'
+
+export default (OriginalComponent) => class FormatIntl extends Component {
+
+  static contextTypes = {
+      lang: PropTypes.string
+  }
+
+  getIntl = (id, langParam) => {
+    const { lang } = this.context
+    const message = MESSAGES[id][lang || langParam]
+    return <span>{message || 'No id'}</span>
+  }
+
+  render() {
+    return  <OriginalComponent {...this.props} getIntl = {this.getIntl} />
+  }
+
+
+}