Path-Check · tstirrat · Apr 25, 2020 · Apr 23, 2020 · Apr 23, 2020 · Apr 23, 2020
diff --git a/app/Entry.js b/app/Entry.js
@@ -11,7 +11,7 @@ import ChooseProviderScreen from './views/ChooseProvider';
 import { ExportScreen } from './views/Export';
 import { ExposureHistoryScreen } from './views/ExposureHistory/ExposureHistory';
 import ImportScreen from './views/Import';
-import LicencesScreen from './views/Licenses';
+import { LicensesScreen } from './views/Licenses';
 import LocationTracking from './views/LocationTracking';
 import NewsScreen from './views/News';
 import Onboarding1 from './views/onboarding/Onboarding1';
@@ -123,7 +123,7 @@ class Entry extends Component {
           />
           <Stack.Screen
             name='LicensesScreen'
-            component={LicencesScreen}
+            component={LicensesScreen}
             options={{ headerShown: false }}
           />
           <Stack.Screen

diff --git a/app/locales/ar.json b/app/locales/ar.json
@@ -33,13 +33,13 @@
     "home_setting_off_header": "غير معروف",
     "home_setting_off_subtext": "لا يمكننا معرفة ما إذا كنت في خطر ما لم تقم بتفعيل سجل المواقع المتتبعة الموجودة في شاشة الإعدادات",
     "import_title": "تحميل المواقع المتعقبة",
-    "import_step_1":"ستمنحك إضافة بيانات موقعك من Google السبق في بناء مواقعك الأخيرة",
-    "import_step_2":"قبل أن تتمكن من التحميل ، يجب عليك أولاً الحصول على بيانات موقعك من Google",
-    "import_step_3":"قم بزيارة Google Takeout وقم بتحميل سجل المواقع باستخدام الإعدادات التالية: \n1. طريقة التحميل: \"الإضافة إلى Google Drive \" \n2. التكرار: \"التحميل مرة واحدة \" \n3. نوع الملف وحجمه: \". zip \" و \"1 جيجابايت \" \n4. ترسل Google بريدًا إلكترونيًا عندما يكون التحميل جاهزًا \n5. عد هنا لتحميل المواقع. خيارات التحميل: \n- التحميل من Google Drive \n- التحميل من المتصفح ، ثم التحميل من ملفات الهاتف المحلية. تأكد من أن تكون على شبكة WiFi لأن الملفات يمكن أن تكون كبيرة.",
-    "import_takeout":"قم بزيارة Google Takeout",
-    "import_success":"تم تحميل المواقع الأخيرة بنجاح!",
-    "import_already_imported":"تم تحميل ملف Takeout المقدم بالفعل",
-    "import_error":"حدث خطأ أثناء تحميل بياناتك",
+    "import_step_1": "ستمنحك إضافة بيانات موقعك من Google السبق في بناء مواقعك الأخيرة",
+    "import_step_2": "قبل أن تتمكن من التحميل ، يجب عليك أولاً الحصول على بيانات موقعك من Google",
+    "import_step_3": "قم بزيارة Google Takeout وقم بتحميل سجل المواقع باستخدام الإعدادات التالية: \n1. طريقة التحميل: \"الإضافة إلى Google Drive \" \n2. التكرار: \"التحميل مرة واحدة \" \n3. نوع الملف وحجمه: \". zip \" و \"1 جيجابايت \" \n4. ترسل Google بريدًا إلكترونيًا عندما يكون التحميل جاهزًا \n5. عد هنا لتحميل المواقع. خيارات التحميل: \n- التحميل من Google Drive \n- التحميل من المتصفح ، ثم التحميل من ملفات الهاتف المحلية. تأكد من أن تكون على شبكة WiFi لأن الملفات يمكن أن تكون كبيرة.",
+    "import_takeout": "قم بزيارة Google Takeout",
+    "import_success": "تم تحميل المواقع الأخيرة بنجاح!",
+    "import_already_imported": "تم تحميل ملف Takeout المقدم بالفعل",
+    "import_error": "حدث خطأ أثناء تحميل بياناتك",
     "import_no_recent_locations": "ليس لدى Takeout أي مواقع حديثة",
     "import_invalid_file_format": "تنسيق الملف المقدم غير معتمد. \n التنسيقات المدعومة: \". zip \".",
     "latest_news": "أحدث الأخبار",
@@ -102,7 +102,6 @@
     "team": "الفريق",
     "team_para": "يتكون فريقنا من مجموعة من علماء الأوبئة والمهندسين وعلماء البيانات وأخصائيين الخصوصية الرقمية والأساتذة والباحثين من المؤسسات المرموقة ، بما في ذلك: MIT و Harvard و The Mayo Clinic و TripleBlind و EyeNetra و Ernst & Young و Link Ventures",
     "terms_of_use": "تعليمات الاستخدام",
-    "terms_of_use_url": "https://docs.google.com/document/d/1mtdal_pywsKZVMXLHjjj5eKznipPLP8sM1HwFTIhjo0/edit#",
     "tested_positive_subtitle": "يمكن نقل بياناتك الخاصة إلى السلطات الصحية أو نسخها احتياطيًا أو مشاركتها بأي طريقة أخرى",
     "tested_positive_title": "مشاركة سجل تتبع الموقع",
     "logging_active": " خدمة تتبع الموقع مفعلة",

diff --git a/app/locales/en.json b/app/locales/en.json
@@ -82,7 +82,6 @@
     "team": "Team",
     "team_para": "Our team is composed of a consortium of epidemiologists, engineers, data scientists, digital privacy evangelists, professors and researchers from reputable institutions, including: MIT, Harvard, The Mayo Clinic, TripleBlind, EyeNetra, Ernst & Young and Link Ventures.",
     "terms_of_use": "Terms of use",
-    "terms_of_use_url": "https://docs.google.com/document/d/1mtdal_pywsKZVMXLHjjj5eKznipPLP8sM1HwFTIhjo0/edit#",
     "tested_positive_subtitle": "Your private data can be transferred to health authorities, backed up, or otherwise shared.",
     "tested_positive_title": "Share location history",
     "language_change_alert_title": "App need to restart in order to use this language",

diff --git a/app/views/Licenses.js b/app/views/Licenses.js
@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   BackHandler,
   Image,
@@ -12,46 +13,45 @@ import { WebView } from 'react-native-webview';
 
 import foreArrow from './../assets/images/foreArrow.png';
 import licenses from './../assets/LICENSE.json';
-import languages from './../locales/languages';
 import NavigationBarWrapper from '../components/NavigationBarWrapper';
 import { Typography } from '../components/Typography';
 import Colors from '../constants/colors';
-import fontFamily from '../constants/fonts';
+import { Theme } from '../constants/themes';
 
-class LicensesScreen extends Component {
-  constructor(props) {
-    super(props);
-  }
+const TERMS_OF_USE_URL =
+  'https://docs.google.com/document/d/1mtdal_pywsKZVMXLHjjj5eKznipPLP8sM1HwFTIhjo0/edit#';
 
-  backToMain() {
-    this.props.navigation.goBack();
-  }
+export const LicensesScreen = ({ navigation }) => {
+  const { t } = useTranslation();
 
-  handleBackPress = () => {
-    this.backToMain();
-    return true;
+  const backToMain = () => {
+    navigation.goBack();
   };
 
-  handleTermsOfUsePressed() {
-    Linking.openURL(languages.t('label.terms_of_use_url'));
-  }
+  const handleBackPress = () => {
+    backToMain();
+    return true;
+  };
 
-  componentDidMount() {
-    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
-  }
+  const handleTermsOfUsePressed = () => {
+    Linking.openURL(TERMS_OF_USE_URL);
+  };
 
-  componentWillUnmount() {
-    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
-  }
+  useEffect(() => {
+    BackHandler.addEventListener('hardwareBackPress', handleBackPress);
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
+    };
+  });
 
-  getLicenses() {
-    var result = '<html>';
+  function getLicenses() {
+    let result = '<html>';
     result +=
       '<style>  html, body { font-size: 40px; margin: 0; padding: 0; } </style>';
     result += '<body>';
 
-    for (var i = 0; i < licenses.terms_and_licenses.length; i++) {
-      var element = licenses.terms_and_licenses[i];
+    for (let i = 0; i < licenses.terms_and_licenses.length; i++) {
+      const element = licenses.terms_and_licenses[i];
 
       result += '<H2>' + element.name + '</H2><P>';
       result += element.text.replace(/\n/g, '<br/>');
@@ -62,100 +62,59 @@ class LicensesScreen extends Component {
     return result;
   }
 
-  render() {
-    return (
-      <NavigationBarWrapper
-        title={languages.t('label.legal_page_title')}
-        onBackPress={this.backToMain.bind(this)}>
-        <ScrollView contentContainerStyle={styles.contentContainer}>
-          <View style={{ flex: 4 }}>
-            <WebView
-              originWhitelist={['*']}
-              source={{
-                html: this.getLicenses(),
-              }}
-              style={{
-                marginTop: 15,
-                backgroundColor: Colors.INTRO_WHITE_BG,
-              }}
-            />
-          </View>
-        </ScrollView>
+  return (
+    <NavigationBarWrapper
+      title={t('label.legal_page_title')}
+      onBackPress={backToMain}>
+      <ScrollView contentContainerStyle={styles.contentContainer}>
+        <View style={{ flex: 4 }}>
+          <WebView
+            originWhitelist={['*']}
+            source={{
+              html: getLicenses(),
+            }}
+            style={{
+              marginTop: 15,
+              backgroundColor: Colors.INTRO_WHITE_BG,
+            }}
+          />
+        </View>
+      </ScrollView>
+      <Theme use='charcoal'>
         <TouchableOpacity
-          onPress={this.handleTermsOfUsePressed.bind(this)}
+          onPress={handleTermsOfUsePressed}
           style={styles.termsInfoRow}>
-          <View style={styles.termsInfoContainer}>
-            <Typography
-              style={styles.mainTermsHeader}
-              onPress={() =>
-                Linking.openURL(languages.t('label.terms_of_use_url'))
-              }>
-              {languages.t('label.terms_of_use')}
-            </Typography>
-          </View>
+          <Typography
+            use='headline2'
+            onPress={() => Linking.openURL(TERMS_OF_USE_URL)}>
+            {t('label.terms_of_use')}
+          </Typography>
           <View style={styles.arrowContainer}>
-            <Image source={foreArrow} style={this.arrow} />
+            <Image source={foreArrow} />
           </View>
         </TouchableOpacity>
-      </NavigationBarWrapper>
-    );
-  }
-}
+      </Theme>
+    </NavigationBarWrapper>
+  );
+};
 
 const styles = StyleSheet.create({
-  // Container covers the entire screen
   contentContainer: {
     flexDirection: 'column',
     width: '100%',
     backgroundColor: Colors.INTRO_WHITE_BG,
     paddingHorizontal: 26,
     flex: 1,
   },
-  row: {
-    flexDirection: 'row',
-    color: Colors.PRIMARY_TEXT,
-    alignItems: 'flex-start',
-  },
-  valueName: {
-    color: Colors.VIOLET_TEXT,
-    fontSize: 20,
-    fontFamily: fontFamily.primaryMedium,
-    marginTop: 9,
-  },
-  value: {
-    color: Colors.VIOLET_TEXT,
-    fontSize: 20,
-    fontFamily: fontFamily.primaryMedium,
-    marginTop: 9,
-  },
-  valueSmall: {
-    color: Colors.VIOLET_TEXT,
-    fontSize: 16,
-    fontFamily: fontFamily.primaryMedium,
-    marginTop: 9,
-  },
   termsInfoRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     backgroundColor: Colors.SILVER,
-  },
-  termsInfoContainer: {
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignContent: 'flex-end',
     padding: 15,
   },
-  mainTermsHeader: {
-    textAlign: 'left',
-    color: Colors.MISCHKA,
-    fontSize: 20,
-    fontFamily: fontFamily.primaryBold,
-  },
   arrowContainer: {
     alignSelf: 'center',
     paddingRight: 20,
     paddingLeft: 20,
   },
 });
-
-export default LicensesScreen;
diff --git a/app/views/__tests__/Licenses.spec.js b/app/views/__tests__/Licenses.spec.js
@@ -1,10 +1,12 @@
 import 'react-native';
+
+import { render } from '@testing-library/react-native';
 import React from 'react';
-import {render} from '@testing-library/react-native';
-import Licenses from '../Licenses';
+
+import { LicensesScreen } from '../Licenses';
 
 it('renders correctly', () => {
-  const {asJSON} = render(<Licenses />);
+  const { asJSON } = render(<LicensesScreen />);
 
   expect(asJSON()).toMatchSnapshot();
 });
diff --git a/app/views/__tests__/__snapshots__/Licenses.spec.js.snap b/app/views/__tests__/__snapshots__/Licenses.spec.js.snap
@@ -164,36 +164,25 @@ exports[`renders correctly 1`] = `
           "flexDirection": "row",
           "justifyContent": "space-between",
           "opacity": 1,
+          "padding": 15,
         }
       }
     >
-      <View
+      <Text
         style={
           Object {
-            "alignContent": "flex-end",
-            "flexDirection": "column",
-            "justifyContent": "space-between",
-            "padding": 15,
+            "color": "#FFF",
+            "fontFamily": "IBMPlexSans-Bold",
+            "fontSize": 26,
+            "fontWeight": "bold",
+            "lineHeight": 34,
+            "writingDirection": "ltr",
           }
         }
+        use="headline2"
       >
-        <Text
-          style={
-            Object {
-              "color": "#E5E4E6",
-              "fontFamily": "IBMPlexSans-Bold",
-              "fontSize": 20,
-              "fontWeight": "normal",
-              "lineHeight": 24,
-              "textAlign": "left",
-              "writingDirection": "ltr",
-            }
-          }
-          use="body1"
-        >
-          Terms of use
-        </Text>
-      </View>
+        Terms of use
+      </Text>
       <View
         style={
           Object {