diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js index 851c5fa5d..194aed804 100644 --- a/ui/src/i18n/en.js +++ b/ui/src/i18n/en.js @@ -19,6 +19,7 @@ export default deepmerge(englishMessages, { album: { fields: { albumArtist: 'Album Artist', + artist: 'Artist', duration: 'Time', songCount: 'Songs', playCount: 'Plays' @@ -51,7 +52,8 @@ export default deepmerge(englishMessages, { personal: { name: 'Personal', options: { - theme: 'Theme' + theme: 'Theme', + language: 'Language' } } }, diff --git a/ui/src/i18n/pt.js b/ui/src/i18n/pt.js index 2ea9c1b24..5792701d4 100644 --- a/ui/src/i18n/pt.js +++ b/ui/src/i18n/pt.js @@ -88,7 +88,8 @@ export default deepmerge.all([ personal: { name: 'Pessoal', options: { - theme: 'Tema' + theme: 'Tema', + language: 'LĂ­ngua' } } }, diff --git a/ui/src/personal/Personal.js b/ui/src/personal/Personal.js index 1b10d5ff9..09cc1078c 100644 --- a/ui/src/personal/Personal.js +++ b/ui/src/personal/Personal.js @@ -1,37 +1,74 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' import { Card } from '@material-ui/core' -import { Title, SimpleForm, SelectInput, useTranslate } from 'react-admin' +import { + Title, + SimpleForm, + SelectInput, + useTranslate, + useSetLocale, + useLocale +} from 'react-admin' import { makeStyles } from '@material-ui/core/styles' import { changeTheme } from './actions' import themes from '../themes' +import i18n from '../i18n' const useStyles = makeStyles({ root: { marginTop: '1em' } }) -const Personal = () => { +const SelectLanguage = (props) => { + const translate = useTranslate() + const locale = useLocale() + const setLocale = useSetLocale() + const langChoices = Object.keys(i18n).map((key) => { + return { id: key, name: i18n[key].languageName } + }) + return ( + { + setLocale(event.target.value) + }} + /> + ) +} + +const SelectTheme = (props) => { const translate = useTranslate() - const classes = useStyles() - const currentTheme = useSelector((state) => state.theme) const dispatch = useDispatch() + const currentTheme = useSelector((state) => state.theme) const themeChoices = Object.keys(themes).map((key) => { return { id: key, name: themes[key].themeName } }) + return ( + { + dispatch(changeTheme(event.target.value)) + }} + /> + ) +} +const Personal = () => { + const translate = useTranslate() + const classes = useStyles() return ( <SimpleForm toolbar={null}> - <SelectInput - source="theme" - label={translate('menu.personal.options.theme')} - defaultValue={currentTheme} - choices={themeChoices} - onChange={(event) => { - dispatch(changeTheme(event.target.value)) - }} - /> + <SelectTheme /> + <SelectLanguage /> </SimpleForm> </Card> )