Hw 7

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 (
             <div>
+                <HandleLng val={this.state.lng} onChange = {this.handleLngChange}/>
                 <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' }}>{glossary.counter}</NavLink></li>
+                    <li><NavLink to = "/filters" activeStyle = {{ color: 'red' }}>{glossary.filters}</NavLink></li>
+                    <li><NavLink to = "/articles" activeStyle = {{ color: 'red' }}>{ glossary.articles}</NavLink></li>
+                    <li><NavLink to = "/comments/1" activeStyle = {{ color: 'red' }}>{glossary.comments}</NavLink></li>
                 </ul>
                 <Switch>
                     <Redirect from = "/" to = "/articles" exact />
@@ -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

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 <h2>{this.state.error.message}</h2>
 
         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']}
                     </button>
                     <button onClick = {this.handleDelete}>
-                        delete me
+                        {glossary['delete']}
                     </button>
                 </h2>
                 <CSSTransition
@@ -64,7 +68,7 @@ class Article extends Component {
         if (article.loading) return <Loader/>
 
         return (
-            <section className = "test__article--body">
+            <section key={article.id} className = "test__article--body">
                 {article.text}
                 <CommentList article = {article}/>
             </section>

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 (
             <div>
                 <button onClick={toggleOpen} className="test__comment-list--btn">{text}</button>

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 (
+              <span key={langids[index]}>
+                <input type="radio" name="language" value={index} id={langids[index]}
+                       defaultChecked = {val === index}
+                       onClick={onChange}/>
+                <label htmlFor={langids[index]}>{l}</label>
+              </span>
+            )
+        })
+
+        return (
+            <p>
+                {radioElements}
+            </p>
+        )
+    }
+}
+
+export default HandleLng

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 (
-        <h2>Loading...</h2>
-    )
+class Loader extends Component{
+    static contextTypes = {
+        glossary: PropTypes.object
+    }
+    render () {
+        return (
+            <h2>{ this.context.glossary.loading }</h2>
+        )
+    }
 }
 
 Loader.propTypes = {

src/components/routes/articles.js

@@ -2,25 +2,28 @@ 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 (
             <div>
-                <h2>Articles page</h2>
+                <h2>{ this.context.glossary['articles'] }</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.context.glossary['Please select an article'] }</h2>
 
         return <Article id = {match.params.id} key = {match.params.id} isOpen />
     }

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 (
             <div>
-                username: <input value = {this.props.value} onChange = {this.handleChange}/>
+                { this.context.glossary['username'] }: <input value = {this.props.value} onChange = {this.handleChange}/>
             </div>
         )
     }

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'
+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...']
+}