From 1c6dcc4f05da8705966ebf6f8ffa2950abb693ed Mon Sep 17 00:00:00 2001 From: boombarashk Date: Thu, 22 Mar 2018 00:17:58 +0300 Subject: [PATCH 1/2] HW-7 context glossary --- src/App.js | 25 ++++++++++++++++++----- src/components/handle-lng.js | 34 +++++++++++++++++++++++++++++++ src/components/routes/articles.js | 9 +++++--- src/constants/index.js | 15 +++++++++++++- 4 files changed, 74 insertions(+), 9 deletions(-) create mode 100644 src/components/handle-lng.js diff --git a/src/App.js b/src/App.js index a650aee..ddde906 100644 --- a/src/App.js +++ b/src/App.js @@ -6,24 +6,28 @@ 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 = { - }; + static childContextTypes = { - user: PropTypes.string + user: PropTypes.string, + glossary: PropTypes.object } state = { - username: '' + username: '', + lng: 1 } getChildContext() { return { - user: this.state.username + user: this.state.username, + glossary: this.compileGlossary() } } @@ -31,6 +35,7 @@ class App extends Component { console.log('---', 'rendering App') return (
+
  • counter
    • @@ -53,6 +58,16 @@ class App extends Component { } handleUserChange = username => this.setState({ username }) + + handleLngChange = ev => this.setState({'lng': +ev.target.value}) + + compileGlossary = () => { + let glossary = {} + for (var word in GLOSSARY) { + glossary[word] = GLOSSARY[word][this.state.lng] + } + return glossary + } } export default App \ No newline at end of file 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/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/constants/index.js b/src/constants/index.js index 38d2c92..6bda90d 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -13,4 +13,17 @@ 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'], + 'Please select an article': [ + 'Please select an article', + 'Выберите статью', + 'Bitte wählen Sie einen Artikel aus' + ] +} \ No newline at end of file From dfcfd4febbea1615b2c547530168670835031adb Mon Sep 17 00:00:00 2001 From: boombarashk Date: Thu, 22 Mar 2018 01:06:29 +0300 Subject: [PATCH 2/2] HW-7 fix 1 key --- src/App.js | 27 +++++++++++++++++---------- src/components/article/index.js | 10 +++++++--- src/components/comment-list/index.js | 6 ++++-- src/components/loader.js | 16 +++++++++++----- src/components/user-form.js | 7 +++++-- src/constants/index.js | 6 +++++- 6 files changed, 49 insertions(+), 23 deletions(-) diff --git a/src/App.js b/src/App.js index ddde906..697db6f 100644 --- a/src/App.js +++ b/src/App.js @@ -12,7 +12,9 @@ import 'react-select/dist/react-select.css' import CommentsPage from './components/routes/comments-page' class App extends Component { - + componentWillMount() { + this.compileGlossary() + } static childContextTypes = { user: PropTypes.string, @@ -21,27 +23,29 @@ class App extends Component { state = { username: '', + glossary: {}, lng: 1 } getChildContext() { return { user: this.state.username, - glossary: this.compileGlossary() + 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}
    @@ -59,14 +63,17 @@ class App extends Component { handleUserChange = username => this.setState({ username }) - handleLngChange = ev => this.setState({'lng': +ev.target.value}) + handleLngChange = ev => { + this.setState({'lng': +ev.target.value}) + this.compileGlossary(ev.target.value) + } - compileGlossary = () => { + compileGlossary = (locale = this.state.lng) => { let glossary = {} for (var word in GLOSSARY) { - glossary[word] = GLOSSARY[word][this.state.lng] + glossary[word] = GLOSSARY[word][locale] } - return glossary + this.setState({ glossary }) } } 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/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/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 6bda90d..848d0bb 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -21,9 +21,13 @@ export const GLOSSARY = { '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