Hometask8

src/components/App.js

@@ -23,18 +23,28 @@ class App extends Component {
         }
     }
 
+// static contextTypes = {
+//     user: PropTypes.string
+// }
+static contextTypes = { 
+    dict : PropTypes.object
+}
+
+
     handleUserChange = username => this.setState({ username })
 
     render() {
+        // console.log("12", this.context.dict  )
         console.log('---', 1)
         return (
             <div>
-                <h1>App name</h1>
+                <h1>{this.context.dict.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">{this.context.dict.LINK_ARTICLE}</MenuItem>
+                    <MenuItem to = "/filters">{this.context.dict.LINK_FILTERS}</MenuItem>
+                    <MenuItem to = "/counter">{this.context.dict.LINK_COUNTER}</MenuItem>
+                    <MenuItem to = "/comments">{this.context.dict.LINK_COMMENTS}</MenuItem>
                 </Menu>
                 <UserForm value = {this.state.username} onChange = {this.handleUserChange}/>
                 <Switch>

src/components/Article/index.js

@@ -30,7 +30,9 @@ class Article extends Component {
             count: 0
         }
     }
-
+    static contextTypes = { 
+        dict : PropTypes.object
+    }
     componentDidMount() {
         const { id, isOpen, article, loadArticle } = this.props
         if (isOpen && (!article || !article.text)) loadArticle(id)
@@ -46,10 +48,10 @@ class Article extends Component {
                 <h2 ref = {this.setTitleRef} onClick = {this.increment}>
                     {article.title}
                     <button onClick={toggleOpen}>
-                        {isOpen ? 'close' : 'open'}
+                        {isOpen ? this.context.dict.BTN_CLOSE : this.context.dict.BTN_OPEN }
                     </button>
                     <button onClick = {this.handleDelete}>
-                        delete
+                     {this.context.dict.BTN_DEL}
                     </button>
                 </h2>
                 <CSSTransition
@@ -62,7 +64,7 @@ class Article extends Component {
                 >
                     {this.getBody()}
                 </CSSTransition>
-                <h3>creation date: {(new Date(article.date)).toDateString()}</h3>
+                <h3>{this.context.dict.DATE_CREATE_ARTICLE} {(new Date(article.date)).toDateString()}</h3>
             </div>
         )
     }

src/components/ArticleList.js

@@ -11,12 +11,14 @@ class ArticleList extends Accordion {
     componentDidMount() {
         this.props.loadAllArticles()
     }
-
+    static contextTypes = { 
+        dict : PropTypes.object
+    }
     render() {
         const {articles, loading} = this.props
 
         if (loading) return <Loader />
-        if (!articles.length) return <h3>No Articles</h3>
+        if (!articles.length) return <h3>{ this.context.dict.ERROR_NO_ART}</h3>
         const articleElements = articles.map((article) => <li key={article.id}>
             <NavLink to = {`/articles/${article.id}`} activeStyle = {{color: 'red'}}>{article.title}</NavLink>
         </li>)

src/components/CommentForm/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import {connect} from 'react-redux'
 import {addComment} from '../../AC'
 import './style.css'
-
+import PropTypes from 'prop-types'
 class CommentForm extends Component {
     static propTypes = {
     };
@@ -11,17 +11,19 @@ class CommentForm extends Component {
         user: '',
         text: ''
     }
-
+    static contextTypes = { 
+        dict : PropTypes.object
+    }
     render() {
         return (
             <form onSubmit = {this.handleSubmit}>
-                user: <input value = {this.state.user}
+              {this.context.dict.USER  } <input value = {this.state.user}
                              onChange = {this.handleChange('user')}
                              className = {this.getClassName('user')} />
-                comment: <input value = {this.state.text}
+                 {this.context.dict.COMMENT  } <input value = {this.state.text}
                                 onChange = {this.handleChange('text')}
                                 className = {this.getClassName('text')} />
-                <input type = "submit" value = "submit" disabled = {!this.isValidForm()}/>
+                <input type = "submit" value = {this.context.dict.SUBMIT} disabled = {!this.isValidForm()}/>
             </form>
         )
     }

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,
+        dict: PropTypes.object
     }
 
     componentWillReceiveProps({ isOpen, article, loadArticleComments }) {
@@ -30,11 +31,11 @@ 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 ?  this.context.dict.BTN_HIDE_COMMENT : this.context.dict.BTN_SHOW_COMMENT
         return (
             <div>
                 <button onClick={toggleOpen}>{text}</button>
-                <h2>User: {this.context.user}</h2>
+                <h2>{this.context.dict.USER} {this.context.user}</h2>
                 {this.getBody()}
             </div>
         )

src/components/Language.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import dictionary from './dictionary'
+import PropTypes from 'prop-types'
+import LanguageBtn from './LanguageBtn'
+
+class Language extends Component {
+
+static defaultProps = {
+    lang: 'ru'
+ }
+
+ state = {
+    lang: this.props.lang
+}
+
+
+
+
+static childContextTypes = {
+    dict: PropTypes.object
+ }
+
+getChildContext() {
+   return {
+        dict : dictionary[this.state.lang]
+    }
+}
+
+// static contextTypes = {
+//     dict: PropTypes.object
+// }
+static contextTypes = { 
+    dict : PropTypes.object
+}
+
+
+
+  render() {
+     console.log(dictionary[this.state.lang])
+      console.log(this.context)
+    return (
+      <div>
+          <LanguageBtn  chooseLang = { this.chooseLang  }   lang = { this.state.lang } />
+          {this.props.children}
+      </div>
+    )
+  }
+
+
+  chooseLang = (langIn) =>  () => {
+        this.setState( { 
+            lang  : langIn
+         } )
+  }
+}
+
+export default Language

src/components/LanguageBtn.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types'
+export default class LanguageBtn extends Component {
+
+static contextTypes = { 
+    dict : PropTypes.object
+}
+
+
+  render() { 
+    //   console.log("12", this.context.dict  )
+      const { chooseLang,  lang }  = this.props
+    return (
+      <div>
+           {this.context.dict.LANG}
+           : {lang}  
+         <button  onClick = { chooseLang('ru') } >RU</button>
+        <button onClick = { chooseLang('en') } >EN</button>
+      </div>
+    )
+  }
+};

src/components/Menu/index.js

@@ -6,11 +6,14 @@ class Menu extends Component {
     static propTypes = {
 
     };
-
+    static contextTypes = { 
+        dict : PropTypes.object
+    }
+
     render() {
         return (
             <div>
-                <h2>Main menu:</h2>
+                <h2>{this.context.dict.MAIN_MENU}</h2>
                 {this.props.children}
             </div>
         )

src/components/UserForm.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-
+import PropTypes from 'prop-types'
 class UserForm extends Component {
     static propTypes = {
 
@@ -8,12 +8,15 @@ class UserForm extends Component {
     state = {
         user: ''
     }
-
+    static contextTypes = { 
+        dict : PropTypes.object
+    }
+
     render() {
         const {value} = this.props
         return (
             <div>
-                Username: <input type = "text" value = {value} onChange = {this.handleChange}/>
+               {this.context.dict.USERNAME} <input type = "text" value = {value} onChange = {this.handleChange}/>
             </div>
         )
     }

src/components/common/Loader.js

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

src/components/dictionary.js

@@ -0,0 +1,52 @@
+const dictionary = {
+
+    ru: {
+        "LANG": "Язык",
+        "APP_NAME": "Название приложения",
+        "LINK_ARTICLE": "СТАТЬИ",
+        "LINK_FILTERS": "ФИЛЬТРЫ",
+        "LINK_COUNTER": "СЧЕТЧИК",
+        "LINK_COMMENTS": "КОМЕНТАРИИ",
+        "USERNAME": "ПОЛЬЗОВАТЕЛЬ",
+        "LIST_ARTICLE": "СПИСОК СТАТЕЙ:",
+        "BTN_CLOSE": "Закрыть",
+        "BTN_DEL": "УДАЛИТЬ",
+        "BTN_OPEN": "Открыть",
+        "BTN_SHOW_COMMENT": "Показать коменнтарий",
+        "BTN_HIDE_COMMENT": "Скрыть комментарий",
+        "DATE_CREATE_ARTICLE": "Дата создания",
+        "USER": "Имя",
+        "COMMENT": "Комментарий",
+        "LOAD": "Загрузка",
+        "MAIN_MENU": "МЕНЮ",
+        "ERROR_NO_ART": "Нет статей",
+        "SUBMIT": "Вперед"
+    },
+    en: {
+        "LANG": "Language",
+        "APP_NAME": "APP NAME",
+        "LINK_ARTICLE": "Articles",
+        "LINK_FILTERS": "Filters",
+        "LINK_COUNTER": "Counter",
+        "LINK_COMMENTS": "Comments",
+        "USERNAME": "Username",
+        "LIST_ARTICLE": "Article list:",
+        "BTN_CLOSE": "CLOSE ",
+        "BTN_DEL": "DELete",
+        "BTN_OPEN": "OPEN",
+        "BTN_SHOW_COMMENT": "Show comments",
+        "BTN_HIDE_COMMENT": "Hide comments",
+        "DATE_CREATE_ARTICLE": "creation date",
+        "USER": "user",
+        "COMMENT": "comment",
+        "LOAD": "Load",
+        "MAIN_MENU": "Main menu",
+        "ERROR_NO_ART": "No Articles",
+        "SUBMIT": "SUBMIT"
+    }
+
+
+
+}
+
+export default dictionary

src/components/routes/ArticleList.js

@@ -2,17 +2,19 @@ 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 = { 
+        dict : PropTypes.object
+    }
     render() {
         console.log('---', 2)
         return (
             <div>
-                <h2>Article list:</h2>
+                <h2>{this.context.dict.LIST_ARTICLE}</h2>
                 <ArticleList/>
                 <Route path = {`${this.props.match.path}/:id`} children = {this.getArticle} />
             </div>

src/index.js

@@ -6,9 +6,12 @@ import {ConnectedRouter} from 'react-router-redux'
 //import {HashRouter, BrowserRouter} from 'react-router-dom'
 import store from './store'
 import history from './history'
+import Language from './components/Language' 
 
 render(<Provider store = {store}>
     <ConnectedRouter history = {history}>
+    <Language > 
         <App/>
+        </Language>
     </ConnectedRouter>
 </Provider>, document.getElementById('container'))