Use the useTranslation hook in all functional components (#595)

Path-Check · Apr 21, 2020 · db8607c · db8607c
1 parent 6852c9d
commit db8607c
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 93 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -48,7 +48,7 @@ module.exports = {
     strict: [2, 'global'], // require or disallow strict mode directives
     'react-native/no-color-literals': 1, // Detect StyleSheet rules and inline styles containing color literals instead of variables
     'react-native/no-inline-styles': 0, // For keeping styles away from the logic, we can switch it to 1 in future
-    'react-native/no-raw-text': 1, // This is to make sure everything is translated in the app
+    'react-native/no-raw-text': ['error', { skip: ['Trans'] }], // This is to make sure everything is translated in the app
     'react-native/no-unused-styles': 1, // Detect StyleSheet rules which are not used in your React components
     'react/jsx-boolean-value': 2, // Enforce boolean attributes notation in JSX (fixable)
     'react/jsx-key': 2, // Report missing key props in iterators/collection literals

diff --git a/app/Entry.js b/app/Entry.js
@@ -5,11 +5,10 @@ import {
 } from '@react-navigation/stack';
 import React, { Component } from 'react';
 
-import { PARTICIPATE } from './constants/storage';
 import { GetStoreData } from './helpers/General';
 import AboutScreen from './views/About';
 import ChooseProviderScreen from './views/ChooseProvider';
-import ExportScreen from './views/Export';
+import { ExportScreen } from './views/Export';
 import { ExposureHistoryScreen } from './views/ExposureHistory/ExposureHistory';
 import ImportScreen from './views/Import';
 import LicencesScreen from './views/Licenses';

diff --git a/app/views/Export.js b/app/views/Export.js
@@ -1,13 +1,12 @@
-import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   BackHandler,
   SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -19,38 +18,21 @@ import RNFetchBlob from 'rn-fetch-blob';
 
 import close from './../assets/svgs/close';
 import exportIcon from './../assets/svgs/export';
-import languages from './../locales/languages';
 import { isPlatformiOS } from './../Util';
 import { Typography } from '../components/Typography';
 import Colors from '../constants/colors';
-// import colors from '../constants/colors';
 import fontFamily from '../constants/fonts';
 import { LocationData } from '../services/LocationService';
 
 const base64 = RNFetchBlob.base64;
 
-function ExportScreen(props) {
-  const { shareButtonDisabled } = props;
-  const [pointStats, setPointStats] = useState(false);
-  const [buttonDisabled, setButtonDisabled] = useState(shareButtonDisabled);
-  const { navigate } = useNavigation();
-
+export const ExportScreen = ({ navigation }) => {
+  const { t } = useTranslation();
   function handleBackPress() {
-    props.navigation.goBack();
+    navigation.goBack();
     return true;
   }
 
-  useFocusEffect(
-    React.useCallback(() => {
-      const locationData = new LocationData();
-      locationData.getPointStats().then(pointStats => {
-        setPointStats(pointStats);
-        setButtonDisabled(pointStats.pointCount === 0);
-      });
-      return () => {};
-    }, []),
-  );
-
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', handleBackPress);
 
@@ -60,7 +42,7 @@ function ExportScreen(props) {
   });
 
   function backToMain() {
-    props.navigation.goBack();
+    navigation.goBack();
   }
 
   async function onShare() {
@@ -69,15 +51,15 @@ function ExportScreen(props) {
       let nowUTC = new Date().toISOString();
       let unixtimeUTC = Date.parse(nowUTC);
 
-      var options = {};
-      var jsonData = JSON.stringify(locationData);
+      let options = {};
+      let jsonData = JSON.stringify(locationData);
       const title = 'COVIDSafePaths.json';
       const filename = unixtimeUTC + '.json';
       const message = 'Here is my location log from COVID Safe Paths.';
       if (isPlatformiOS()) {
-        var url = RNFS.DocumentDirectoryPath + '/' + filename;
+        const url = RNFS.DocumentDirectoryPath + '/' + filename;
         await RNFS.writeFile(url, jsonData, 'utf8')
-          .then(success => {
+          .then(() => {
             options = {
               activityItemSources: [
                 {
@@ -115,6 +97,7 @@ function ExportScreen(props) {
           console.log(err.message, err.code);
         });
       if (isPlatformiOS()) {
+        // eslint-disable-next-line no-undef
         await RNFS.unlink(url);
       }
     } catch (error) {
@@ -147,18 +130,18 @@ function ExportScreen(props) {
           <ScrollView contentContainerStyle={styles.contentContainer}>
             <View style={styles.main}>
               <Typography style={styles.exportSectionTitles}>
-                {languages.t('label.tested_positive_title')}
+                {t('label.tested_positive_title')}
               </Typography>
               <Typography style={styles.exportSectionPara}>
-                {languages.t('label.export_para_1')}
+                {t('label.export_para_1')}
               </Typography>
               <Typography style={styles.exportSectionPara}>
-                {languages.t('label.export_para_2')}
+                {t('label.export_para_2')}
               </Typography>
 
               <TouchableOpacity style={styles.exportButton} onPress={onShare}>
                 <Typography style={styles.exportButtonText}>
-                  {languages.t('label.share_location_data')}
+                  {t('label.share_location_data')}
                 </Typography>
                 <SvgXml style={styles.exportIcon} xml={exportIcon} />
               </TouchableOpacity>
@@ -168,7 +151,7 @@ function ExportScreen(props) {
       </SafeAreaView>
     </>
   );
-}
+};
 
 const styles = StyleSheet.create({
   // Container covers the entire screen
@@ -252,5 +235,3 @@ ExportScreen.propTypes = {
 ExportScreen.defaultProps = {
   shareButtonDisabled: true,
 };
-
-export default ExportScreen;
diff --git a/app/views/Settings.js b/app/views/Settings.js
@@ -1,5 +1,6 @@
 import styled, { css } from '@emotion/native';
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { BackHandler, ScrollView, View } from 'react-native';
 
 import checkmarkIcon from '../assets/svgs/checkmarkIcon';
@@ -11,7 +12,7 @@ import NavigationBarWrapper from '../components/NavigationBarWrapper';
 import Colors from '../constants/colors';
 import { PARTICIPATE } from '../constants/storage';
 import { GetStoreData, SetStoreData } from '../helpers/General';
-import languages, {
+import {
   LOCALE_LIST,
   getUserLocaleOverride,
   setUserLocaleOverride,
@@ -22,6 +23,12 @@ import { GoogleMapsImport } from './Settings/GoogleMapsImport';
 import { SettingsItem as Item } from './Settings/SettingsItem';
 
 export const SettingsScreen = ({ navigation }) => {
+  const { t } = useTranslation();
+  const [isLogging, setIsLogging] = useState(undefined);
+  const [userLocale, setUserLocale] = useState(
+    supportedDeviceLanguageOrEnglish(),
+  );
+
   const backToMain = () => {
     navigation.goBack();
   };
@@ -31,12 +38,6 @@ export const SettingsScreen = ({ navigation }) => {
     return true;
   };
 
-  const [isLogging, setIsLogging] = useState(undefined);
-
-  const [userLocale, setUserLocale] = useState(
-    supportedDeviceLanguageOrEnglish(),
-  );
-
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', handleBackPress);
 
@@ -75,15 +76,15 @@ export const SettingsScreen = ({ navigation }) => {
 
   return (
     <NavigationBarWrapper
-      title={languages.t('label.settings_title')}
+      title={t('label.settings_title')}
       onBackPress={backToMain}>
       <ScrollView>
         <Section>
           <Item
             label={
               isLogging
-                ? languages.t('label.logging_active')
-                : languages.t('label.logging_inactive')
+                ? t('label.logging_active')
+                : t('label.logging_inactive')
             }
             icon={isLogging ? checkmarkIcon : xmarkIcon}
             onPress={locationToggleButtonPressed}
@@ -95,7 +96,7 @@ export const SettingsScreen = ({ navigation }) => {
             {({ label, openPicker }) => (
               <Item
                 last
-                label={label || languages.t('label.home_unknown_header')}
+                label={label || t('label.home_unknown_header')}
                 icon={languagesIcon}
                 onPress={openPicker}
               />
@@ -105,23 +106,23 @@ export const SettingsScreen = ({ navigation }) => {
 
         <Section>
           <Item
-            label={languages.t('label.choose_provider_title')}
-            description={languages.t('label.choose_provider_subtitle')}
+            label={t('label.choose_provider_title')}
+            description={t('label.choose_provider_subtitle')}
             onPress={() => navigation.navigate('ChooseProviderScreen')}
           />
           <Item
-            label={languages.t('label.news_title')}
-            description={languages.t('label.news_subtitle')}
+            label={t('label.news_title')}
+            description={t('label.news_subtitle')}
             onPress={() => navigation.navigate('NewsScreen')}
           />
           <Item
-            label={languages.t('label.event_history_title')}
-            description={languages.t('label.event_history_subtitle')}
+            label={t('label.event_history_title')}
+            description={t('label.event_history_subtitle')}
             onPress={() => navigation.navigate('ExposureHistoryScreen')}
           />
           <Item
-            label={languages.t('label.tested_positive_title')}
-            description={languages.t('label.tested_positive_subtitle')}
+            label={t('label.tested_positive_title')}
+            description={t('label.tested_positive_subtitle')}
             onPress={() => navigation.navigate('ExportScreen')}
             last
           />
@@ -133,11 +134,11 @@ export const SettingsScreen = ({ navigation }) => {
 
         <Section last>
           <Item
-            label={languages.t('label.about_title')}
+            label={t('label.about_title')}
             onPress={() => navigation.navigate('AboutScreen')}
           />
           <Item
-            label={languages.t('label.legal_page_title')}
+            label={t('label.legal_page_title')}
             onPress={() => navigation.navigate('LicensesScreen')}
             last
           />

diff --git a/app/views/Settings/GoogleMapsImport.js b/app/views/Settings/GoogleMapsImport.js
@@ -1,14 +1,16 @@
 import styled from '@emotion/native';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { SvgXml } from 'react-native-svg';
 
 import googleMapsIcon from '../../assets/svgs/google-maps-logo';
 import ButtonWrapper from '../../components/ButtonWrapper';
 import { Typography } from '../../components/Typography';
 import Colors from '../../constants/colors';
-import languages from '../../locales/languages';
 
 export const GoogleMapsImport = ({ navigation }) => {
+  const { t } = useTranslation();
+
   const importPressed = () => {
     navigation.navigate('ImportScreen');
   };
@@ -17,17 +19,15 @@ export const GoogleMapsImport = ({ navigation }) => {
     <>
       <TitleRow>
         <SvgXml xml={googleMapsIcon} />
-        <Title use='body1'>{languages.t('label.maps_import_title')}</Title>
+        <Title use='body1'>{t('label.maps_import_title')}</Title>
       </TitleRow>
 
       <ParagraphContainer>
-        <Typography use='body2'>
-          {languages.t('label.maps_import_text')}
-        </Typography>
+        <Typography use='body2'>{t('label.maps_import_text')}</Typography>
       </ParagraphContainer>
 
       <ButtonWrapper
-        title={languages.t('label.maps_import_button_text')}
+        title={t('label.maps_import_button_text')}
         onPress={importPressed}
         buttonColor={Colors.VIOLET}
         bgColor={Colors.WHITE}
@@ -37,7 +37,7 @@ export const GoogleMapsImport = ({ navigation }) => {
 
       <ParagraphContainer>
         <Typography use='body3' secondary monospace>
-          {languages.t('label.maps_import_disclaimer')}
+          {t('label.maps_import_disclaimer')}
         </Typography>
       </ParagraphContainer>
     </>

diff --git a/app/views/__tests__/Export.spec.js b/app/views/__tests__/Export.spec.js
@@ -1,13 +1,11 @@
-import { TouchableOpacity } from 'react-native';
+import { render } from '@testing-library/react-native';
 import React from 'react';
-import renderer, { create } from 'react-test-renderer';
-import Export from '../Export';
 
-describe('<Export />', () => {
+import { ExportScreen } from '../Export';
+
+describe('<ExportScreen />', () => {
   it('renders correctly', () => {
-    const tree = renderer
-      .create(<Export />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+    const { asJSON } = render(<ExportScreen />);
+    expect(asJSON()).toMatchSnapshot();
   });
 });