Add multilanguage support
This commit is contained in:
Maarten
parent
f8cbcb2908
commit
fc53bb14a0
15 changed files with 489 additions and 92 deletions
|
|
@ -1,14 +1,17 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
SafeAreaView,
|
||||
StatusBar,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
Alert, Image,
|
||||
} from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { BottomSheet, BottomSheetRefType } from 'react-native-select-bottom-list';
|
||||
|
||||
|
||||
import { ThemedText } from '@/lib/components/ThemedText';
|
||||
import { ThemedView } from '@/lib/components/ThemedView';
|
||||
|
|
@ -21,10 +24,12 @@ import CustomModal from '@/lib/components/EditModal';
|
|||
import { store } from '@/lib/store/store';
|
||||
import { setSession, setReloadCalendar } from '@/lib/store/dataStore';
|
||||
import { ThemedIcon } from '@/lib/components/ThemedIcon';
|
||||
import List from '@/lib/components/List';
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const colorScheme = useColorScheme() ?? 'light';
|
||||
const { token, setToken } = useToken();
|
||||
const { t, i18n } = useTranslation();
|
||||
const session = useSelector( (state: any) => state.data.session );
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -39,6 +44,10 @@ export default function SettingsScreen() {
|
|||
const [ city, setCity ] = React.useState( '3' );
|
||||
const [ addressModalVisible, setAddressModalVisible ] = useState( false );
|
||||
|
||||
// Language
|
||||
const [ language, setLanguage ] = useState( 'nl' );
|
||||
const sheetRef = useRef<BottomSheetRefType>( null );
|
||||
|
||||
useEffect( () => {
|
||||
setSessionData( session );
|
||||
}, [ session ] );
|
||||
|
|
@ -53,6 +62,9 @@ export default function SettingsScreen() {
|
|||
setHouseNumber( session.address.houseNumber );
|
||||
setStreet( session.address.street );
|
||||
setCity( session.address.city );
|
||||
|
||||
// Language
|
||||
setLanguage(session.language);
|
||||
}
|
||||
|
||||
// Handle save settings
|
||||
|
|
@ -75,6 +87,10 @@ export default function SettingsScreen() {
|
|||
addressChanged = true;
|
||||
}
|
||||
|
||||
if (inputValues.language) {
|
||||
postData[ 'language' ] = inputValues.language;
|
||||
}
|
||||
|
||||
Request.post( 'sessions/update', postData )
|
||||
.then( (response) => {
|
||||
if (response.success) {
|
||||
|
|
@ -84,32 +100,46 @@ export default function SettingsScreen() {
|
|||
store.dispatch( setSession( response.session ) )
|
||||
store.dispatch( setReloadCalendar( addressChanged ) )
|
||||
|
||||
Message.success( 'Opgeslagen!' )
|
||||
Message.success( t( "saved" ) )
|
||||
} else {
|
||||
Message.error( response.message );
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
const openLanguageSelect = () => {
|
||||
sheetRef.current?.open();
|
||||
}
|
||||
|
||||
const changeLanguage = (lang: string) => {
|
||||
sheetRef.current?.close();
|
||||
|
||||
i18n.changeLanguage( lang ).then( () => {
|
||||
setLanguage(lang);
|
||||
|
||||
handleSave( { language: lang } );
|
||||
} );
|
||||
}
|
||||
|
||||
// Remove session data and logout
|
||||
const logout = () => {
|
||||
Alert.alert( 'Uitloggen', 'Weet je het zeker?', [
|
||||
Alert.alert( t( "logout" ), t( "are-you-sure" ), [
|
||||
{
|
||||
text: 'Annuleren',
|
||||
text: t( "cancel" ),
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: 'Ja',
|
||||
text: t( "ja" ),
|
||||
onPress: () => {
|
||||
Request.post( 'sessions/delete' ).then( (response) => {
|
||||
if (!response.success) {
|
||||
Message.success( 'Je bent uitgelogd' );
|
||||
Message.success( t( "logged-out" ) );
|
||||
|
||||
setToken( null );
|
||||
|
||||
router.replace( '/(onboarding)/start' );
|
||||
} else {
|
||||
Message.error( 'Er is iets mis gegaan. Probeer het later opnieuw!' )
|
||||
Message.error( t( "something-went-wrong" ) )
|
||||
}
|
||||
} )
|
||||
}
|
||||
|
|
@ -122,14 +152,14 @@ export default function SettingsScreen() {
|
|||
<ThemedView style={styles.container}>
|
||||
<ScrollView>
|
||||
<ThemedView style={styles.titleContainer}>
|
||||
<ThemedText type="title">Instellingen</ThemedText>
|
||||
<ThemedText type="title">{t( "settings" )}</ThemedText>
|
||||
</ThemedView>
|
||||
|
||||
<ThemedView style={styles.listContainer}>
|
||||
<ThemedView style={styles.listItem}>
|
||||
<ThemedView style={styles.listTitle}>
|
||||
<ThemedIcon name="person-outline" size={20} style={styles.listIcon}/>
|
||||
<ThemedText type="defaultSemiBold">Naam</ThemedText>
|
||||
<ThemedText type="defaultSemiBold">{t( "name" )}</ThemedText>
|
||||
</ThemedView>
|
||||
|
||||
<TouchableOpacity style={styles.listEdit} onPress={() => setNameModalVisible( true )}>
|
||||
|
|
@ -141,7 +171,7 @@ export default function SettingsScreen() {
|
|||
<ThemedView style={styles.listItem}>
|
||||
<ThemedView style={styles.listTitle}>
|
||||
<ThemedIcon size={20} name="trail-sign-outline" style={styles.listIcon}/>
|
||||
<ThemedText type="defaultSemiBold">Adres</ThemedText>
|
||||
<ThemedText type="defaultSemiBold">{t( "address" )}</ThemedText>
|
||||
</ThemedView>
|
||||
|
||||
<TouchableOpacity style={styles.listEdit} onPress={() => setAddressModalVisible( true )}>
|
||||
|
|
@ -153,11 +183,23 @@ export default function SettingsScreen() {
|
|||
<ThemedView style={styles.listItem}>
|
||||
<ThemedView style={styles.listTitle}>
|
||||
<ThemedIcon size={20} name="notifications-outline" style={styles.listIcon}/>
|
||||
<ThemedText type="defaultSemiBold">Notificaties</ThemedText>
|
||||
<ThemedText type="defaultSemiBold">{t( "notifications" )}</ThemedText>
|
||||
</ThemedView>
|
||||
|
||||
<TouchableOpacity style={styles.listEdit} onPress={() => router.push( '/(settings)/notifications' )}>
|
||||
<ThemedText style={styles.listEditText}>Wijzigen</ThemedText>
|
||||
<ThemedText style={styles.listEditText}>{t( "change" )}</ThemedText>
|
||||
<ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
|
||||
</TouchableOpacity>
|
||||
</ThemedView>
|
||||
|
||||
<ThemedView style={styles.listItem}>
|
||||
<ThemedView style={styles.listTitle}>
|
||||
<ThemedIcon size={20} name="language-outline" style={styles.listIcon}/>
|
||||
<ThemedText type="defaultSemiBold">{t( "language" )}</ThemedText>
|
||||
</ThemedView>
|
||||
|
||||
<TouchableOpacity style={styles.listEdit} onPress={openLanguageSelect}>
|
||||
<ThemedText style={styles.listEditText}>{t( "languages." + language )}</ThemedText>
|
||||
<ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
|
||||
</TouchableOpacity>
|
||||
</ThemedView>
|
||||
|
|
@ -166,7 +208,7 @@ export default function SettingsScreen() {
|
|||
<ThemedText>
|
||||
<TouchableOpacity onPress={logout}>
|
||||
<ThemedText type="defaultSemiBold" style={styles.logout}>
|
||||
Uitloggen
|
||||
{t( "logout" )}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</ThemedText>
|
||||
|
|
@ -174,39 +216,63 @@ export default function SettingsScreen() {
|
|||
</ThemedView>
|
||||
|
||||
<CustomModal
|
||||
title="Naam wijzigen"
|
||||
title={t( "modal.name.title" )}
|
||||
visible={nameModalVisible}
|
||||
onClose={() => setNameModalVisible( false )}
|
||||
onSave={handleSave}
|
||||
fields={[
|
||||
{
|
||||
name: 'name',
|
||||
placeholder: 'Je naam',
|
||||
placeholder: t( "modal.name.your-name" ),
|
||||
defaultValue: name,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<CustomModal
|
||||
title="Adres wijzigen"
|
||||
title={t( "modal.address.title" )}
|
||||
visible={addressModalVisible}
|
||||
onClose={() => setAddressModalVisible( false )}
|
||||
onSave={handleSave}
|
||||
fields={[
|
||||
{
|
||||
name: 'zipcode',
|
||||
title: 'Postcode',
|
||||
placeholder: 'Je postcode',
|
||||
title: t( "modal.address.zipcode" ),
|
||||
placeholder: t( "modal.address.your-zipcode" ),
|
||||
defaultValue: zipcode,
|
||||
},
|
||||
{
|
||||
name: 'houseNumber',
|
||||
title: 'Huisnummer',
|
||||
placeholder: 'Je huis nummer',
|
||||
title: t( "modal.address.house-number" ),
|
||||
placeholder: t( "modal.address.your-house-number" ),
|
||||
defaultValue: houseNumber,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<BottomSheet ref={sheetRef} presentationStyle={'overFullScreen'}>
|
||||
<ThemedView>
|
||||
<List
|
||||
data={[
|
||||
{
|
||||
name: t( "languages.nl" ),
|
||||
key: "nl",
|
||||
},
|
||||
{
|
||||
name: t( "languages.en" ),
|
||||
key: "en",
|
||||
}
|
||||
]}
|
||||
viewStyle={styles.languagesList}
|
||||
renderItem={(item: any, index: any) => (
|
||||
<TouchableOpacity style={styles.languagesListItem} key={index} onPress={() => changeLanguage( item.key )}>
|
||||
<ThemedText type="defaultSemiBold">{item.name}</ThemedText>
|
||||
<ThemedIcon name={'chevron-forward'} size={18}/>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
/>
|
||||
</ThemedView>
|
||||
</BottomSheet>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
|
@ -262,4 +328,20 @@ const styles = StyleSheet.create( {
|
|||
logout: {
|
||||
color: Colors.red,
|
||||
},
|
||||
languagesList: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
padding: 25,
|
||||
},
|
||||
languagesListItem: {
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingBottom: 15,
|
||||
marginBottom: 15,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#f2f2f2',
|
||||
}
|
||||
} );
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue