rename ErrorModal to ErrorBottomSheet, make that more Declarative, pa…

…ss error to Sentry
digidem · May 15, 2024 · f76c383 · f76c383
1 parent f8219a2
commit f76c383
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 147 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -857,10 +857,10 @@
     "message": "Go Back"
   },
   "sharedComponents.ErrorModal.somethingWrong": {
-    "message": "Something Went Wrong"
+    "message": "Something\n Went Wrong"
   },
   "sharedComponents.ErrorModal.tryAgain": {
-    "message": "Please go back and try again"
+    "message": "Try Again"
   },
   "sharedComponents.GpsPill.noGps": {
     "message": "No GPS"

diff --git a/src/frontend/screens/ObservationEdit/SaveButton.tsx b/src/frontend/screens/ObservationEdit/SaveButton.tsx
@@ -61,10 +61,10 @@ const log = debug('SaveButton');
 
 export const SaveButton = ({
   observationId,
-  openErrorModal,
+  setError,
 }: {
   observationId?: string;
-  openErrorModal?: () => void;
+  setError: React.Dispatch<React.SetStateAction<Error | null>>;
 }) => {
   const value = usePersistedDraftObservation(store => store.value);
   const photos = usePersistedDraftObservation(store => store.photos);
@@ -89,9 +89,7 @@ export const SaveButton = ({
       createObservationMutation.mutate(
         {value},
         {
-          onError: () => {
-            if (openErrorModal) openErrorModal();
-          },
+          onError: setError,
           onSuccess: () => {
             clearDraft();
             navigation.navigate('Home', {screen: 'Map'});
@@ -130,9 +128,7 @@ export const SaveButton = ({
             },
           },
           {
-            onError: () => {
-              if (openErrorModal) openErrorModal();
-            },
+            onError: setError,
             onSuccess: data => {
               clearDraft();
               navigation.navigate('Home', {screen: 'Map'});
@@ -152,9 +148,7 @@ export const SaveButton = ({
           },
         );
       })
-      .catch(() => {
-        if (openErrorModal) openErrorModal();
-      });
+      .catch(setError);
   }
 
   function editObservation() {
@@ -166,6 +160,7 @@ export const SaveButton = ({
       // @ts-expect-error
       {id: observationId, value},
       {
+        onError: setError,
         onSuccess: () => {
           clearDraft();
           navigation.pop();

diff --git a/src/frontend/screens/ObservationEdit/index.tsx b/src/frontend/screens/ObservationEdit/index.tsx
@@ -9,9 +9,9 @@ import {DescriptionField} from './DescriptionField';
 import {BottomSheet} from '../../sharedComponents/BottomSheet/BottomSheet';
 import {ThumbnailScrollView} from '../../sharedComponents/ThumbnailScrollView';
 import {PresetView} from './PresetView';
-import {useBottomSheetModal} from '../../sharedComponents/BottomSheetModal';
-import {ErrorModal} from '../../sharedComponents/ErrorModal';
+import {ErrorBottomSheet} from '../../sharedComponents/ErrorBottomSheet';
 import {SaveButton} from './SaveButton';
+import {useState} from 'react';
 
 const m = defineMessages({
   editTitle: {
@@ -34,23 +34,21 @@ const m = defineMessages({
 export const ObservationEdit: NativeNavigationComponent<'ObservationEdit'> & {
   editTitle: MessageDescriptor;
 } = ({navigation}) => {
+  const [error, setError] = useState<Error | null>(null);
   const observationId = usePersistedDraftObservation(
     store => store.observationId,
   );
 
   const isNew = !observationId;
   const {formatMessage: t} = useIntl();
-  const {openSheet, sheetRef, isOpen, closeSheet} = useBottomSheetModal({
-    openOnMount: false,
-  });
 
   React.useEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <SaveButton observationId={observationId} openErrorModal={openSheet} />
+        <SaveButton observationId={observationId} setError={setError} />
       ),
     });
-  }, [navigation, openSheet, observationId]);
+  }, [navigation, observationId]);
 
   const handleCameraPress = React.useCallback(() => {
     navigation.navigate('AddPhoto');
@@ -87,7 +85,7 @@ export const ObservationEdit: NativeNavigationComponent<'ObservationEdit'> & {
         <ThumbnailScrollView />
       </ScrollView>
       <BottomSheet items={bottomSheetItems} />
-      <ErrorModal sheetRef={sheetRef} closeSheet={closeSheet} isOpen={isOpen} />
+      <ErrorBottomSheet error={error} clearError={() => setError(null)} />
     </View>
   );
 };

diff --git a/src/frontend/screens/Settings/CreateOrJoinProject/CreateProject/index.tsx b/src/frontend/screens/Settings/CreateOrJoinProject/CreateProject/index.tsx
@@ -14,8 +14,7 @@ import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import {HookFormTextInput} from '../../../../sharedComponents/HookFormTextInput';
 import {useCreateProject} from '../../../../hooks/server/projects';
 import {UIActivityIndicator} from 'react-native-indicators';
-import {ErrorModal} from '../../../../sharedComponents/ErrorModal';
-import {useBottomSheetModal} from '../../../../sharedComponents/BottomSheetModal';
+import {ErrorBottomSheet} from '../../../../sharedComponents/ErrorBottomSheet';
 
 const m = defineMessages({
   title: {
@@ -49,10 +48,7 @@ export const CreateProject: NativeNavigationComponent<'CreateProject'> = ({
 }) => {
   const {formatMessage: t} = useIntl();
   const [advancedSettingOpen, setAdvancedSettingOpen] = React.useState(false);
-  const {mutate, isPending, reset} = useCreateProject();
-  const {openSheet, isOpen, closeSheet, sheetRef} = useBottomSheetModal({
-    openOnMount: false,
-  });
+  const {mutate, isPending, reset, error} = useCreateProject();
 
   const {
     control,
@@ -64,9 +60,6 @@ export const CreateProject: NativeNavigationComponent<'CreateProject'> = ({
     mutate(val.projectName, {
       onSuccess: () =>
         navigation.navigate('ProjectCreated', {name: val.projectName}),
-      onError: () => {
-        openSheet();
-      },
     });
   }
 
@@ -121,12 +114,7 @@ export const CreateProject: NativeNavigationComponent<'CreateProject'> = ({
           </View>
         </TouchableWithoutFeedback>
       </KeyboardAvoidingView>
-      <ErrorModal
-        isOpen={isOpen}
-        closeSheet={closeSheet}
-        sheetRef={sheetRef}
-        clearError={reset}
-      />
+      <ErrorBottomSheet error={error} clearError={reset} />
     </React.Fragment>
   );
 };

diff --git a/src/frontend/screens/Settings/ProjectSettings/DeviceName/EditScreen.tsx b/src/frontend/screens/Settings/ProjectSettings/DeviceName/EditScreen.tsx
@@ -14,8 +14,7 @@ import {BLACK} from '../../../../lib/styles';
 import {HookFormTextInput} from '../../../../sharedComponents/HookFormTextInput';
 import {IconButton} from '../../../../sharedComponents/IconButton';
 import SaveIcon from '../../../../images/CheckMark.svg';
-import {useBottomSheetModal} from '../../../../sharedComponents/BottomSheetModal';
-import {ErrorModal} from '../../../../sharedComponents/ErrorModal';
+import {ErrorBottomSheet} from '../../../../sharedComponents/ErrorBottomSheet';
 import {FieldRow} from './FieldRow';
 
 const m = defineMessages({
@@ -72,17 +71,13 @@ export const EditScreen = ({
     deviceName: string;
   }>({defaultValues: {deviceName}});
 
-  const {isPending, mutate} = useEditDeviceInfo();
+  const {isPending, mutate, error} = useEditDeviceInfo();
 
   const {isDirty: nameHasChanges} = control.getFieldState(
     'deviceName',
     formState,
   );
 
-  const {openSheet, sheetRef, closeSheet, isOpen} = useBottomSheetModal({
-    openOnMount: false,
-  });
-
   React.useEffect(
     function showDiscardChangesAlert() {
       const unsubscribe = navigation.addListener('beforeRemove', event => {
@@ -130,9 +125,6 @@ export const EditScreen = ({
                       mutate(value.deviceName, {
                         onSuccess: () =>
                           navigation.navigate('DeviceNameDisplay'),
-                        onError: () => {
-                          openSheet();
-                        },
                       });
                     })
               }>
@@ -142,7 +134,7 @@ export const EditScreen = ({
         },
       });
     },
-    [handleSubmit, navigation, isPending, mutate, nameHasChanges, openSheet],
+    [handleSubmit, navigation, isPending, mutate, nameHasChanges],
   );
 
   return (
@@ -163,7 +155,7 @@ export const EditScreen = ({
           />
         </FieldRow>
       </ScrollView>
-      <ErrorModal sheetRef={sheetRef} closeSheet={closeSheet} isOpen={isOpen} />
+      <ErrorBottomSheet error={error} />
     </>
   );
 };

diff --git a/src/frontend/screens/Settings/ProjectSettings/YourTeam/ReviewAndInvite/index.tsx b/src/frontend/screens/Settings/ProjectSettings/YourTeam/ReviewAndInvite/index.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import {NativeNavigationComponent} from '../../../../../sharedTypes/navigation';
 import {defineMessages} from 'react-intl';
-import {useBottomSheetModal} from '../../../../../sharedComponents/BottomSheetModal';
-import {ErrorModal} from '../../../../../sharedComponents/ErrorModal';
+import {ErrorBottomSheet} from '../../../../../sharedComponents/ErrorBottomSheet';
 import {ReviewInvitation} from './ReviewInvitation';
 import {WaitingForInviteAccept} from './WaitingForInviteAccept';
 import {
@@ -23,9 +22,6 @@ export const ReviewAndInvite: NativeNavigationComponent<'ReviewAndInvite'> = ({
 }) => {
   const {role, deviceId, deviceType, name} = route.params;
 
-  const {openSheet, sheetRef, closeSheet, isOpen} = useBottomSheetModal({
-    openOnMount: false,
-  });
   const sendInviteMutation = useSendInvite();
   const requestCancelInviteMutation = useRequestCancelInvite();
 
@@ -49,9 +45,6 @@ export const ReviewAndInvite: NativeNavigationComponent<'ReviewAndInvite'> = ({
             return;
           }
         },
-        onError: () => {
-          openSheet();
-        },
       },
     );
   }
@@ -61,9 +54,6 @@ export const ReviewAndInvite: NativeNavigationComponent<'ReviewAndInvite'> = ({
       onSuccess: () => {
         navigation.navigate('YourTeam');
       },
-      onError: () => {
-        openSheet();
-      },
     });
   }
 
@@ -80,10 +70,8 @@ export const ReviewAndInvite: NativeNavigationComponent<'ReviewAndInvite'> = ({
       ) : (
         <WaitingForInviteAccept cancelInvite={cancelInvite} />
       )}
-      <ErrorModal
-        sheetRef={sheetRef}
-        closeSheet={closeSheet}
-        isOpen={isOpen}
+      <ErrorBottomSheet
+        error={sendInviteMutation.error ?? requestCancelInviteMutation.error}
         clearError={() => navigation.navigate('YourTeam')}
       />
     </React.Fragment>

diff --git a/src/frontend/sharedComponents/Button.tsx b/src/frontend/sharedComponents/Button.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {GestureResponderEvent, StyleSheet, View, ViewStyle} from 'react-native';
 
-import {BLACK, VERY_LIGHT_BLUE} from '../lib/styles';
+import {BLACK, COMAPEO_BLUE, VERY_LIGHT_BLUE} from '../lib/styles';
 import {Text} from './Text';
 import {TouchableNativeFeedback} from 'react-native-gesture-handler';
 
 import {ViewStyleProp} from '../sharedTypes';
 
-type ColorScheme = 'dark' | 'light';
+type ColorScheme = 'dark' | 'light' | 'ComapeoBlue';
 type Variant = 'contained' | 'outlined' | 'text';
 type Size = 'medium' | 'large';
 
@@ -162,6 +162,9 @@ const styles = StyleSheet.create({
   textOutlinedDark: {
     color: BLACK,
   },
+  textOutlinedComapeoBlue: {
+    color: COMAPEO_BLUE,
+  },
   textOutlinedLightDisabled: {
     color: '#666666',
   },