Initial commit for translations. Added en + sv and translated first page

packages/app/App.js

@@ -13,6 +13,7 @@ import { StatusBar } from 'react-native'
 import { useBackgroundBlur } from './utils/blur'
 import moment from 'moment'
 import 'moment/locale/sv'
+import { useTranslation } from './hooks/use-translation'
 
 moment.locale('sv')
 
@@ -21,6 +22,8 @@ const api = init(fetch, CookieManager)
 export default () => {
   const FullBlurView = useBackgroundBlur()
 
+  useTranslation()
+
   return (
     <ApiProvider api={api} storage={AsyncStorage}>
       <SafeAreaProvider>

packages/app/components/auth.component.tsx

@@ -1,5 +1,5 @@
 import { Layout, Text } from '@ui-kitten/components'
-import React, { useState } from 'react'
+import React from 'react'
 import {
   Keyboard,
   KeyboardAvoidingView,
@@ -12,33 +12,20 @@ import {
 import { Login } from './login.component'
 import { Colors, Layout as LayoutStyle, Sizing, Typography } from '../styles'
 import { SafeAreaViewContainer } from './safeAreaViewContainer.component'
+import { translate } from '../utils/translation'
 
-const funArguments = [
-  'agila',
-  'billiga',
-  'bättre',
-  'coolare',
-  'efterlängtade',
-  'enkla',
-  'fantastiska',
-  'fria',
-  'fungerande',
-  'första',
-  'hemmagjorda',
-  'operfekta',
-  'rebelliska',
-  'roliga',
-  'snabba',
-  'upplysta',
-  'öppna',
-]
+const randomWord = () => {
+  const words = translate('auth.words')
+  const keys = Object.keys(words)
+
+  const randomIndex: number = Math.floor(Math.random() * keys.length)
+  const argumentKey: string = keys[randomIndex]
+
+  // @ts-expect-error Fix this later
+  return words[argumentKey]
+}
 
 export const Auth = () => {
-  const [argument] = useState(() => {
-    const argNum = Math.floor(Math.random() * funArguments.length)
-    return funArguments[argNum]
-  })
-
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -50,10 +37,12 @@ export const Auth = () => {
             <View style={styles.content}>
               <Layout style={styles.container}>
                 <Text category="h2" adjustsFontSizeToFit numberOfLines={1}>
-                  Öppna Skolplattformen
+                  {translate('general.title')}
                 </Text>
                 <Text category="h6" style={styles.subtitle}>
-                  Det {argument} alternativet
+                  {translate('auth.subtitle', {
+                    word: randomWord(),
+                  })}
                 </Text>
                 <Login />
               </Layout>

packages/app/components/login.component.tsx

@@ -21,6 +21,7 @@ import ActionSheet from 'rn-actionsheet-module'
 import { useAsyncStorage } from 'use-async-storage'
 import { schema } from '../app.json'
 import { Colors, Layout, Sizing } from '../styles'
+import { translate } from '../utils/translation'
 import {
   CloseOutlineIcon,
   PersonIcon,
@@ -43,14 +44,16 @@ export const Login = () => {
     'loginMethodIndex',
     '0'
   )
+
   const loginMethods = [
-    'Öppna BankID på denna enhet',
-    'Öppna BankID på annan enhet',
-    'Logga in som testanvändare',
+    translate('auth.bankid_OpenOnThisDevice'),
+    translate('auth.bankid_OpenOnAnotherDevice'),
+    translate('auth.loginAsTestUser'),
   ]
+
   const selectLoginMethod = () => {
     const options = {
-      title: 'Välj inloggningsmetod',
+      title: translate('auth.chooseLoginMethod'),
       optionsIOS: loginMethods,
       optionsAndroid: loginMethods,
       onCancelAndroidIndex: loginMethodIndex,
@@ -110,7 +113,7 @@ export const Login = () => {
           : `bankid:///?autostarttoken=${token}&redirect=null`
       Linking.openURL(bankIdUrl)
     } catch (err) {
-      setError('Öppna BankID manuellt')
+      setError(translate('bankid_OpenManually'))
     }
   }
 
@@ -143,7 +146,7 @@ export const Login = () => {
       <View style={styles.loginForm}>
         {loginMethodIndex !== 2 && (
           <Input
-            label="Personnummer"
+            label={translate('auth.personalNumber')}
             autoFocus
             value={socialSecurityNumber}
             style={styles.pnrInput}
@@ -157,7 +160,7 @@ export const Login = () => {
             onSubmitEditing={(event) => startLogin(event.nativeEvent.text)}
             caption={error || ''}
             onChangeText={(text) => handleInput(text)}
-            placeholder="Ditt personnr"
+            placeholder={translate('auth.placeholder_YourPersonalNumber')}
           />
         )}
         <ButtonGroup style={styles.loginButtonGroup}>
@@ -189,7 +192,9 @@ export const Login = () => {
         onBackdropPress={() => showModal(false)}
       >
         <Card disabled>
-          <Text style={styles.bankIdLoading}>Väntar på BankID...</Text>
+          <Text style={styles.bankIdLoading}>
+            {translate('auth.bankid_Waiting')}
+          </Text>
 
           <Button
             onPress={() => {

packages/app/hooks/use-force-update.tsx

@@ -0,0 +1,10 @@
+import { useCallback, useState } from 'react'
+
+export default function useForceUpdate(): () => void {
+  const [, dispatch] = useState<{}>(Object.create(null))
+
+  const memoizedDispatch = useCallback((): void => {
+    dispatch(Object.create(null))
+  }, [dispatch])
+  return memoizedDispatch
+}

packages/app/hooks/use-translation.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+import { setI18nConfig } from '../utils/translation'
+import useForceUpdate from './use-force-update'
+import * as RNLocalize from 'react-native-localize'
+
+export const useTranslation = () => {
+  const forceUpdate = useForceUpdate()
+
+  const handleLocalizationChange = () => {
+    setI18nConfig()
+    forceUpdate()
+  }
+
+  useEffect(() => {
+    setI18nConfig()
+
+    return RNLocalize.addEventListener('change', handleLocalizationChange)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}

packages/app/ios/Podfile.lock

@@ -353,6 +353,8 @@ PODS:
     - React-Core
   - RNGestureHandler (1.10.3):
     - React-Core
+  - RNLocalize (2.0.2):
+    - React-Core
   - RNReanimated (1.13.2):
     - React-Core
   - RNScreens (2.18.1):
@@ -426,6 +428,7 @@ DEPENDENCIES:
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNLocalize (from `../node_modules/react-native-localize`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -523,6 +526,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/datetimepicker"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNLocalize:
+    :path: "../node_modules/react-native-localize"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
@@ -537,7 +542,7 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 49cbe4b43e445b06bf29199b6ad2057649e4c8f5
-  FBReactNativeSpec: 0b41cf9e0b74ffa97ededb3d0210da5b4710474c
+  FBReactNativeSpec: 0bd88dccda1f83b7a01f01706f3728c8b36a5b30
   Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: f7a3caafbd74bda4827954fd7a6e000e36355489
@@ -582,6 +587,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNDateTimePicker: d943800c936fb01c352fcfb70439550d2cb57092
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNLocalize: 43f6c30d8e19ad92282ae434d310fb463b31f419
   RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
   RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
   RNSVG: ce9d996113475209013317e48b05c21ee988d42e

packages/app/ios/app.xcodeproj/project.pbxproj

@@ -295,7 +295,7 @@
 						TestTargetID = 13B07F861A680F5B00A75B9A;
 					};
 					13B07F861A680F5B00A75B9A = {
-						DevelopmentTeam = 59292HY5Q8;
+						DevelopmentTeam = 8PZ3BD667F;
 						LastSwiftMigration = 1120;
 					};
 					2D02E47A1E0B4A5D006451C7 = {
@@ -316,6 +316,7 @@
 			knownRegions = (
 				en,
 				Base,
+				"sv-SE",
 			);
 			mainGroup = 83CBB9F61A601CBA00E9B192;
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
@@ -698,7 +699,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 156;
-				DEVELOPMENT_TEAM = 59292HY5Q8;
+				DEVELOPMENT_TEAM = 8PZ3BD667F;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = app/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";

packages/app/package.json

@@ -28,8 +28,10 @@
     "@ui-kitten/components": "5.0.0",
     "@ui-kitten/eva-icons": "5.0.0",
     "buffer": "6.0.3",
+    "fast-memoize": "^2.5.2",
     "formik": "2.2.6",
     "hermes-engine": "0.7.2",
+    "i18n-js": "^3.8.0",
     "jsuri": "1.3.1",
     "personnummer": "3.1.3",
     "react": "17.0.2",
@@ -38,6 +40,7 @@
     "react-native-calendar-strip": "2.2.1",
     "react-native-fix-image": "2.1.0",
     "react-native-gesture-handler": "1.10.3",
+    "react-native-localize": "^2.0.2",
     "react-native-markdown-display": "7.0.0-alpha.2",
     "react-native-modal-datetime-picker": "9.2.0",
     "react-native-reanimated": "1.13.2",
@@ -60,6 +63,7 @@
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-hooks": "^5.1.1",
     "@testing-library/react-native": "7.1.0",
+    "@types/i18n-js": "^3.8.0",
     "@types/jest": "^26.0.22",
     "@types/jsuri": "^1.3.30",
     "@types/markdown-it": "^12.0.1",

packages/app/translations/en.json

@@ -0,0 +1,35 @@
+{
+    "general": {
+        "title": "Open school platform"
+    },
+    "auth": {
+        "subtitle": "The {{word}} alternative",
+        "personalNumber": "Personal number",
+        "bankid_OpenOnAnotherDevice": "Open BankID on another device",
+        "bankid_OpenOnThisDevice": "Open BankID on this device",
+        "bankid_Waiting": "Waiting for BankID...",
+        "bankid_OpenManually": "Open BankID manually",
+        "loginAsTestUser": "Login as test user",
+        "placeholder_YourPersonalNumber": "Your personal number",
+        "chooseLoginMethod": "Choose login method",
+        "words": {
+            "agile": "agile",
+            "cheap": "cheap",
+            "better": "better",
+            "cooler": "ccooleroolare",
+            "awaited": "awaited",
+            "simple": "simple",
+            "fantastic": "fantastic",
+            "free": "free",
+            "working": "working",
+            "first": "first",
+            "homemade": "homemade",
+            "imperfect": "imperfect",
+            "rebellious": "rebellious",
+            "fun": "fun",
+            "fast": "fast",
+            "enlightened": "enlightened",
+            "open": "open"
+        }
+    }
+}

packages/app/translations/sv.json

@@ -0,0 +1,35 @@
+{
+    "general": {
+        "title": "Öppna skolplattformen"
+    },
+    "auth": {
+        "subtitle": "Det {{word}} alternativet",
+        "personalNumber": "Personnummer",
+        "bankid_OpenOnAnotherDevice": "Öppna BankID på en annan enhet",
+        "bankid_OpenOnThisDevice": "Öppna BankID på denna enhet",
+        "bankid_Waiting": "Väntar på BankID...",
+        "bankid_OpenManually": "Öppna BankID manuellt",
+        "loginAsTestUser": "Logga in som testanvändare",
+        "placeholder_YourPersonalNumber": "Ditt personnummer",
+        "chooseLoginMethod": "Välj inloggningsmetod",
+        "words": {
+            "agile": "agila",
+            "cheap": "billiga",
+            "better": "bättre",
+            "cooler": "coolare",
+            "awaited": "efterlängtade",
+            "simple": "enkla",
+            "fantastic": "fantastiska",
+            "free": "fria",
+            "working": "fungerande",
+            "first": "första",
+            "homemade": "hemmagjorda",
+            "imperfect": "operfekta",
+            "rebellious": "rebelliska",
+            "fun": "roliga",
+            "fast": "snabba",
+            "enlightened": "upplysta",
+            "open": "open"
+        }
+    }
+}

packages/app/utils/translation.ts

@@ -0,0 +1,21 @@
+import memoize from 'fast-memoize'
+import i18n from 'i18n-js'
+import * as RNLocalize from 'react-native-localize'
+
+const translationGetters = {
+  en: () => require('../translations/en.json'),
+  sv: () => require('../translations/sv.json'),
+}
+
+export const setI18nConfig = () => {
+  const fallback = { languageTag: 'sv' }
+  const { languageTag } =
+    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
+    fallback
+
+  // @ts-expect-error Fix later
+  i18n.translations = { [languageTag]: translationGetters[languageTag]() }
+  i18n.locale = languageTag
+}
+
+export const translate = memoize(i18n.t)