Set styles for 'Select' component
Change-Id: I279d28e478a3d63b6d620f5362580854a0e62b3f
diff --git a/client/src/pages/GeneralSettings.tsx b/client/src/pages/GeneralSettings.tsx
index 3c7a277..6e651bb 100644
--- a/client/src/pages/GeneralSettings.tsx
+++ b/client/src/pages/GeneralSettings.tsx
@@ -15,13 +15,13 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
-import { SelectChangeEvent, Stack, Typography } from '@mui/material';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { Stack, Typography } from '@mui/material';
+import { useCallback, useContext, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
-import { SettingSelect, SettingsGroup, SettingSwitch } from '../components/Settings';
+import { SettingSelect, SettingSelectProps, SettingsGroup, SettingSwitch } from '../components/Settings';
import { CustomThemeContext } from '../contexts/CustomThemeProvider';
-import { availableLanguages } from '../i18n';
+import { languagesInfos, LanguageTag } from '../i18n';
export default function GeneralPreferences() {
const { t } = useTranslation();
@@ -45,30 +45,30 @@
return <SettingSwitch label={t('setting_dark_theme')} onChange={toggleMode} checked={mode === 'dark'} />;
};
-const settingLanguageOptions = availableLanguages.map(({ tag, fullName }) => ({ label: fullName, value: tag }));
+const settingLanguageOptions = languagesInfos.map(({ tag, fullName }) => ({
+ label: fullName,
+ payload: tag,
+}));
const SettingLanguage = () => {
const { t, i18n } = useTranslation();
- const [languageValue, setLanguageValue] = useState(i18n.language);
+ const option = useMemo(
+ // TODO: Tell Typescript the result can't be undefined
+ () => settingLanguageOptions.find((option) => option.payload === i18n.language),
+ [i18n.language]
+ );
- useEffect(() => {
- i18n.changeLanguage(languageValue);
- }, [languageValue, i18n]);
-
- const onChange = useCallback(
- (event: SelectChangeEvent<unknown>) => {
- setLanguageValue(event.target.value as string);
+ const onChange = useCallback<SettingSelectProps<LanguageTag>['onChange']>(
+ (newValue) => {
+ if (newValue) {
+ i18n.changeLanguage(newValue.payload);
+ }
},
- [setLanguageValue]
+ [i18n]
);
return (
- <SettingSelect
- label={t('setting_language')}
- value={languageValue}
- onChange={onChange}
- options={settingLanguageOptions}
- />
+ <SettingSelect label={t('setting_language')} option={option} options={settingLanguageOptions} onChange={onChange} />
);
};