diff --git a/src/components/App.js b/src/components/App.js index f357b24..382889e 100644 --- a/src/components/App.js +++ b/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 (
-

App name

+

{this.context.dict.APP_NAME}

+ - Articles - Filters - Counter - Comments + {this.context.dict.LINK_ARTICLE} + {this.context.dict.LINK_FILTERS} + {this.context.dict.LINK_COUNTER} + {this.context.dict.LINK_COMMENTS} diff --git a/src/components/Article/index.js b/src/components/Article/index.js index 1b38661..cbbfb4c 100644 --- a/src/components/Article/index.js +++ b/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 {

{article.title}

{this.getBody()} -

creation date: {(new Date(article.date)).toDateString()}

+

{this.context.dict.DATE_CREATE_ARTICLE} {(new Date(article.date)).toDateString()}

) } diff --git a/src/components/ArticleList.js b/src/components/ArticleList.js index 7c5a0a5..a3eb41e 100644 --- a/src/components/ArticleList.js +++ b/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 - if (!articles.length) return

No Articles

+ if (!articles.length) return

{ this.context.dict.ERROR_NO_ART}

const articleElements = articles.map((article) =>
  • {article.title}
  • ) diff --git a/src/components/CommentForm/index.js b/src/components/CommentForm/index.js index e5a795b..a0040db 100644 --- a/src/components/CommentForm/index.js +++ b/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 (
    - user: - comment: - +
    ) } diff --git a/src/components/CommentList.js b/src/components/CommentList.js index c468574..7cec036 100644 --- a/src/components/CommentList.js +++ b/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 (
    -

    User: {this.context.user}

    +

    {this.context.dict.USER} {this.context.user}

    {this.getBody()}
    ) diff --git a/src/components/Language.js b/src/components/Language.js new file mode 100644 index 0000000..3adc155 --- /dev/null +++ b/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 ( +
    + + {this.props.children} +
    + ) + } + + + chooseLang = (langIn) => () => { + this.setState( { + lang : langIn + } ) + } +} + +export default Language diff --git a/src/components/LanguageBtn.js b/src/components/LanguageBtn.js new file mode 100644 index 0000000..a440e37 --- /dev/null +++ b/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 ( +
    + {this.context.dict.LANG} + : {lang} + + +
    + ) + } +}; diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js index 096e674..799d3d8 100644 --- a/src/components/Menu/index.js +++ b/src/components/Menu/index.js @@ -6,11 +6,14 @@ class Menu extends Component { static propTypes = { }; - + static contextTypes = { + dict : PropTypes.object + } + render() { return (
    -

    Main menu:

    +

    {this.context.dict.MAIN_MENU}

    {this.props.children}
    ) diff --git a/src/components/UserForm.js b/src/components/UserForm.js index 9a96e38..46e9ae9 100644 --- a/src/components/UserForm.js +++ b/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 (
    - Username: + {this.context.dict.USERNAME}
    ) } diff --git a/src/components/common/Loader.js b/src/components/common/Loader.js index 7577062..3565242 100644 --- a/src/components/common/Loader.js +++ b/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 ( -

    Loading...

    +

    {this.context.dict.LOAD}

    ) -} + } +}; + Loader.propTypes = { } - -export default Loader \ No newline at end of file diff --git a/src/components/dictionary.js b/src/components/dictionary.js new file mode 100644 index 0000000..8017045 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/components/routes/ArticleList.js b/src/components/routes/ArticleList.js index 3cceedd..a386950 100644 --- a/src/components/routes/ArticleList.js +++ b/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 (
    -

    Article list:

    +

    {this.context.dict.LIST_ARTICLE}

    diff --git a/src/index.js b/src/index.js index 8615453..cc47019 100644 --- a/src/index.js +++ b/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( + + , document.getElementById('container')) \ No newline at end of file