Merge pull request #387 from kolplattformen/feature/language-name-on-…

…start-screen feat: 🎸 Added current language name to auth screen
kolplattformen · May 11, 2021 · fa6df50 · fa6df50
2 parents 79f485f + 3b556fc
commit fa6df50
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 50 deletions.
diff --git a/packages/app/components/auth.component.tsx b/packages/app/components/auth.component.tsx
@@ -11,12 +11,13 @@ import { Keyboard, TouchableWithoutFeedback, View } from 'react-native'
 import { Login } from './login.component'
 import { Layout as LayoutStyle, Sizing, Typography } from '../styles'
 import { SafeAreaViewContainer } from '../ui/safeAreaViewContainer.component'
-import { translate } from '../utils/translation'
+import { translate, languages } from '../utils/translation'
 import { GlobeIcon } from './icon.component'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { RootStackParamList } from './navigation.component'
 import { SafeAreaView } from '../ui/safeAreaView.component'
 import { KeyboardAvoidingView } from '../ui/keyboardAvoidingView.component'
+import { LanguageService } from '../services/languageService'
 
 const randomWord = () => {
   const words = translate('auth.words')
@@ -36,14 +37,20 @@ interface AuthProps {
 export const Auth: React.FC<AuthProps> = ({ navigation }) => {
   const styles = useStyleSheet(themeStyles)
 
+  const currentLanguage = LanguageService.getLanguageCode()
+  const currentLanguageName = languages.find(
+    (language) => language.langCode === currentLanguage
+  )?.languageLocalName
+
   return (
     <KeyboardAvoidingView>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <SafeAreaView>
           <SafeAreaViewContainer>
             <TopNavigation
-              alignment="center"
-              accessoryRight={() => (
+              alignment="start"
+              subtitle={currentLanguageName}
+              accessoryLeft={() => (
                 <TopNavigationAction
                   accessibilityLabel={translate('auth.a11y_change_language', {
                     defaultValue: 'Tryck här för att välja språk',

diff --git a/packages/app/components/setLanguage.component.tsx b/packages/app/components/setLanguage.component.tsx
@@ -13,58 +13,12 @@ import { TouchableOpacity } from 'react-native-gesture-handler'
 import { useLanguage } from '../hooks/useLanguage'
 import { isRTL, LanguageService } from '../services/languageService'
 import { Layout as LayoutStyle, Sizing } from '../styles'
-import { translate } from '../utils/translation'
+import { translate, languages } from '../utils/translation'
 import { BackIcon } from './icon.component'
 import { SafeAreaViewContainer } from '../ui/safeAreaViewContainer.component'
 import RNRestart from 'react-native-restart'
 import { SafeAreaView } from '../ui/safeAreaView.component'
 
-interface Language {
-  langCode: string
-  languageName: string
-  languageLocalName: string
-  active: boolean
-}
-
-const languages: Language[] = [
-  {
-    langCode: 'sv',
-    languageName: 'Swedish',
-    languageLocalName: 'svenska',
-    active: true,
-  },
-  {
-    langCode: 'en',
-    languageName: 'English',
-    languageLocalName: 'english',
-    active: true,
-  },
-  {
-    langCode: 'pl',
-    languageName: 'Polish',
-    languageLocalName: 'polski',
-    active: true,
-  },
-  {
-    langCode: 'de',
-    languageName: 'German',
-    languageLocalName: 'Deutsch',
-    active: true,
-  },
-  {
-    langCode: 'ar',
-    languageName: 'Arabic',
-    languageLocalName: 'اَلْعَرَبِيَّةُ',
-    active: false,
-  },
-  {
-    langCode: 'so',
-    languageName: 'Somali',
-    languageLocalName: 'af-Soomaali',
-    active: false,
-  },
-]
-
 export const SetLanguage = () => {
   const navigation = useNavigation()
 

diff --git a/packages/app/utils/translation.ts b/packages/app/utils/translation.ts
@@ -1,5 +1,51 @@
 import i18n, { TranslateOptions } from 'i18n-js'
 
+interface Language {
+  langCode: string
+  languageName: string
+  languageLocalName: string
+  active: boolean
+}
+
+export const languages: Language[] = [
+  {
+    langCode: 'sv',
+    languageName: 'Swedish',
+    languageLocalName: 'Svenska',
+    active: true,
+  },
+  {
+    langCode: 'en',
+    languageName: 'English',
+    languageLocalName: 'English',
+    active: true,
+  },
+  {
+    langCode: 'pl',
+    languageName: 'Polish',
+    languageLocalName: 'Polski',
+    active: true,
+  },
+  {
+    langCode: 'de',
+    languageName: 'German',
+    languageLocalName: 'Deutsch',
+    active: true,
+  },
+  {
+    langCode: 'ar',
+    languageName: 'Arabic',
+    languageLocalName: 'اَلْعَرَبِيَّةُ',
+    active: false,
+  },
+  {
+    langCode: 'so',
+    languageName: 'Somali',
+    languageLocalName: 'af-Soomaali',
+    active: false,
+  },
+]
+
 export const translations = {
   ar: require('../translations/ar.json'),
   de: require('../translations/de.json'),