Client - store language w/ redux
This commit is contained in:
parent
6f7f69a807
commit
745d102ee2
@ -12,6 +12,11 @@ export const setError = message => ({
|
|||||||
message,
|
message,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const setLanguage = language => ({
|
||||||
|
type: 'SET_LANGUAGE',
|
||||||
|
language,
|
||||||
|
})
|
||||||
|
|
||||||
export const setLoading = loading => ({
|
export const setLoading = loading => ({
|
||||||
type: 'SET_LOADING',
|
type: 'SET_LOADING',
|
||||||
loading,
|
loading,
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
import React, { Component } from 'react'
|
import React, { Component } from 'react'
|
||||||
import i18next from 'i18next'
|
import i18next from 'i18next'
|
||||||
|
import { connect } from 'react-redux'
|
||||||
|
|
||||||
import { ReactComponent as EnFlag } from '../../images/flags/en.svg'
|
import { ReactComponent as EnFlag } from '../../images/flags/en.svg'
|
||||||
import { ReactComponent as FrFlag } from '../../images/flags/fr.svg'
|
import { ReactComponent as FrFlag } from '../../images/flags/fr.svg'
|
||||||
|
import { setLanguage } from '../../actions/index'
|
||||||
|
|
||||||
const languages = [
|
const languages = [
|
||||||
{
|
{
|
||||||
@ -22,16 +24,6 @@ class Dropdown extends Component {
|
|||||||
super(props)
|
super(props)
|
||||||
this.state = {
|
this.state = {
|
||||||
isOpen: false,
|
isOpen: false,
|
||||||
selected: 'en',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
selectLanguage(name) {
|
|
||||||
if (name !== this.state.selected) {
|
|
||||||
i18next.changeLanguage(name)
|
|
||||||
this.setState({
|
|
||||||
selected: name,
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -42,7 +34,8 @@ class Dropdown extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { isOpen, selected } = this.state
|
const { isOpen } = this.state
|
||||||
|
const { language: selected, onUpdateLanguage } = this.props
|
||||||
return (
|
return (
|
||||||
<div className="dropdown-wrapper" onClick={() => this.toggleDropdown()}>
|
<div className="dropdown-wrapper" onClick={() => this.toggleDropdown()}>
|
||||||
<ul className="dropdown-list i18n-flag">
|
<ul className="dropdown-list i18n-flag">
|
||||||
@ -58,7 +51,7 @@ class Dropdown extends Component {
|
|||||||
: ''
|
: ''
|
||||||
}`}
|
}`}
|
||||||
key={language.name}
|
key={language.name}
|
||||||
onClick={() => this.selectLanguage(language.name)}
|
onClick={() => onUpdateLanguage(language.name, selected)}
|
||||||
>
|
>
|
||||||
{language.flag} {language.name}
|
{language.flag} {language.name}
|
||||||
</li>
|
</li>
|
||||||
@ -69,4 +62,16 @@ class Dropdown extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Dropdown
|
export default connect(
|
||||||
|
state => ({
|
||||||
|
language: state.language,
|
||||||
|
}),
|
||||||
|
dispatch => ({
|
||||||
|
onUpdateLanguage: (lang, selected) => {
|
||||||
|
if (lang !== selected) {
|
||||||
|
i18next.changeLanguage(lang)
|
||||||
|
dispatch(setLanguage(lang))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
)(Dropdown)
|
||||||
|
@ -57,6 +57,13 @@ const gpx = (state = initial.gpx, action) => {
|
|||||||
return state
|
return state
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const language = (state = initial.language, action) => {
|
||||||
|
if (action.type === 'SET_LANGUAGE') {
|
||||||
|
return action.language
|
||||||
|
}
|
||||||
|
return state
|
||||||
|
}
|
||||||
|
|
||||||
const loading = (state = initial.loading, action) => {
|
const loading = (state = initial.loading, action) => {
|
||||||
if (action.type === 'SET_LOADING') {
|
if (action.type === 'SET_LOADING') {
|
||||||
return action.loading
|
return action.loading
|
||||||
@ -124,6 +131,7 @@ export default history =>
|
|||||||
calendarActivities,
|
calendarActivities,
|
||||||
chartData,
|
chartData,
|
||||||
gpx,
|
gpx,
|
||||||
|
language,
|
||||||
loading,
|
loading,
|
||||||
message,
|
message,
|
||||||
messages,
|
messages,
|
||||||
|
@ -3,6 +3,7 @@ const emptyData = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
language: 'en',
|
||||||
message: '',
|
message: '',
|
||||||
messages: [],
|
messages: [],
|
||||||
user: {
|
user: {
|
||||||
|
Loading…
Reference in New Issue
Block a user