0
0
Fork 0

basic i18n support

This commit is contained in:
Xeltica 2021-09-14 09:22:04 +09:00
parent 7eeb90eddc
commit d06f2384dc
12 changed files with 115 additions and 19 deletions

View file

@ -1,15 +1,16 @@
import React, { useCallback, useEffect, useReducer, useState } from 'react';
import React, { useCallback, useEffect, useReducer } from 'react';
import { alertModes } from '../../common/types/alert-mode';
import { IUser } from '../../common/types/user';
import { visibilities, Visibility } from '../../common/types/visibility';
import { Visibility } from '../../common/types/visibility';
import { useGetSessionQuery } from '../services/session';
import { defaultTemplate } from '../../common/default-template';
import { Card } from './Card';
import { Theme } from '../misc/theme';
import { API_ENDPOINT, LOCALSTORAGE_KEY_TOKEN } from '../const';
import { API_ENDPOINT, LOCALSTORAGE_KEY_LANG, LOCALSTORAGE_KEY_TOKEN } from '../const';
import { useDispatch } from 'react-redux';
import { changeTheme, showModal } from '../store/slices/screen';
import { changeLang, changeTheme, showModal } from '../store/slices/screen';
import { useSelector } from '../store';
import { languageName } from '../langs';
type SettingDraftType = Partial<Pick<IUser,
| 'alertMode'
@ -53,7 +54,7 @@ export const SettingPage: React.VFC = () => {
];
const currentTheme = useSelector(state => state.screen.theme);
const [currentLang, setCurrentLang] = useState<string>('ja-JP');
const currentLang = useSelector(state => state.screen.lang);
const availableVisibilities: Visibility[] = [
'public',
@ -205,9 +206,14 @@ export const SettingPage: React.VFC = () => {
</div>
<h2></h2>
<select name="currentLang" className="input-field" value={currentLang} onChange={e => setCurrentLang(e.target.value)}>
<option value="ja-JP"></option>
<option value="en-US"></option>
<select name="currentLang" className="input-field" value={currentLang} onChange={(e) => {
dispatch(changeLang(e.target.value));
}}>
{
(Object.keys(languageName) as Array<keyof typeof languageName>).map(n => (
<option value={n} key={n}>{languageName[n]}</option>
))
}
</select>
</Card>