Add the proximity exposure screen to the exposure history flow (#1558)

* created an enum for ExposureType

* renamed ExposureView -> ProximityExposureView, linked this to the exposure history page

* rm back button from expousure history screen at phils suggestion, change close route to be Menu for consistency w/ data sharing screens

src/navigation/MainNavigator.tsx

@@ -34,8 +34,8 @@ import {QRCodeIntroScreen} from 'screens/qr/QRCodeIntroScreen';
 import {MenuScreen} from 'screens/menu/MenuScreen';
 import {ClearOutbreakExposureScreen} from 'screens/home/views/ClearOutbreakExposureView';
 import {RecentExposureScreen} from 'screens/exposureHistory/RecentExposureView';
-
-import {FormContext, FormContextDefaults} from '../shared/FormContext';
+import {FormContext, FormContextDefaults} from 'shared/FormContext';
+import {ExposureType} from 'shared/qr';
 
 const MainStack = createStackNavigator<MainStackParamList>();
 
@@ -80,8 +80,7 @@ export interface MainStackParamList extends Record<string, object | undefined> {
   Tutorial: undefined;
   QROnboard: undefined;
   RegionSelectExposedNoPT: {drawerMenu: boolean} | undefined;
-  // @todo add proper type for exposureType i.e. outbreak or proximity
-  RecentExposureScreen: {id: string; exposureType: string};
+  RecentExposureScreen: {id: string; exposureType: ExposureType};
 }
 const LandingScreenWithNavBar = withDarkNav(LandingScreen);
 const HomeScreenWithNavBar = withDarkNav(HomeScreen);

src/screens/exposureHistory/ExposureHistoryScreen.tsx

@@ -1,7 +1,13 @@
 import React, {useCallback} from 'react';
 import {StyleSheet, Alert} from 'react-native';
 import {useI18n, I18n} from 'locale';
-import {CombinedExposureHistoryData, getCurrentOutbreakHistory, OutbreakHistoryItem, OutbreakSeverity} from 'shared/qr';
+import {
+  CombinedExposureHistoryData,
+  ExposureType,
+  getCurrentOutbreakHistory,
+  OutbreakHistoryItem,
+  OutbreakSeverity,
+} from 'shared/qr';
 import {useNavigation} from '@react-navigation/native';
 import {Box, Text, ToolbarWithClose, Button} from 'components';
 import {SafeAreaView} from 'react-native-safe-area-context';
@@ -33,7 +39,7 @@ const toOutbreakExposureHistoryData = ({
   return history.map(outbreak => {
     return {
       id: outbreak.locationId,
-      type: 'exposure',
+      type: ExposureType.Outbreak,
       subtitle: severityText({severity: Number(outbreak.severity), i18n}),
       timestamp: outbreak.checkInTimestamp,
     };
@@ -50,7 +56,7 @@ const toProximityExposureHistoryData = ({
   return history.map(outbreak => {
     return {
       id: outbreak,
-      type: 'proximity',
+      type: ExposureType.Proximity,
       subtitle: i18n.translate('QRCode.ProximityExposure'),
       timestamp: outbreak,
     };
@@ -72,7 +78,7 @@ export const ExposureHistoryScreen = () => {
   }, [clearExposedStatus]);
 
   const navigation = useNavigation();
-  const close = useCallback(() => navigation.navigate('Home'), [navigation]);
+  const close = useCallback(() => navigation.navigate('Menu'), [navigation]);
 
   const deleteAllPlaces = () => {
     Alert.alert(i18n.translate('PlacesLog.Alert.TitleDeleteAll'), i18n.translate('PlacesLog.Alert.Subtitle'), [
@@ -94,7 +100,7 @@ export const ExposureHistoryScreen = () => {
   return (
     <Box flex={1} backgroundColor="overlayBackground">
       <SafeAreaView style={styles.flex}>
-        <ToolbarWithClose closeText={i18n.translate('DataUpload.Close')} showBackButton onClose={close} />
+        <ToolbarWithClose closeText={i18n.translate('DataUpload.Close')} showBackButton={false} onClose={close} />
         <ScrollView style={styles.flex}>
           <Box paddingHorizontal="m" paddingBottom="m">
             <Text variant="bodyTitle" marginBottom="l" accessibilityRole="header" accessibilityAutoFocus>

src/screens/exposureHistory/RecentExposureView.tsx

@@ -5,28 +5,34 @@ import {useNavigation, useRoute, RouteProp} from '@react-navigation/native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {ScrollView} from 'react-native-gesture-handler';
 import {StyleSheet} from 'react-native';
+import {ExposureType} from 'shared/qr';
+import {OutbreakExposedView} from 'screens/home/views/OutbreakExposedView';
+import {ProximityExposureView} from 'screens/home/views/ProximityExposureView';
 
-import {OutbreakExposedView} from '../home/views/OutbreakExposedView';
 import {MainStackParamList} from '../../navigation/MainNavigator';
 
 type RecentExposureScreenProps = RouteProp<MainStackParamList, 'RecentExposureScreen'>;
 
 const ExposureView = () => {
   const route = useRoute<RecentExposureScreenProps>();
-  // @todo add proper type checking here -> exposureType
-  if (route.params?.id && route.params?.exposureType === 'exposure') {
-    const id = route.params.id;
+  if (!route.params?.id || !route.params?.exposureType) {
+    return null;
+  }
+  const id = route.params.id;
+  if (route.params.exposureType === ExposureType.Outbreak) {
     return <OutbreakExposedView id={id} />;
   }
-  // @todo return proximity Exposure
+  if (route.params.exposureType === ExposureType.Proximity) {
+    return <ProximityExposureView />;
+  }
   return null;
 };
 
 export const RecentExposureScreen = () => {
   const i18n = useI18n();
 
   const navigation = useNavigation();
-  const close = useCallback(() => navigation.navigate('Home'), [navigation]);
+  const close = useCallback(() => navigation.navigate('Menu'), [navigation]);
   return (
     <SafeAreaView style={styles.flex}>
       <ToolbarWithClose closeText={i18n.translate('DataUpload.Close')} showBackButton onClose={close} />

src/screens/exposureHistory/views/ExposureList.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 import {StyleSheet, TouchableOpacity} from 'react-native';
 import {useI18n} from 'locale';
-import {CombinedExposureHistoryData} from 'shared/qr';
+import {CombinedExposureHistoryData, ExposureType} from 'shared/qr';
 import {useNavigation} from '@react-navigation/native';
 import {Box, Text, Icon} from 'components';
 import {formatExposedDate} from 'shared/date-fns';
@@ -33,7 +33,10 @@ export const ExposureList = ({exposureHistoryData}: {exposureHistoryData: Combin
                 >
                   <Box paddingVertical="m" style={styles.exposureList}>
                     <Box style={styles.typeIconBox}>
-                      <Icon size={20} name={item.type === 'proximity' ? 'exposure-proximity' : 'exposure-outbreak'} />
+                      <Icon
+                        size={20}
+                        name={item.type === ExposureType.Proximity ? 'exposure-proximity' : 'exposure-outbreak'}
+                      />
                     </Box>
                     <Box style={styles.boxFlex}>
                       <Text fontWeight="bold">{formatExposedDate(new Date(item.timestamp), dateLocale)}</Text>

src/screens/home/HomeScreen.tsx

@@ -31,7 +31,7 @@ import {DiagnosedView} from './views/DiagnosedView';
 import {DiagnosedShareUploadView} from './views/DiagnosedShareUploadView';
 import {ExposureNotificationsDisabledView} from './views/ExposureNotificationsDisabledView';
 import {ExposureNotificationsUnauthorizedView} from './views/ExposureNotificationsUnauthorizedView';
-import {ExposureView} from './views/ExposureView';
+import {ProximityExposureView} from './views/ProximityExposureView';
 import {NoExposureUncoveredRegionView} from './views/NoExposureUncoveredRegionView';
 import {NoExposureCoveredRegionView} from './views/NoExposureCoveredRegionView';
 import {NoExposureNoRegionView} from './views/NoExposureNoRegionView';
@@ -79,7 +79,7 @@ const Content = () => {
       case ForceScreen.NoExposureView:
         return getNoExposureView(regionCase);
       case ForceScreen.ExposureView:
-        return <ExposureView />;
+        return <ProximityExposureView />;
       case ForceScreen.DiagnosedShareView:
         return <DiagnosedShareView />;
       case ForceScreen.DiagnosedView:
@@ -125,7 +125,7 @@ const Content = () => {
 
   switch (exposureStatus.type) {
     case ExposureStatusType.Exposed:
-      return <ExposureView />;
+      return <ProximityExposureView />;
     case ExposureStatusType.Diagnosed:
       if (!network.isConnected) {
         return <NetworkDisabledView />;

src/screens/home/views/ExposureView.tsx → src/screens/home/views/ProximityExposureView.tsx

@@ -53,7 +53,7 @@ const ExposureText = () => {
   );
 };
 
-export const ExposureView = () => {
+export const ProximityExposureView = () => {
   return (
     <BaseHomeView iconName="hand-caution" testID="exposure">
       <ExposureText />

src/shared/qr.ts

@@ -11,6 +11,11 @@ export enum OutbreakSeverity {
   GetTested = 3,
 }
 
+export enum ExposureType {
+  Proximity = 'proximity',
+  Outbreak = 'outbreak',
+}
+
 export interface CheckInData {
   id: string;
   name: string;
@@ -58,8 +63,7 @@ export interface OutbreakHistoryItem {
 export interface CombinedExposureHistoryData {
   id?: string | number;
   timestamp: number;
-  // proximity or outbreak
-  type: string;
+  type: ExposureType;
   subtitle: string;
 }