diff --git a/src/App.js b/src/App.js index a650aee..697db6f 100644 --- a/src/App.js +++ b/src/App.js @@ -6,37 +6,46 @@ import ArticlesPage from './components/routes/articles' import UserForm from './components/user-form' import Filters from './components/filters' import Counter from './components/counter' +import HandleLng from './components/handle-lng' +import {GLOSSARY} from './constants' import 'react-select/dist/react-select.css' import CommentsPage from './components/routes/comments-page' class App extends Component { - static propTypes = { - }; - + componentWillMount() { + this.compileGlossary() + } + static childContextTypes = { - user: PropTypes.string + user: PropTypes.string, + glossary: PropTypes.object } state = { - username: '' + username: '', + glossary: {}, + lng: 1 } getChildContext() { return { - user: this.state.username + user: this.state.username, + glossary: this.state.glossary } } render() { console.log('---', 'rendering App') + const {glossary} = this.state return (
+
    -
  • counter
  • -
  • filters
  • -
  • articles
  • -
  • comments
  • +
  • {glossary.counter}
  • +
  • {glossary.filters}
  • +
  • { glossary.articles}
  • +
  • {glossary.comments}
@@ -53,6 +62,19 @@ class App extends Component { } handleUserChange = username => this.setState({ username }) + + handleLngChange = ev => { + this.setState({'lng': +ev.target.value}) + this.compileGlossary(ev.target.value) + } + + compileGlossary = (locale = this.state.lng) => { + let glossary = {} + for (var word in GLOSSARY) { + glossary[word] = GLOSSARY[word][locale] + } + this.setState({ glossary }) + } } export default App \ No newline at end of file diff --git a/src/components/article/index.js b/src/components/article/index.js index cdaa19a..58161a9 100644 --- a/src/components/article/index.js +++ b/src/components/article/index.js @@ -12,6 +12,9 @@ class Article extends Component { state = { error: null } + static contextTypes = { + glossary: PropTypes.object + } componentDidCatch(error) { console.log('---', error) @@ -28,6 +31,7 @@ class Article extends Component { if (this.state.error) return

{this.state.error.message}

const { isOpen, article, onButtonClick } = this.props + const { glossary } = this.context if (!article) return null return ( @@ -38,10 +42,10 @@ class Article extends Component { className = "test__article--button" onClick={() => onButtonClick(article.id)} > - {isOpen ? 'close' : 'open'} + {isOpen ? glossary['close'] : glossary['show']} return ( -
+
{article.text}
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js index 7bb587e..f3f285e 100644 --- a/src/components/comment-list/index.js +++ b/src/components/comment-list/index.js @@ -24,7 +24,8 @@ class CommentList extends Component { static contextTypes = { store: PropTypes.object, router: PropTypes.object, - user: PropTypes.string + user: PropTypes.string, + glossary: PropTypes.object } componentWillReceiveProps({ isOpen, article, loadArticleComments }) { @@ -35,8 +36,9 @@ class CommentList extends Component { render() { const {isOpen, toggleOpen} = this.props + const { glossary } = this.context console.log('---', 'rendering CommentList') - const text = isOpen ? 'hide comments' : 'show comments' + const text = isOpen ? `${glossary['close']} ${glossary['comments']}` : `${glossary['show']} ${glossary['comments']}` return (
diff --git a/src/components/handle-lng.js b/src/components/handle-lng.js new file mode 100644 index 0000000..6a6054b --- /dev/null +++ b/src/components/handle-lng.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +class HandleLng extends Component { + static propTypes = { + val: PropTypes.number, + onChange: PropTypes.func + }; + + render () { + const langids = ["langEN", "langRU", "langDE"] + const langlbls = ['English', "Русский", "Deutsch"] + + const radioElements = langlbls.map( (l, index) => { + const {val, onChange} = this.props + return ( + + + + + ) + }) + + return ( +

+ {radioElements} +

+ ) + } +} + +export default HandleLng \ No newline at end of file diff --git a/src/components/loader.js b/src/components/loader.js index 9418787..89d2151 100644 --- a/src/components/loader.js +++ b/src/components/loader.js @@ -1,9 +1,15 @@ -import React from 'react' +import React, {Component} from 'react' +import PropTypes from 'prop-types' -function Loader() { - return ( -

Loading...

- ) +class Loader extends Component{ + static contextTypes = { + glossary: PropTypes.object + } + render () { + return ( +

{ this.context.glossary.loading }

+ ) + } } Loader.propTypes = { diff --git a/src/components/routes/articles.js b/src/components/routes/articles.js index 7d866b8..ce7b593 100644 --- a/src/components/routes/articles.js +++ b/src/components/routes/articles.js @@ -2,17 +2,20 @@ import React, { Component } from 'react' import { Route } from 'react-router-dom' import ArticleList from '../article-list' import Article from '../article' +import PropTypes from 'prop-types' class ArticlesRoute extends Component { static propTypes = { }; - + static contextTypes = { + glossary: PropTypes.object + } render() { console.log('---', 'rendering Articles Page') return (
-

Articles page

+

{ this.context.glossary['articles'] }

@@ -20,7 +23,7 @@ class ArticlesRoute extends Component { } getArticle = ({ match }) => { - if (!match) return

Please select an article

+ if (!match) return

{ this.context.glossary['Please select an article'] }

return
} diff --git a/src/components/user-form.js b/src/components/user-form.js index 15083af..475c093 100644 --- a/src/components/user-form.js +++ b/src/components/user-form.js @@ -1,14 +1,17 @@ import React, { Component } from 'react' +import PropTypes from 'prop-types' class UserForm extends Component { static propTypes = { }; - + static contextTypes = { + glossary: PropTypes.object + } render() { return (
- username: + { this.context.glossary['username'] }:
) } diff --git a/src/constants/index.js b/src/constants/index.js index 38d2c92..848d0bb 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -13,4 +13,21 @@ export const LOAD_COMMENTS_FOR_PAGE = 'LOAD_COMMENTS_FOR_PAGE' export const START = '_START' export const SUCCESS = '_SUCCESS' -export const FAIL = '_FAIL' \ No newline at end of file +export const FAIL = '_FAIL' + +export const GLOSSARY = { + 'close': ['close', 'закрыть', 'schließen'], + 'show': ['show', 'отобразить','anzeigen'], + 'comments': ['comments', 'комментарии', 'die Kommentare'], + 'articles': ['articles', 'статьи', 'die Artikle'], + 'counter': ['counter', 'счетчик', 'der Zähler'], + 'filters': ['filters', 'фильтры', 'die Filter'], + 'Please select an article': [ + 'Please select an article', + 'Выберите статью', + 'Bitte wählen Sie einen Artikel aus' + ], + 'username': ['username', 'пользователь', 'Nutzername'], + 'delete': ['delete me', 'удалить сиё', 'lösche mich'], + 'loading': ['Loading...', 'мы ждём перемен..', 'die Beladung...'] +} \ No newline at end of file