Updated stats and removed Home tab.

package.json

@@ -35,7 +35,6 @@
     "react-native-screens": "~2.2.0",
     "react-native-unimodules": "~0.8.1",
     "react-native-web": "^0.11.7",
-    "react-native-web-swiper": "^2.1.1",
     "zipcodes": "^8.0.0"
   },
   "devDependencies": {

src/api/firebase/index.js

@@ -10,12 +10,15 @@ import config from './config';
 firebase.initializeApp(config);
 // firebase.analytics();
 
+// Uncomment this while running firebase emulator.
+if (process.env.NODE_ENV === 'development') {
+  firebase.firestore().settings({
+    host: 'localhost:8080',
+    ssl: false,
+  });
+}
+
 // Export firebase stuff.
 export const { auth, firestore, storage, functions } = firebase;
 
-// Uncomment this while running firebase emulator.
-// if (process.env.NODE_ENV === 'development') {
-//   firebase.functions().useFunctionsEmulator('http://localhost:5001');
-// }
-
 export default firebase;

src/components/Jobs/index.js

@@ -1,32 +1,48 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Button } from 'react-native-elements';
 import * as WebBrowser from 'expo-web-browser';
 import { AppContext } from '../../context';
 
 const JOBS_URL = 'https://bit.ly/covid19-contact-tracers';
