Skip to content
This repository has been archived by the owner on Jun 24, 2022. It is now read-only.

Commit

Permalink
Moving the ExposureHistory to its own navigator and folder (#1554)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
smcmurtry authored May 3, 2021
1 parent c534f1c commit b648167
Show file tree
Hide file tree
Showing 10 changed files with 147 additions and 121 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
21 changes: 17 additions & 4 deletions src/navigation/MainNavigator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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:
Expand Down Expand Up @@ -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();
Expand All @@ -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'), [
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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',
},
});
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
Expand Down
78 changes: 78 additions & 0 deletions src/screens/exposureHistory/views/ExposureList.tsx
Original file line number Diff line number Diff line change
@@ -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',
},
});
24 changes: 24 additions & 0 deletions src/screens/exposureHistory/views/NoExposureHistoryScreen.tsx
Original file line number Diff line number Diff line change
@@ -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',
},
});
2 changes: 1 addition & 1 deletion src/screens/menu/MenuScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand Down
8 changes: 4 additions & 4 deletions src/screens/qr/components/BaseQRCodeScreen.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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>
Expand Down
Loading

0 comments on commit b648167

Please sign in to comment.