translations

js/i18n.js

@@ -0,0 +1,25 @@
+import { NativeModules } from 'react-native';
+import console from 'browser-core-lumen-ios/build/modules/core/console';
+
+let translations;
+
+export default function t(key) {
+  if (!translations) {
+    const locale = NativeModules.LocaleConstants.lang;
+    switch (locale) {
+      case 'de':
+        translations = require('./localization/de.json');
+        break;
+      default:
+        translations = require('./localization/en.json');
+    }
+  }
+  const translation = translations[key];
+
+  if (!translation) {
+    console.warn(`Cannot find translation for key "${key}"`);
+    return key;
+  }
+
+  return translation.message;
+}

js/localization/de.json

@@ -0,0 +1,35 @@
+{
+  "search_no_results": {
+    "message": "KEINE TREFFER GEFUNDEN"
+  },
+  "search_footer": {
+    "message": "DIESE SUCHANFRAGE IST ANONYM"
+  },
+  "search_alternative_search_engines_info": {
+    "message": "Lumen Suche verlassen?"
+  },
+  "onboarding_title": {
+    "message": "Neu: Anonyme Suche"
+  },
+  "onboarding_description_line1": {
+    "message": "Jetzt aktivieren um anonym zu suchen."
+  },
+  "onboarding_description_line2": {
+    "message": "Dies kann jederzeit in den Einstellungen geändert werden."
+  },
+  "onboarding_action_accept": {
+    "message": "AUSPROBIEREN"
+  },
+  "onboarding_action_reject": {
+    "message": "NEIN, DANKE"
+  },
+  "onboarding_result_with_query": {
+    "message": "SUCHE AKTIVIERT"
+  },
+  "onboarding_result_without_query": {
+    "message": "EINFACH LOSTIPPEN"
+  },
+  "test": {
+    "message": "de"
+  }
+}

js/localization/en.json

@@ -0,0 +1,35 @@
+{
+  "search_no_results": {
+    "message": "NO RESULTS FOUND"
+  },
+  "search_footer": {
+    "message": "THIS SEARCH QUERY IS ANONYMOUS"
+  },
+  "search_alternative_search_engines_info": {
+    "message": "Leave Lumen Search?"
+  },
+  "onboarding_title": {
+    "message": "New: Anonymous Search"
+  },
+  "onboarding_description_line1": {
+    "message": "Activate now to search anonymously."
+  },
+  "onboarding_description_line2": {
+    "message": "This can be changed anytime in settings."
+  },
+  "onboarding_action_accept": {
+    "message": "TRY NOW"
+  },
+  "onboarding_action_reject": {
+    "message": "NO, THANKS"
+  },
+  "onboarding_result_with_query": {
+    "message": "SEARCH ACTIVATED"
+  },
+  "onboarding_result_without_query": {
+    "message": "START TYPING"
+  },
+  "test": {
+    "message": "de"
+  }
+}

lumen-onboarding.js → js/lumen-onboarding.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, View, Text, TouchableWithoutFeedback, Animated, Easing } from 'react-native';
 import { XmlEntities } from 'html-entities';
+import t from './i18n';
 
 const styles = StyleSheet.create({
   container: {
@@ -72,8 +73,8 @@ export default class Onboarding extends React.Component {
 
   render() {
     // TODO chrmod: translations
-    const tryNowText = this.state.isClicked ? this.checkMark : 'TRY NOW';
-    const noThanksText = this.state.isClicked ? (this.props.hasQuery ? 'SEARCH ACTIVATED' : 'START TYPING') : 'NO, THANKS';
+    const tryNowText = this.state.isClicked ? this.checkMark : t('onboarding_action_accept');
+    const noThanksText = this.state.isClicked ? (this.props.hasQuery ? t('onboarding_result_with_query') : t('onboarding_result_without_query')) : t('onboarding_action_reject');
     const animatedStyle = {
       backgroundColor: this.interpolateColor('#3647D0', '#AEAFFF'),
       width: this.interplateWidth,
@@ -83,17 +84,17 @@ export default class Onboarding extends React.Component {
         <Animated.Text
           style={[styles.title, { color: this.interpolateColor('#3647D0', '#FFFFFF') }]}
         >
-          New: Anonymous Search
+          {t('onboarding_title')}
         </Animated.Text>
         <Animated.Text
           style={[styles.text, { color: this.interpolateColor('#A9ACC4', '#FFFFFF') }]}
         >
-          Activate now to search anonymously.
+          {t('onboarding_description_line1')}
         </Animated.Text>
         <Animated.Text
           style={[styles.text, { color: this.interpolateColor('#A9ACC4', '#FFFFFF') }]}
         >
-          This can be changed anytime in settings.
+          {t('onboarding_description_line2')}
         </Animated.Text>
         <TouchableWithoutFeedback disabled={this.state.isClicked} onPress={() => this.onPress(true)}>
           <Animated.View style={[styles.tryNow, animatedStyle]}>

lumen.js

@@ -13,9 +13,10 @@ import SearchUI from 'browser-core-lumen-ios/build/modules/mobile-cards/SearchUI
 import SearchUIVertical from 'browser-core-lumen-ios/build/modules/mobile-cards-vertical/SearchUI';
 import { Provider as CliqzProvider } from 'browser-core-lumen-ios/build/modules/mobile-cards/cliqz';
 import { Provider as ThemeProvider } from 'browser-core-lumen-ios/build/modules/mobile-cards-vertical/withTheme';
-import Onboarding from './lumen-onboarding';
+import Onboarding from './js/lumen-onboarding';
 import inject from 'browser-core-lumen-ios/build/modules/core/kord/inject';
 import NativeDrawable, { normalizeUrl } from 'browser-core-lumen-ios/build/modules/mobile-cards/components/custom/NativeDrawable';
+import t from './js/i18n';
 
 const nativeBridge = NativeModules.JSBridge;
 
@@ -163,19 +164,19 @@ class MobileCards extends React.Component {
                   footer={<View />}
                 />
                 <>
-                  { /* TODO chrmod: colors and font sizes and translations */ }
+                  { /* TODO chrmod: colors and font sizes */ }
                   { results.length === 0 &&
                     <View style={{ backgroundColor: 'white', height: 80, alignItems: 'center', justifyContent: 'center' }}>
-                      <Text style={{ color: '#656d7e' }}>KEINE TREFFER GEFUNDEN</Text>
+                      <Text style={{ color: '#656d7e' }}></Text>
                     </View>
                   }
                   <View style={styles.footer}>
                     <Text style={{ color: 'white', }}>
-                      DIESE SUCHANFRAGE IST ANONYM
+                      {t('search_footer')}
                     </Text>
                   </View>
                   <View style={{ alignItems: 'center', justifyContent: 'center', marginTop: 20 }}>
-                    <Text style={{ color: 'white' }}>Lumen Suche trotzdem verlassen?</Text>
+                    <Text style={{ color: 'white' }}>{t('search_alternative_search_engines_info')}</Text>
                   </View>
                   <View style={styles.searchEnginesContainer}>
                     { /* TODO chrmod: list + send openlink event onclick + real pngs */ }