Added feedback for trace overlap if it comes back with no results (Pa…

…th-Check#190) See issue Path-Check#188 - I'd advise this is merged ASAP since the current build feels broken from a user perspective.
jgrainger-745 · Apr 1, 2020 · 700d0bf · 700d0bf
1 parent b09bd31
commit 700d0bf
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 26 deletions.
diff --git a/app/locales/en/index.js b/app/locales/en/index.js
@@ -1,9 +1,9 @@
 import intro from './intro.json';
 import locationTracking from './locationTracking.json';
-import importFile from './import.json'
-import exportFile from './exportscreen.json'
+import importFile from './import.json';
+import exportFile from './exportscreen.json';
 import licensesFile from './licensesscreen.json';
-import overlapFile from './overlap.json'
+import overlapFile from './overlap.json';
 
 export default {
     ...intro,

diff --git a/app/locales/en/overlap.json b/app/locales/en/overlap.json
@@ -1,4 +1,7 @@
 {
-    "overlap_para_1":"This map shows where your private location trail overlaps with public data from a variety of sources, including official reports from WHO, Ministries of Health, and Chinese local, provincial, and national health authorities. If additional data are available from reliable online reports, they are included.",
-    "show_overlap": "SHOW ME TRACE OVERLAP",
+    "overlap_title": "Check Overlap",
+    "overlap_para_1": "This map shows where your private location trail overlaps with public data from a variety of sources, including official reports from WHO, Ministries of Health, and Chinese local, provincial, and national health authorities. If additional data are available from reliable online reports, they are included.",
+    "show_overlap": "Show Me Trace Overlap",
+    "overlap_no_results_button_label": "No Trace Overlap Found",
+    "overlap_found_button_label": "Trace Overlap Found"
 }
diff --git a/app/views/LocationTracking.js b/app/views/LocationTracking.js
@@ -75,8 +75,8 @@ class LocationTracking extends Component {
   }
 
   overlap() {
-        this.props.navigation.navigate('OverlapScreen', {})
-    }
+    this.props.navigation.navigate('OverlapScreen', {});
+  }
 
   willParticipate = () => {
     SetStoreData('PARTICIPATE', 'true').then(() => LocationServices.start());
@@ -175,8 +175,12 @@ class LocationTracking extends Component {
                       {languages.t('label.stop_logging')}
                     </Text>
                   </TouchableOpacity>
-                  <TouchableOpacity onPress={() => this.overlap()} style={styles.startLoggingButtonTouchable} >
-                    <Text style={styles.startLoggingButtonText}>{languages.t('label.overlap')}</Text>
+                  <TouchableOpacity
+                    onPress={() => this.overlap()}
+                    style={styles.startLoggingButtonTouchable}>
+                    <Text style={styles.startLoggingButtonText}>
+                      {languages.t('label.overlap')}
+                    </Text>
                   </TouchableOpacity>
                 </>
               ) : (

diff --git a/app/views/Overlap.js b/app/views/Overlap.js
@@ -37,7 +37,9 @@ const width = Dimensions.get('window').width;
 const base64 = RNFetchBlob.base64
 
 const public_data = "https://docs.google.com/spreadsheets/d/1itaohdPiAeniCXNlntNztZ_oRvjh0HsGuJXUJWET008/export?format=csv"
-const show_button_text = "Show Me Trace Overlap";
+const show_button_text = languages.t('label.show_overlap');
+const overlap_true_button_text = languages.t('label.overlap_found_button_label');
+const no_overlap_button_text = languages.t('label.overlap_no_results_button_label');
 const INITIAL_REGION = {
     latitude: 36.56,
     longitude: 20.39,
@@ -151,8 +153,7 @@ class OverlapScreen extends Component {
     downloadAndPlot = async () => {
         // Downloads the file on the disk and loads it into memory
         try {
-            this.setState({'showButton': {'disabled': true,
-                                          'text': 'Loading Public Trace'}});
+            this.setState({'showButton': {'disabled': true, 'text': 'Loading Public Trace'}});
             RNFetchBlob
               .config({
                 // add this option that makes response data to be stored as a file,
@@ -176,8 +177,15 @@ class OverlapScreen extends Component {
                             console.log(Object.keys(parsedRecords).length);
                             this.plotCircles(parsedRecords)
                             .then(() => {
-                                this.setState({'showButton': {'disabled': false,
-                                                'text': show_button_text}});
+                                // if no overlap, alert user via button text
+                                // this is a temporary fix, make it more robust later
+                                if (Object.keys(parsedRecords).length !== 0) {
+                                    this.setState({'showButton': {'disabled': false,
+                                        'text': overlap_true_button_text}});
+                                } else {
+                                    this.setState({'showButton': {'disabled': false,
+                                        'text': no_overlap_button_text}});
+                                }
                             });
                         });
                       })
@@ -274,7 +282,7 @@ class OverlapScreen extends Component {
                     <TouchableOpacity style={styles.backArrowTouchable} onPress={() => this.backToMain()}>
                          <Image style={styles.backArrow} source={backArrow} />
                     </TouchableOpacity>
-                    <Text style={styles.headerTitle}>{languages.t('label.overlap')}</Text>
+                    <Text style={styles.headerTitle}>{languages.t('label.overlap_title')}</Text>
                 </View>
                     <MapView
                         provider={PROVIDER_GOOGLE}
@@ -302,6 +310,7 @@ class OverlapScreen extends Component {
                 <View style={styles.main}>
                     <TouchableOpacity style={styles.buttonTouchable} onPress={() => this.downloadAndPlot()}
                      disabled={this.state.showButton.disabled}>
+                        {/* If no overlap found, change button text to say so. Temporary solution, replace with something more robust */}
                         <Text style={styles.buttonText}>{languages.t(this.state.showButton.text)}</Text>
                     </TouchableOpacity>
                     <Text style={styles.sectionDescription}>{languages.t('label.overlap_para_1')}</Text>
@@ -321,11 +330,8 @@ const styles = StyleSheet.create({
         backgroundColor: colors.WHITE
     },
     headerTitle: {
-        textAlign: 'center',
-        fontWeight: "bold",
-        fontSize: 38,
-
-        padding: 0
+        fontSize: 24,
+        fontFamily:'OpenSans-Bold',
     },
     subHeaderTitle: {
         textAlign: 'center',
@@ -392,10 +398,6 @@ const styles = StyleSheet.create({
         height: 18, 
         width: 18.48
     },
-    headerTitle:{
-        fontSize: 24,
-        fontFamily:'OpenSans-Bold'
-    },
     sectionDescription: {
         fontSize: 16,
         lineHeight: 24,

diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "eslint": "^6.8.0",
     "jest": "^25.1.0",
     "metro-react-native-babel-preset": "^0.58.0",
+    "prettier": "1.17.0",
     "react-native-version": "^4.0.0",
     "react-test-renderer": "16.9.0"
   },