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