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,
})
export const setLanguage = language => ({
type: 'SET_LANGUAGE',
language,
})
export const setLoading = loading => ({
type: 'SET_LOADING',
loading,

View File

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

View File

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

View File

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