+const TRAINING_URL =
+  'https://www.coursera.org/learn/covid-19-contact-tracing?edocomorp=covid-19-contact-tracing';
 
 const Jobs = () => {
   const { t } = React.useContext(AppContext);
-  useEffect(() => {
-    // openBrowser();
-  }, []);
 
-  const openBrowser = async () => {
+  const openBrowser = async (url) => {
     try {
-      await WebBrowser.openBrowserAsync(JOBS_URL);
+      await WebBrowser.openBrowserAsync(url);
     } catch (error) {
       console.log(error);
     }
   };
 
   return (
     <View style={styles.container}>
+      <View style={{ marginBottom: 20 }}>
+        <Text style={styles.titleStyle}>What is Contact Tracing?</Text>
+
+        <Text>
+          Contact tracing is the process of identification of persons who may
+          have come into contact with an infected person and subsequent
+          collection of further information about these contacts. To learn more
+          about contact tracing, you can complete the COVID-19 Contact Tracing
+          below.
+        </Text>
+
+        <Button
+          title="Free Contact Tracing Course"
+          type="clear"
+          onPress={() => openBrowser(TRAINING_URL)}
+        />
+      </View>
       <Button
         buttonStyle={styles.buttonStyle}
         titleStyle={styles.buttonText}
         title={t('ACTION_JOBS_REGISTER')}
-        onPress={openBrowser}
+        onPress={() => openBrowser(JOBS_URL)}
       />
     </View>
   );
@@ -36,4 +52,9 @@ export default Jobs;
 
 const styles = StyleSheet.create({
   container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  titleStyle: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    marginBottom: 5,
+  },
 });

src/components/Stats/Card.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text, View } from 'react-native';
-import FontAwesome5Icon from '@expo/vector-icons/FontAwesome5';
-import EntypoIcon from '@expo/vector-icons/Entypo';
+
+import {
+  MaterialCommunityIcons,
+  FontAwesome5,
+  Entypo,
+} from '@expo/vector-icons';
 import styles from './Card.style';
 
 const Card = (props) => {
@@ -20,10 +24,10 @@ const Card = (props) => {
     >
       <View style={styles.contentWrapper}>
         <View style={styles.cardIcon}>
-          {icon === 'swap' ? (
-            <EntypoIcon name={icon} size={45} color="#ffffff" />
+          {icon === 'gas-cylinder' ? (
+            <MaterialCommunityIcons name={icon} size={45} color="#ffffff" />
           ) : (
-            <FontAwesome5Icon name={icon} size={45} color="#ffffff" />
+            <FontAwesome5 name={icon} size={45} color="#ffffff" />
           )}
         </View>
         <Text style={styles.cardStatText}>{stat}</Text>

src/components/Stats/Card.style.js

@@ -10,14 +10,12 @@ export default StyleSheet.create({
   contentWrapper: {
     marginHorizontal: 10,
     paddingVertical: 10,
-    textAlign: 'center',
     alignItems: 'center',
     justifyContent: 'center',
   },
   cardIcon: {
     paddingVertical: 10,
     marginTop: 10,
-    textAlign: 'center',
     alignSelf: 'center',
   },
   cardTitleText: {

src/components/Stats/Grid.js

@@ -129,6 +129,8 @@ class Grid extends React.Component {
       <FlatList
         data={rows}
         ListHeaderComponent={header}
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
         renderItem={({ item, index }) =>
           this.renderRow({
             rowItems: item,

src/components/Stats/index.js

@@ -1,44 +1,95 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, Text, View, Dimensions } from 'react-native';
-import { firestore } from '../../api/firebase';
+import { isEmpty } from 'lodash';
 
 import Grid from './Grid';
 import Card from './Card';
 import Loading from '../Loading';
 
 // Context.
 import { AppContext } from '../../context';
+import useCurrentLocation from '../../hooks/useCurrentLocation';
 
 const Stats = () => {
+  const [deviceLocation, setDeviceLocation] = useState({});
   const [statsData, setStatsData] = useState([]);
   const [dataAvailability, setDataAvailability] = useState(true);
 
-  const { locale } = React.useContext(AppContext);
+  const { currentLocation } = useCurrentLocation();
+  const { t } = React.useContext(AppContext);
 
   useEffect(() => {
-    const unsubscribe = firestore()
-      .collection('stats/app-stat-cards/data')
-      .onSnapshot(handleOnSnapshot, handleError);
+    const getData = async () => {
+      try {
+        const location = await currentLocation();
 
-    // Stop listening for updates when no longer required
-    return () => unsubscribe();
-  }, []);
+        console.log(location);
 
-  const handleOnSnapshot = (snapshot) => {
-    if (!snapshot.empty) {
-      let list = [];
-      snapshot.forEach((doc) => {
-        if (doc.exists) list = [...list, { id: doc.id, ...doc.data() }];
-      });
+        setDeviceLocation(location);
+        if (!isEmpty(location) && location.state) {
+          const state = location.state.toLowerCase();
+          if (!state) return;
+          const response = await fetch(
+            `https://covidtracking.com/api/v1/states/${state}/current.json`
+          );
+          const data = await response.json();
+          const {
+            positive,
+            death,
+            hospitalizedCurrently,
+            recovered,
+            inIcuCurrently,
+            onVentilatorCurrently,
+          } = data;
+          const stats = [
+            {
+              label: t('STATS_LABEL_POSITIVE'),
+              stat: positive || 0,
+              cardColor: '#9c27b0',
+              icon: 'users',
+            },
+            {
+              label: t('STATS_LABEL_DEATH'),
+              stat: death || 0,
+              cardColor: '#000000',
+              icon: 'user',
+            },
+            {
+              label: t('STATS_LABEL_HOSPITALIZED'),
+              stat: hospitalizedCurrently || 0,
+              cardColor: '#2196f3',
+              icon: 'hospital',
+            },
+            {
+              label: t('STATS_LABEL_RECOVERED'),
+              stat: recovered || 0,
+              cardColor: '#4caf50',
+              icon: 'heartbeat',
+            },
+            {
+              label: t('STATS_LABEL_ICU'),
+              stat: inIcuCurrently || 0,
+              cardColor: '#f44336',
+              icon: 'bed',
+            },
+            {
+              label: t('STATS_LABEL_VENTILATOR'),
+              stat: onVentilatorCurrently || 0,
+              cardColor: '#fdd835',
+              icon: 'gas-cylinder',
+            },
+          ];
 
-      setStatsData(list);
-    }
-  };
+          setStatsData(stats);
+        }
+      } catch (error) {
+        console.log(error);
+        dataAvailability(false);
+      }
+    };
 
-  const handleError = (error) => {
-    console.log(error.message);
-    setDataAvailability(false);
-  };
+    getData();
+  }, []);
 
   return (
     <View style={styles.container}>
@@ -48,18 +99,25 @@ const Stats = () => {
         ) : (
           <View style={styles.gridWrapper}>
             <Grid
+              header={
+                !isEmpty(deviceLocation) && (
+                  <Text
+                    style={styles.locationText}
+                  >{`${deviceLocation.city}, ${deviceLocation.state}`}</Text>
+                )
+              }
               itemDimension={150}
               items={statsData}
               numofLoadingItems={6}
               spacing={10}
               isLoading={statsData.length < 1 ? true : false}
-              renderItem={(item) => {
+              renderItem={({ item }) => {
                 return (
                   <Card
-                    title={item.item.text[locale]}
-                    stat={item.item.stat}
-                    icon={item.item.icon}
-                    cardColor={item.item.cardColor}
+                    title={item.label}
+                    stat={item.stat}
+                    icon={item.icon}
+                    cardColor={item.cardColor}
                   />
                 );
               }}
@@ -93,4 +151,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 14,
     height: Dimensions.get('window').height - 50,
   },
+  locationText: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 20,
+    paddingVertical: 10,
+  },
 });

src/hooks/useCurrentLocation.js

@@ -0,0 +1,34 @@
+import * as Location from 'expo-location';
+import ZIPCodes from 'zipcodes';
+
+const useCurrentLocation = () => {
+  const currentLocation = async () => {
+    let { status } = await Location.requestPermissionsAsync();
+    if (status !== 'granted') {
+      onError('Permission to access location was denied');
+      currentLocation();
+    }
+
+    try {
+      const location = await Location.getCurrentPositionAsync({});
+
+      const coords = location.coords || {};
+
+      if (coords && coords.latitude && coords.longitude) {
+        const address = ZIPCodes.lookupByCoords(
+          coords.latitude,
+          coords.longitude
+        );
+
+        return { ...address, ...coords };
+      }
+    } catch (error) {
+      console.log(error);
+      return null;
+    }
+  };
+
+  return { currentLocation };
+};
+
+export default useCurrentLocation;

src/localization/amh/translation.json

@@ -27,5 +27,11 @@
     "TITLE_INSTRUCTION": "Instruction",
     "INSTRUCTION": "Hi, we are here to guide you through the Coronavirus Self-Checker.\r\n\r\nIf you are experiencing a life-threatening emergency, please call 911 immediately.\r\n\r\nThis app does not replace the judgment of healthcare professionals or the performance of any clinical assessment.\r\n\r\nTo provide information on the right level of care, we are going to ask you a series of questions.",
     "ALERT_QUESTION_MISSING": "Next question is missing",
-    "ALERT_MISSING_CHOICE": "Please select an option to continue"
+    "ALERT_MISSING_CHOICE": "Please select an option to continue",
+    "STATS_LABEL_POSITIVE": "Positive",
+    "STATS_LABEL_RECOVERED": "Recovered",
+    "STATS_LABEL_HOSPITALIZED": "Hospitalized",
+    "STATS_LABEL_DEATH": "Death",
+    "STATS_LABEL_ICU": "ICU",
+    "STATS_LABEL_VENTILATOR": "Ventilator"
 }

src/localization/eng/translation.json

@@ -27,5 +27,11 @@
     "TITLE_INSTRUCTION": "Instruction",
     "INSTRUCTION": "Hi, we are here to guide you through the Coronavirus Self-Checker.\r\n\r\nIf you are experiencing a life-threatening emergency, please call 911 immediately.\r\n\r\nThis app does not replace the judgment of healthcare professionals or the performance of any clinical assessment.\r\n\r\nTo provide information on the right level of care, we are going to ask you a series of questions.",
     "ALERT_QUESTION_MISSING": "Next question is missing",
-    "ALERT_MISSING_CHOICE": "Please select an option to continue"
+    "ALERT_MISSING_CHOICE": "Please select an option to continue",
+    "STATS_LABEL_POSITIVE": "Positive",
+    "STATS_LABEL_RECOVERED": "Recovered",
+    "STATS_LABEL_HOSPITALIZED": "Hospitalized",
+    "STATS_LABEL_DEATH": "Death",
+    "STATS_LABEL_ICU": "ICU",
+    "STATS_LABEL_VENTILATOR": "Ventilator"
 }

src/localization/orm/translation.json

@@ -27,5 +27,11 @@
     "TITLE_INSTRUCTION": "Instruction",
     "INSTRUCTION": "Hi, we are here to guide you through the Coronavirus Self-Checker.\r\n\r\nIf you are experiencing a life-threatening emergency, please call 911 immediately.\r\n\r\nThis app does not replace the judgment of healthcare professionals or the performance of any clinical assessment.\r\n\r\nTo provide information on the right level of care, we are going to ask you a series of questions.",
     "ALERT_QUESTION_MISSING": "Next question is missing",
-    "ALERT_MISSING_CHOICE": "Please select an option to continue"
+    "ALERT_MISSING_CHOICE": "Please select an option to continue",
+    "STATS_LABEL_POSITIVE": "Positive",
+    "STATS_LABEL_RECOVERED": "Recovered",
+    "STATS_LABEL_HOSPITALIZED": "Hospitalized",
+    "STATS_LABEL_DEATH": "Death",
+    "STATS_LABEL_ICU": "ICU",
+    "STATS_LABEL_VENTILATOR": "Ventilator"
 }

src/localization/tig/translation.json

@@ -27,5 +27,11 @@
     "TITLE_INSTRUCTION": "Instruction",
     "INSTRUCTION": "Hi, we are here to guide you through the Coronavirus Self-Checker.\r\n\r\nIf you are experiencing a life-threatening emergency, please call 911 immediately.\r\n\r\nThis app does not replace the judgment of healthcare professionals or the performance of any clinical assessment.\r\n\r\nTo provide information on the right level of care, we are going to ask you a series of questions.",
     "ALERT_QUESTION_MISSING": "Next question is missing",
-    "ALERT_MISSING_CHOICE": "Please select an option to continue"
+    "ALERT_MISSING_CHOICE": "Please select an option to continue",
+    "STATS_LABEL_POSITIVE": "Positive",
+    "STATS_LABEL_RECOVERED": "Recovered",
+    "STATS_LABEL_HOSPITALIZED": "Hospitalized",
+    "STATS_LABEL_DEATH": "Death",
+    "STATS_LABEL_ICU": "ICU",
+    "STATS_LABEL_VENTILATOR": "Ventilator"
 }