96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import React, { useContext, useEffect, useState } from 'react';
|
|
|
|
import { Text } from '@/components/shared/Themed';
|
|
import styled from '@emotion/native';
|
|
import { loadUserSettings, saveUserSettings } from '@/components/shared/business/AsyncStorage';
|
|
import { Switch } from 'react-native';
|
|
import { i18n } from './i18n/i18n';
|
|
import { LanguageContext } from '@/app/shared/providers/LanguageProvider';
|
|
import DropDownPicker from "react-native-dropdown-picker";
|
|
import { VerticalSpacer } from '@/components/shared/Spacers';
|
|
|
|
const t = i18n.scoped('settings');
|
|
|
|
export default function Dashboard() {
|
|
const [soundEnabled, setSoundEnabled] = useState<boolean>(false);
|
|
const { userChangeLanguage } = useContext(LanguageContext)
|
|
const [languageOpen, setLanguageOpen] = useState(false);
|
|
const [languageValue, setLanguageValue] = useState(i18n.localI18n.locale);
|
|
const [language, setLanguage] = useState([
|
|
{ label: t('french'), value: "fr" },
|
|
{ label: t('english'), value: "en" },
|
|
]);
|
|
|
|
useEffect(() => {
|
|
const init = async () => {
|
|
try {
|
|
const soundEnabledLocal = await loadUserSettings('soundEnabled');
|
|
|
|
if (soundEnabledLocal === null) {
|
|
setSoundEnabled(true);
|
|
} else {
|
|
setSoundEnabled(Boolean(Number(soundEnabledLocal)));
|
|
}
|
|
} catch (error) {
|
|
throw new Error('Erreur lors du chargement des paramètres utilisateur');
|
|
}
|
|
};
|
|
|
|
init();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
saveUserSettings('soundEnabled', String(Number(soundEnabled)));
|
|
}, [soundEnabled]);
|
|
|
|
return (
|
|
<Container>
|
|
<Row>
|
|
<Text>{t('soundActivate')}</Text>
|
|
|
|
<Switch
|
|
onValueChange={() => setSoundEnabled(previousState => !previousState)}
|
|
value={soundEnabled}
|
|
/>
|
|
</Row>
|
|
|
|
<VerticalSpacer heightUnits={5} />
|
|
|
|
<Text>{t('language')}</Text>
|
|
<VerticalSpacer heightUnits={2} />
|
|
<Row>
|
|
<DropDownPicker
|
|
open={languageOpen}
|
|
value={languageValue}
|
|
items={language}
|
|
setOpen={setLanguageOpen}
|
|
setValue={setLanguageValue}
|
|
setItems={setLanguage}
|
|
placeholder={languageValue ?? ''}
|
|
onChangeValue={(value: any) => {
|
|
const formattedValue = value === 'fr' ? 'fr' : 'en'
|
|
userChangeLanguage(formattedValue)
|
|
}}
|
|
/>
|
|
</Row>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
const Title = styled(Text)(({ theme }) => ({
|
|
textAlign: 'center',
|
|
fontSize: 40,
|
|
fontWeight: 'bold',
|
|
color: theme.colors.fixed.black
|
|
}));
|
|
|
|
const Row = styled.View({
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center'
|
|
})
|
|
|
|
const Container = styled.View({
|
|
padding: 20
|
|
})
|