Client - store language w/ redux

This commit is contained in:
Sam 2019-09-08 17:14:48 +02:00
parent 6f7f69a807
commit 745d102ee2
4 changed files with 32 additions and 13 deletions

View File

@ -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,

View File

@ -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)

View File

@ -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,

View File

@ -3,6 +3,7 @@ const emptyData = {
} }
export default { export default {
language: 'en',
message: '', message: '',
messages: [], messages: [],
user: { user: {