68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
// @flow
|
|
|
|
import React, { useState } from 'react';
|
|
import { FormField } from 'component/common/form';
|
|
import Spinner from 'component/spinner';
|
|
import { SETTINGS } from 'lbry-redux';
|
|
import SUPPORTED_LANGUAGES from '../../constants/supported_languages';
|
|
|
|
type Props = {
|
|
language: string,
|
|
showToast: ({}) => void,
|
|
setClientSetting: (string, boolean) => void,
|
|
};
|
|
|
|
function SettingLanguage(props: Props) {
|
|
const [isFetching, setIsFetching] = useState(false);
|
|
const languages = SUPPORTED_LANGUAGES;
|
|
|
|
const { language, showToast, setClientSetting } = props;
|
|
|
|
function onLanguageChange(e) {
|
|
const { value } = e.target;
|
|
setIsFetching(true);
|
|
|
|
// this should match the behavior/logic in the static index-XXX.html files
|
|
fetch('https://lbry.com/i18n/get/lbry-desktop/app-strings/' + value + '.json')
|
|
.then(r => r.json())
|
|
.then(j => {
|
|
window.i18n_messages[value] = j;
|
|
})
|
|
.then(() => {
|
|
setIsFetching(false);
|
|
window.localStorage.setItem(SETTINGS.LANGUAGE, value);
|
|
setClientSetting(SETTINGS.LANGUAGE, value);
|
|
})
|
|
.catch(e => {
|
|
showToast({
|
|
message: __('Failed to load translations.'),
|
|
error: true,
|
|
});
|
|
setIsFetching(false);
|
|
});
|
|
}
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<FormField
|
|
name="language_select"
|
|
type="select"
|
|
label={__('Language')}
|
|
onChange={onLanguageChange}
|
|
value={language}
|
|
helper={__(
|
|
'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.'
|
|
)}
|
|
>
|
|
{Object.keys(languages).map(language => (
|
|
<option key={language} value={language}>
|
|
{languages[language]}
|
|
</option>
|
|
))}
|
|
</FormField>
|
|
{isFetching && <Spinner type="small" />}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
export default SettingLanguage;
|