From ebd05b393500f9de16c3ecb8d964e3d73c351aa3 Mon Sep 17 00:00:00 2001
From: farhantock <achmadfarhanmushafa@gmail.com>
Date: Thu, 20 Jun 2024 13:01:07 +0700
Subject: [PATCH] feat(language): add language page

---
 src/components/language.js | 65 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/components/language.js

diff --git a/src/components/language.js b/src/components/language.js
new file mode 100644
index 0000000..e98e1c7
--- /dev/null
+++ b/src/components/language.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import { StatusBar, View } from 'react-native';
+import { List, Appbar, useTheme } from 'react-native-paper';
+import { StyleSheet } from 'react-native';
+import { useSelector, useDispatch } from 'react-redux';
+import { setChosenLanguage } from '../appredux/actions';
+import { strings, changeLanguage } from '../utils/i18n';
+
+export default function LanguageScreen({ navigation }) {
+    const theme = useTheme();
+    const isDarkTheme = theme.dark;
+    const dispatch = useDispatch();
+    const { chosenLanguage } = useSelector(state => state.themeReducer);
+
+    const onChangeLanguage = (languageKey) => {
+        dispatch(setChosenLanguage(languageKey));
+        changeLanguage(languageKey);
+        navigation.navigate('App');
+    };
+
+    return (
+        <>
+            <StatusBar
+                backgroundColor={isDarkTheme ? theme.colors.surface : theme.colors.white}
+                barStyle={isDarkTheme ? 'light-content' : 'dark-content'}
+                translucent={true}
+            />
+            <Appbar.Header
+                mode='center-aligned'
+                style={{ backgroundColor: isDarkTheme ? theme.colors.surface : theme.colors.white, elevation: 4 }}
+            >
+                <Appbar.BackAction
+                    color={isDarkTheme ? theme.colors.pureWhite : theme.colors.black}
+                    onPress={() => { navigation.goBack() }}
+                />
+                <Appbar.Content
+                    titleStyle={{ fontWeight: 'bold' }}
+                    color={isDarkTheme ? theme.colors.pureWhite : theme.colors.black}
+                    title={strings('profile.languageSetting')}
+                />
+            </Appbar.Header>
+            <View style={{ flex: 1, backgroundColor: theme.colors.surface }}>
+                <View style={styles.container}>
+                    <List.Item
+                        title="English"
+                        left={props => <List.Icon {...props} size={25} icon="translate" />}
+                        onPress={() => onChangeLanguage('en')}
+                    />
+                    <List.Item
+                        title="Bahasa Indonesia"
+                        left={props => <List.Icon {...props} size={25} icon="translate" />}
+                        onPress={() => onChangeLanguage('id')}
+                    />
+                </View>
+            </View>
+        </>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginHorizontal: 10
+    },
+});