From 32c00a7a4820f7b4570c7e30f5bd5dacf9015cbe Mon Sep 17 00:00:00 2001 From: Irina Vivdenko Date: Sun, 11 Nov 2018 19:20:21 +0300 Subject: [PATCH 1/8] Add the radio-button for localization. Add the context --- package.json | 1 + src/components/app.js | 62 +++++++++++++++++++-------------- src/components/article/index.js | 5 ++- src/components/locale.js | 31 +++++++++++++++++ src/contexts/locale.js | 14 ++++++++ 5 files changed, 86 insertions(+), 27 deletions(-) create mode 100644 src/components/locale.js create mode 100644 src/contexts/locale.js diff --git a/package.json b/package.json index 5578951..a23c5d4 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "connected-react-router": "^5.0.1", "history": "^4.7.2", "immutable": "^4.0.0-rc.11", + "@material-ui/core": "latest", "prop-types": "^15.6.2", "react": "^16.5.2", "react-addons-css-transition-group": "^15.6.2", diff --git a/src/components/app.js b/src/components/app.js index f3c5c8d..bf7c2e1 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -1,47 +1,57 @@ import React, { Component } from 'react' import { Route, Switch, Redirect } from 'react-router-dom' import ArticlesPage from './routes/articles-page' +import Locale from './locale' import UserForm from './user-form' import Filters from './filters' import Counter from './counter' import CommentsPage from './routes/comments-page' import Menu, { MenuItem } from './menu' import { Provider as UserProvider } from '../contexts/user' +import { Provider as LocaleProvider, DICTIONARY } from '../contexts/locale' class App extends Component { state = { - user: 'roma' + user: 'roma', + locale: 'en' } + setLocale = (locale) => this.setState({ locale }) + setUser = (user) => this.setState({ user }) render() { - return ( - -
- - - Filters - Counter - Comments - - + const { locale, user } = this.state - - - - - -

New Article Page

} - /> - -

Error Page

} /> -

Not Found Page

} /> - -
- + return ( + + +
+ + + + Filters + Counter + Comments + + + + + + + + +

New Article Page

} + /> + +

Error Page

} /> +

Not Found Page

} /> + +
+ + ) } } diff --git a/src/components/article/index.js b/src/components/article/index.js index 655133a..db0ec19 100644 --- a/src/components/article/index.js +++ b/src/components/article/index.js @@ -7,6 +7,7 @@ import { deleteArticle, loadArticleById } from '../../ac' import './style.css' import Loader from '../common/loader' import { articleSelector } from '../../selectors' +import { Consumer as LocaleConsumer } from '../../contexts/locale' class Article extends PureComponent { static propTypes = { @@ -41,7 +42,9 @@ class Article extends PureComponent {

{article.title} - +

+ Gender + + } label="en" /> + } label="rus" /> + + + ) + } + + handleChange = (ev) => { + console.log(ev.target.value, 'ev.target.value') + this.props.onChange(ev.target.value) + } +} + +export default Locale diff --git a/src/contexts/locale.js b/src/contexts/locale.js new file mode 100644 index 0000000..a559189 --- /dev/null +++ b/src/contexts/locale.js @@ -0,0 +1,14 @@ +import { createContext } from 'react' + +const { Provider, Consumer } = createContext() + +const DICTIONARY = { + en: { + deleteButton: 'Delete' + }, + rus: { + deleteButton: 'Удалить' + } +} + +export { Provider, Consumer, DICTIONARY } From ac88f9cd43afdbc066075925bf05d3ef6398c634 Mon Sep 17 00:00:00 2001 From: Irina Vivdenko Date: Sun, 11 Nov 2018 19:28:14 +0300 Subject: [PATCH 2/8] Fix the radio-button for localization --- src/components/locale.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/locale.js b/src/components/locale.js index e6777e6..521cad2 100644 --- a/src/components/locale.js +++ b/src/components/locale.js @@ -9,7 +9,6 @@ class Locale extends Component { render() { return ( - Gender Date: Sun, 11 Nov 2018 19:28:49 +0300 Subject: [PATCH 3/8] Fix the radio-button for localization --- src/components/locale.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/locale.js b/src/components/locale.js index 521cad2..a75d63e 100644 --- a/src/components/locale.js +++ b/src/components/locale.js @@ -22,7 +22,6 @@ class Locale extends Component { } handleChange = (ev) => { - console.log(ev.target.value, 'ev.target.value') this.props.onChange(ev.target.value) } } From e0143d45de0e125e2eb94cdac55721d041223b84 Mon Sep 17 00:00:00 2001 From: Irina Vivdenko Date: Sun, 11 Nov 2018 19:29:12 +0300 Subject: [PATCH 4/8] Fix the radio-button for localization --- src/components/locale.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/locale.js b/src/components/locale.js index a75d63e..5ea40f0 100644 --- a/src/components/locale.js +++ b/src/components/locale.js @@ -3,7 +3,6 @@ import RadioGroup from '@material-ui/core/RadioGroup' import Radio from '@material-ui/core/Radio' import FormControlLabel from '@material-ui/core/FormControlLabel' import FormControl from '@material-ui/core/FormControl' -import FormLabel from '@material-ui/core/FormLabel' class Locale extends Component { render() { From ee3d39b60fe5164faf31a10dc6c706667c25d171 Mon Sep 17 00:00:00 2001 From: Irina Vivdenko Date: Sun, 11 Nov 2018 20:01:46 +0300 Subject: [PATCH 5/8] Widen localization --- src/components/app.js | 20 ++++++++++++++++---- src/components/comment-list/index.js | 7 ++++++- src/components/comment.js | 7 ++++++- src/components/user-form.js | 3 ++- src/contexts/locale.js | 18 ++++++++++++++++-- 5 files changed, 46 insertions(+), 9 deletions(-) diff --git a/src/components/app.js b/src/components/app.js index bf7c2e1..29c1bd5 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -9,6 +9,7 @@ import CommentsPage from './routes/comments-page' import Menu, { MenuItem } from './menu' import { Provider as UserProvider } from '../contexts/user' import { Provider as LocaleProvider, DICTIONARY } from '../contexts/locale' +import { Consumer as LocaleConsumer } from '../contexts/locale' class App extends Component { state = { @@ -21,7 +22,7 @@ class App extends Component { setUser = (user) => this.setState({ user }) render() { - const { locale, user } = this.state + const { locale, user, val } = this.state return ( @@ -30,9 +31,20 @@ class App extends Component { - Filters - Counter - Comments + + {{(val) => val.filtersLabel}} + + + { + // Возможно ли сохранять значение, + // приходящее в LocaleConsumer и сохранять его в state? + // Например, в componentDidUpdate? + {(val) => val.counterLabel} + } + + + {{(val) => val.commentsLabel}} + diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js index 42397e8..3cff32e 100644 --- a/src/components/comment-list/index.js +++ b/src/components/comment-list/index.js @@ -9,6 +9,7 @@ import { loadArticleComments } from '../../ac' import './style.css' import Loader from '../common/loader' import { Consumer as UserConsumer } from '../../contexts/user' +import { Consumer as LocaleConsumer } from '../../contexts/locale' class CommentList extends Component { static propTypes = { @@ -37,7 +38,11 @@ class CommentList extends Component { render() { const { isOpen, toggleOpen } = this.props - const text = isOpen ? 'hide comments' : 'show comments' + const text = ( + + {(val) => (isOpen ? val.hideCommentsLabel : val.showCommentsLabel)} + + ) return (
Date: Sun, 11 Nov 2018 20:15:43 +0300 Subject: [PATCH 7/8] Fix some defects --- src/components/app.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/app.js b/src/components/app.js index a62342c..b080798 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -17,8 +17,7 @@ import { class App extends Component { state = { user: 'roma', - locale: 'en', - dictionary: {} + locale: 'en' } setLocale = (locale) => this.setState({ locale }) @@ -26,8 +25,7 @@ class App extends Component { setUser = (user) => this.setState({ user }) render() { - const { locale, user, dictionary } = this.state - console.log(dictionary, 'dictionary') + const { locale, user } = this.state return ( From 2dbbabed7ff2dde8a6a0d87143ace2902d0ac6c6 Mon Sep 17 00:00:00 2001 From: Irina Vivdenko Date: Sun, 11 Nov 2018 20:19:23 +0300 Subject: [PATCH 8/8] Fix the comment --- src/components/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/app.js b/src/components/app.js index b080798..946be00 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -39,9 +39,9 @@ class App extends Component { { - // Возможно ли сохранять значение, - // приходящее в LocaleConsumer и сохранять его в state? + // Возможно ли сохранять значение, приходящее в LocaleConsumer в state? // Например, в componentDidUpdate? + // Чтобы избежать постоянного обращения к LocaleConsumer {(val) => val.counterLabel} }