From b648167c0fc05c4cc5b87d0d509503fb48dcca78 Mon Sep 17 00:00:00 2001
From: Stephen McMurtry <smcmurtry@gmail.com>
Date: Mon, 3 May 2021 12:21:10 -0600
Subject: [PATCH] Moving the ExposureHistory to its own navigator and folder
 (#1554)

* move the recent exposures screen to its own folder

* split out NoExposureHistoryScreen

* put the exposure history pages in their own navigation stack

* changed toolbar

* reverted change for testing

* renamed Toolbar2
---
 .../{Toolbar2.tsx => ToolbarWithClose.tsx}    |  10 +-
 src/components/index.ts                       |   2 +-
 src/navigation/MainNavigator.tsx              |  21 +++-
 .../ExposureHistoryScreen.tsx                 | 108 ++----------------
 .../RecentExposureView.tsx                    |   6 +-
 .../exposureHistory/views/ExposureList.tsx    |  78 +++++++++++++
 .../views/NoExposureHistoryScreen.tsx         |  24 ++++
 src/screens/menu/MenuScreen.tsx               |   2 +-
 .../qr/components/BaseQRCodeScreen.tsx        |   8 +-
 src/screens/qr/views/QRCodeScanner.tsx        |   9 +-
 10 files changed, 147 insertions(+), 121 deletions(-)
 rename src/components/{Toolbar2.tsx => ToolbarWithClose.tsx} (83%)
 rename src/screens/{qr => exposureHistory}/ExposureHistoryScreen.tsx (56%)
 rename src/screens/{exposures => exposureHistory}/RecentExposureView.tsx (84%)
 create mode 100644 src/screens/exposureHistory/views/ExposureList.tsx
 create mode 100644 src/screens/exposureHistory/views/NoExposureHistoryScreen.tsx

diff --git a/src/components/Toolbar2.tsx b/src/components/ToolbarWithClose.tsx
similarity index 83%
rename from src/components/Toolbar2.tsx
rename to src/components/ToolbarWithClose.tsx
index 18741ea72..2e17f03f4 100644
--- a/src/components/Toolbar2.tsx
+++ b/src/components/ToolbarWithClose.tsx
@@ -5,13 +5,13 @@ import {useNavigation} from '@react-navigation/native';
 import {useI18n} from 'locale';
 
 export interface ToolbarProps2 {
-  onIconClicked(): void;
-  navText?: string;
+  onClose(): void;
+  closeText?: string;
   showBackButton?: boolean;
   useWhiteText?: boolean;
 }
 
-export const Toolbar2 = ({navText, onIconClicked, showBackButton, useWhiteText = false}: ToolbarProps2) => {
+export const ToolbarWithClose = ({closeText, onClose, showBackButton = true, useWhiteText = false}: ToolbarProps2) => {
   const navigation = useNavigation();
   const i18n = useI18n();
   const onBack = useCallback(() => navigation.goBack(), [navigation]);
@@ -31,9 +31,9 @@ export const Toolbar2 = ({navText, onIconClicked, showBackButton, useWhiteText =
       <Box style={styles.right}>
         <Button
           testID="toolbarCloseButton"
-          text={navText}
+          text={closeText}
           variant={useWhiteText ? 'whiteText' : 'text'}
-          onPress={onIconClicked}
+          onPress={onClose}
         />
       </Box>
     </Box>
diff --git a/src/components/index.ts b/src/components/index.ts
index 694872dcf..65f61f448 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -18,7 +18,7 @@ export * from './Text';
 export * from './TextInput';
 export * from './TextMultiline';
 export * from './Toolbar';
-export * from './Toolbar2';
+export * from './ToolbarWithClose';
 export * from './TouchableIcon';
 export * from './LanguageToggle';
 export * from './ErrorBox';
diff --git a/src/navigation/MainNavigator.tsx b/src/navigation/MainNavigator.tsx
index ed12172a3..9a8ddf740 100644
--- a/src/navigation/MainNavigator.tsx
+++ b/src/navigation/MainNavigator.tsx
@@ -29,11 +29,11 @@ import {FrameworkUnavailableView} from 'screens/home/views/FrameworkUnavailableV
 import {CheckInSuccessfulScreen} from 'screens/qr/CheckInSuccessfulScreen';
 import {InvalidQRCodeScreen} from 'screens/qr/InvalidQRCodeScreen';
 import {CheckInHistoryScreen} from 'screens/qr/CheckInHistoryScreen';
-import {ExposureHistoryScreen} from 'screens/qr/ExposureHistoryScreen';
+import {ExposureHistoryScreen} from 'screens/exposureHistory/ExposureHistoryScreen';
 import {QRCodeIntroScreen} from 'screens/qr/QRCodeIntroScreen';
 import {MenuScreen} from 'screens/menu/MenuScreen';
 import {ClearOutbreakExposureScreen} from 'screens/home/views/ClearOutbreakExposureView';
-import {RecentExposureScreen} from 'screens/exposures/RecentExposureView';
+import {RecentExposureScreen} from 'screens/exposureHistory/RecentExposureView';
 
 import {FormContext, FormContextDefaults} from '../shared/FormContext';
 
@@ -167,6 +167,20 @@ const QRCodeNavigator = () => {
   );
 };
 
+const ExposureHistoryStack = createStackNavigator();
+const ExposureHistoryNavigator = () => {
+  const {hasViewedQrInstructions} = useCachedStorage();
+  return (
+    <ExposureHistoryStack.Navigator
+      screenOptions={{headerShown: false}}
+      initialRouteName={hasViewedQrInstructions ? 'QRCodeReaderScreen' : 'QRCodeIntroScreen'}
+    >
+      <ExposureHistoryStack.Screen name="ExposureHistoryScreen" component={ExposureHistoryScreenWithNavBar} />
+      <ExposureHistoryStack.Screen name="RecentExposureScreen" component={RecentExposureScreenWithNavBar} />
+    </ExposureHistoryStack.Navigator>
+  );
+};
+
 const forFade = ({current}: {current: any}) => ({
   cardStyle: {
     opacity: current.progress,
@@ -204,8 +218,7 @@ const MainNavigator = () => {
       <MainStack.Screen name="FrameworkUnavailableScreen" component={FrameworkUnavailableView} />
       <MainStack.Screen name="QRCodeFlow" component={QRCodeNavigator} />
       <MainStack.Screen name="CheckInHistoryScreen" component={CheckInHistoryScreenWithNavBar} />
-      <MainStack.Screen name="ExposureHistoryScreen" component={ExposureHistoryScreenWithNavBar} />
-      <MainStack.Screen name="RecentExposureScreen" component={RecentExposureScreenWithNavBar} />
+      <MainStack.Screen name="ExposureHistory" component={ExposureHistoryNavigator} />
       <MainStack.Screen name="Menu" component={MenuScreenWithNavBar} />
       <MainStack.Screen name="ClearOutbreakExposure" component={ClearOutbreakExposureScreenWithNavBar} />
     </MainStack.Navigator>
diff --git a/src/screens/qr/ExposureHistoryScreen.tsx b/src/screens/exposureHistory/ExposureHistoryScreen.tsx
similarity index 56%
rename from src/screens/qr/ExposureHistoryScreen.tsx
rename to src/screens/exposureHistory/ExposureHistoryScreen.tsx
index 4fd4d3d0f..3e496dcd6 100644
--- a/src/screens/qr/ExposureHistoryScreen.tsx
+++ b/src/screens/exposureHistory/ExposureHistoryScreen.tsx
@@ -1,15 +1,17 @@
 import React, {useCallback} from 'react';
-import {StyleSheet, TouchableOpacity, Alert} from 'react-native';
+import {StyleSheet, Alert} from 'react-native';
 import {useI18n, I18n} from 'locale';
 import {CombinedExposureHistoryData, getCurrentOutbreakHistory, OutbreakHistoryItem, OutbreakSeverity} from 'shared/qr';
 import {useNavigation} from '@react-navigation/native';
-import {Box, Text, Icon, Toolbar, Button} from 'components';
+import {Box, Text, ToolbarWithClose, Button} from 'components';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {ScrollView} from 'react-native-gesture-handler';
 import {useOutbreakService} from 'services/OutbreakService';
-import {formatExposedDate} from 'shared/date-fns';
 import {useExposureHistory, useClearExposedStatus} from 'services/ExposureNotificationService';
 
+import {ExposureList} from './views/ExposureList';
+import {NoExposureHistoryScreen} from './views/NoExposureHistoryScreen';
+
 const severityText = ({severity, i18n}: {severity: OutbreakSeverity; i18n: I18n}) => {
   switch (severity) {
     case OutbreakSeverity.GetTested:
@@ -55,63 +57,6 @@ const toProximityExposureHistoryData = ({
   });
 };
 
-const ExposureList = ({exposureHistoryData}: {exposureHistoryData: CombinedExposureHistoryData[]}) => {
-  const i18n = useI18n();
-  const dateLocale = i18n.locale === 'fr' ? 'fr-CA' : 'en-CA';
-  const navigation = useNavigation();
-  const onDetails = useCallback(
-    ({id, exposureType}) => navigation.navigate('RecentExposureScreen', {id, exposureType}),
-    [navigation],
-  );
-
-  return (
-    <>
-      {exposureHistoryData.map((item, index) => {
-        return (
-          <Box key={item.timestamp}>
-            <Box backgroundColor="gray5" style={styles.radius}>
-              <Box paddingHorizontal="m" style={[exposureHistoryData.length !== index + 1 && styles.bottomBorder]}>
-                <TouchableOpacity
-                  style={styles.chevronIcon}
-                  onPress={() => {
-                    onDetails({id: `${item.id}-${item.timestamp}`, exposureType: item.type});
-                  }}
-                >
-                  <Box paddingVertical="m" style={styles.exposureList}>
-                    <Box style={styles.typeIconBox}>
-                      <Icon size={20} name={item.type === 'proximity' ? 'exposure-proximity' : 'exposure-outbreak'} />
-                    </Box>
-                    <Box style={styles.boxFlex}>
-                      <Text fontWeight="bold">{formatExposedDate(new Date(item.timestamp), dateLocale)}</Text>
-                      <Text>{item.subtitle}</Text>
-                    </Box>
-                    <Box style={styles.chevronIconBox}>
-                      <Icon size={30} name="icon-chevron" />
-                    </Box>
-                  </Box>
-                </TouchableOpacity>
-              </Box>
-            </Box>
-          </Box>
-        );
-      })}
-    </>
-  );
-};
-
-const NoExposureHistoryScreen = () => {
-  const i18n = useI18n();
-
-  return (
-    <Box style={styles.noExposureHistoryScreen} marginTop="xl">
-      <Icon height={120} width={150} name="exposure-history-thumb" />
-      <Text paddingTop="s" fontWeight="bold">
-        {i18n.translate('ExposureHistory.NoExposures')}
-      </Text>
-    </Box>
-  );
-};
-
 export const ExposureHistoryScreen = () => {
   const i18n = useI18n();
   const outbreaks = useOutbreakService();
@@ -127,7 +72,7 @@ export const ExposureHistoryScreen = () => {
   }, [clearExposedStatus]);
 
   const navigation = useNavigation();
-  const back = useCallback(() => navigation.goBack(), [navigation]);
+  const close = useCallback(() => navigation.navigate('Home'), [navigation]);
 
   const deleteAllPlaces = () => {
     Alert.alert(i18n.translate('PlacesLog.Alert.TitleDeleteAll'), i18n.translate('PlacesLog.Alert.Subtitle'), [
@@ -149,7 +94,7 @@ export const ExposureHistoryScreen = () => {
   return (
     <Box flex={1} backgroundColor="overlayBackground">
       <SafeAreaView style={styles.flex}>
-        <Toolbar title="" navIcon="icon-back-arrow" navText={i18n.translate('PlacesLog.Back')} onIconClicked={back} />
+        <ToolbarWithClose closeText={i18n.translate('DataUpload.Close')} showBackButton onClose={close} />
         <ScrollView style={styles.flex}>
           <Box paddingHorizontal="m" paddingBottom="m">
             <Text variant="bodyTitle" marginBottom="l" accessibilityRole="header" accessibilityAutoFocus>
@@ -164,7 +109,6 @@ export const ExposureHistoryScreen = () => {
             <>
               <Box paddingHorizontal="xxs" marginLeft="m" marginRight="m" paddingBottom="m">
                 <ExposureList exposureHistoryData={mergedArray} />
-
                 <Box marginTop="m">
                   <Button variant="opaqueGrey" text="Delete All" onPress={deleteAllPlaces} />
                 </Box>
@@ -178,45 +122,7 @@ export const ExposureHistoryScreen = () => {
 };
 
 const styles = StyleSheet.create({
-  boxStyle: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  bottomBorder: {
-    borderBottomColor: '#8a8a8a',
-    borderBottomWidth: 1,
-  },
-  textBox: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  radius: {
-    borderRadius: 10,
-  },
-  noExposureHistoryScreen: {
-    flex: 1,
-    alignItems: 'center',
-  },
   flex: {
     flex: 1,
   },
-  exposureList: {
-    flexDirection: 'row',
-  },
-  boxFlex: {
-    flex: 4,
-  },
-  chevronIcon: {
-    alignItems: 'flex-end',
-  },
-  chevronIconBox: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  typeIconBox: {
-    flex: 1,
-    justifyContent: 'center',
-  },
 });
diff --git a/src/screens/exposures/RecentExposureView.tsx b/src/screens/exposureHistory/RecentExposureView.tsx
similarity index 84%
rename from src/screens/exposures/RecentExposureView.tsx
rename to src/screens/exposureHistory/RecentExposureView.tsx
index 2193a93a8..4fc550bb4 100644
--- a/src/screens/exposures/RecentExposureView.tsx
+++ b/src/screens/exposureHistory/RecentExposureView.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react';
 import {useI18n} from 'locale';
-import {Toolbar} from 'components';
+import {ToolbarWithClose} from 'components';
 import {useNavigation, useRoute, RouteProp} from '@react-navigation/native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {ScrollView} from 'react-native-gesture-handler';
@@ -26,10 +26,10 @@ export const RecentExposureScreen = () => {
   const i18n = useI18n();
 
   const navigation = useNavigation();
-  const back = useCallback(() => navigation.goBack(), [navigation]);
+  const close = useCallback(() => navigation.navigate('Home'), [navigation]);
   return (
     <SafeAreaView style={styles.flex}>
-      <Toolbar title="" navIcon="icon-back-arrow" navText={i18n.translate('PlacesLog.Back')} onIconClicked={back} />
+      <ToolbarWithClose closeText={i18n.translate('DataUpload.Close')} showBackButton onClose={close} />
       <ScrollView style={styles.flex}>
         <ExposureView />
       </ScrollView>
diff --git a/src/screens/exposureHistory/views/ExposureList.tsx b/src/screens/exposureHistory/views/ExposureList.tsx
new file mode 100644
index 000000000..f2acd3dde
--- /dev/null
+++ b/src/screens/exposureHistory/views/ExposureList.tsx
@@ -0,0 +1,78 @@
+import React, {useCallback} from 'react';
+import {StyleSheet, TouchableOpacity} from 'react-native';
+import {useI18n} from 'locale';
+import {CombinedExposureHistoryData} from 'shared/qr';
+import {useNavigation} from '@react-navigation/native';
+import {Box, Text, Icon} from 'components';
+import {formatExposedDate} from 'shared/date-fns';
+
+export const ExposureList = ({exposureHistoryData}: {exposureHistoryData: CombinedExposureHistoryData[]}) => {
+  const i18n = useI18n();
+  const dateLocale = i18n.locale === 'fr' ? 'fr-CA' : 'en-CA';
+  const navigation = useNavigation();
+  const onDetails = useCallback(
+    ({id, exposureType}) => navigation.navigate('RecentExposureScreen', {id, exposureType}),
+    [navigation],
+  );
+
+  return (
+    <>
+      {exposureHistoryData.map((item, index) => {
+        return (
+          <Box key={item.timestamp}>
+            <Box backgroundColor="gray5" style={styles.radius}>
+              <Box paddingHorizontal="m" style={[exposureHistoryData.length !== index + 1 && styles.bottomBorder]}>
+                <TouchableOpacity
+                  style={styles.chevronIcon}
+                  onPress={() => {
+                    onDetails({id: `${item.id}-${item.timestamp}`, exposureType: item.type});
+                  }}
+                >
+                  <Box paddingVertical="m" style={styles.exposureList}>
+                    <Box style={styles.typeIconBox}>
+                      <Icon size={20} name={item.type === 'proximity' ? 'exposure-proximity' : 'exposure-outbreak'} />
+                    </Box>
+                    <Box style={styles.boxFlex}>
+                      <Text fontWeight="bold">{formatExposedDate(new Date(item.timestamp), dateLocale)}</Text>
+                      <Text>{item.subtitle}</Text>
+                    </Box>
+                    <Box style={styles.chevronIconBox}>
+                      <Icon size={30} name="icon-chevron" />
+                    </Box>
+                  </Box>
+                </TouchableOpacity>
+              </Box>
+            </Box>
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomBorder: {
+    borderBottomColor: '#8a8a8a',
+    borderBottomWidth: 1,
+  },
+  radius: {
+    borderRadius: 10,
+  },
+  exposureList: {
+    flexDirection: 'row',
+  },
+  boxFlex: {
+    flex: 4,
+  },
+  chevronIcon: {
+    alignItems: 'flex-end',
+  },
+  chevronIconBox: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  typeIconBox: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+});
diff --git a/src/screens/exposureHistory/views/NoExposureHistoryScreen.tsx b/src/screens/exposureHistory/views/NoExposureHistoryScreen.tsx
new file mode 100644
index 000000000..874e0a9b9
--- /dev/null
+++ b/src/screens/exposureHistory/views/NoExposureHistoryScreen.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {useI18n} from 'locale';
+import {Box, Text, Icon} from 'components';
+
+export const NoExposureHistoryScreen = () => {
+  const i18n = useI18n();
+
+  return (
+    <Box style={styles.noExposureHistoryScreen} marginTop="xl">
+      <Icon height={120} width={150} name="exposure-history-thumb" />
+      <Text paddingTop="s" fontWeight="bold">
+        {i18n.translate('ExposureHistory.NoExposures')}
+      </Text>
+    </Box>
+  );
+};
+
+const styles = StyleSheet.create({
+  noExposureHistoryScreen: {
+    flex: 1,
+    alignItems: 'center',
+  },
+});
diff --git a/src/screens/menu/MenuScreen.tsx b/src/screens/menu/MenuScreen.tsx
index a8db8987c..859289282 100644
--- a/src/screens/menu/MenuScreen.tsx
+++ b/src/screens/menu/MenuScreen.tsx
@@ -35,7 +35,7 @@ export const MenuScreen = () => {
   const onLanguage = useCallback(() => navigation.navigate('LanguageSelect'), [navigation]);
   const onRegion = useCallback(() => navigation.navigate('RegionSelect'), [navigation]);
   const onYourVisits = useCallback(() => navigation.navigate('CheckInHistoryScreen'), [navigation]);
-  const onRecentExposures = useCallback(() => navigation.navigate('ExposureHistoryScreen'), [navigation]);
+  const onRecentExposures = useCallback(() => navigation.navigate('ExposureHistory'), [navigation]);
   const onHelp = useCallback(() => {
     Linking.openURL(i18n.translate('Info.HelpUrl')).catch(error => captureException('An error occurred', error));
   }, [i18n]);
diff --git a/src/screens/qr/components/BaseQRCodeScreen.tsx b/src/screens/qr/components/BaseQRCodeScreen.tsx
index 30a17f675..22593ab7e 100644
--- a/src/screens/qr/components/BaseQRCodeScreen.tsx
+++ b/src/screens/qr/components/BaseQRCodeScreen.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 import {StyleSheet, View, ScrollView} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import {Box, Toolbar2} from 'components';
+import {Box, ToolbarWithClose} from 'components';
 import {useI18n} from 'locale';
 import {useNavigation} from '@react-navigation/native';
 
@@ -19,10 +19,10 @@ export const BaseQRCodeScreen = ({children, showBackButton}: BaseQRCodeScreenPro
       <SafeAreaView style={styles.flex}>
         <ScrollView>
           <Box marginBottom="m">
-            <Toolbar2
-              navText={i18n.translate('DataUpload.Close')}
+            <ToolbarWithClose
+              closeText={i18n.translate('DataUpload.Close')}
               showBackButton={showBackButton}
-              onIconClicked={close}
+              onClose={close}
             />
           </Box>
           <View style={styles.flex}>{children}</View>
diff --git a/src/screens/qr/views/QRCodeScanner.tsx b/src/screens/qr/views/QRCodeScanner.tsx
index 857b9a02e..f2d919e42 100644
--- a/src/screens/qr/views/QRCodeScanner.tsx
+++ b/src/screens/qr/views/QRCodeScanner.tsx
@@ -2,7 +2,7 @@ import React, {useCallback, useState} from 'react';
 import {StyleSheet} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {BarCodeScanner, BarCodeScannerResult} from 'expo-barcode-scanner';
-import {Box, Text, Toolbar2} from 'components';
+import {Box, Text, ToolbarWithClose} from 'components';
 import {useI18n} from 'locale';
 import {useNavigation} from '@react-navigation/native';
 import {log} from 'shared/logging/config';
@@ -44,7 +44,12 @@ export const QRCodeScanner = () => {
         <Box style={styles.boxLeft} />
         <Box style={styles.boxRight} />
         <Box marginBottom="m" style={styles.toolbar}>
-          <Toolbar2 navText={i18n.translate('DataUpload.Close')} useWhiteText onIconClicked={close} showBackButton />
+          <ToolbarWithClose
+            closeText={i18n.translate('DataUpload.Close')}
+            useWhiteText
+            onClose={close}
+            showBackButton
+          />
         </Box>
 
         <Box