Es/chore replace toast with modal

messages/en.json

@@ -1,24 +1,4 @@
 {
-  "AppContainer.EditHeader.discardCancel": {
-    "description": "Button on dialog to keep editing (cancelling close action)",
-    "message": "Continue editing"
-  },
-  "AppContainer.EditHeader.discardChangesContent": {
-    "description": "Button on dialog to cancel observation edits",
-    "message": "Discard changes"
-  },
-  "AppContainer.EditHeader.discardChangesTitle": {
-    "description": "Title of dialog that shows when cancelling observation edits",
-    "message": "Discard changes?"
-  },
-  "AppContainer.EditHeader.discardContent": {
-    "description": "Button on dialog to cancel a new observation",
-    "message": "Discard without saving"
-  },
-  "AppContainer.EditHeader.discardTitle": {
-    "description": "Title of dialog that shows when cancelling a new observation",
-    "message": "Discard observation?"
-  },
   "Modal.DiscardTrack.description": {
     "message": "Your Track will not be saved. This cannot be undone."
   },
@@ -28,9 +8,6 @@
   "Modal.GPSDisable.button": {
     "message": "Enable"
   },
-  "Modal.GPSDisable.defaultButton": {
-    "message": "Continue Editing"
-  },
   "Modal.GPSDisable.description": {
     "message": "To create a Track CoMapeo needs access to your location and GPS."
   },
@@ -370,6 +347,12 @@
     "description": "Placeholder for description/notes field",
     "message": "What is happening here?"
   },
+  "screens.ObservationEdit.ObservationEditView.discardObservation": {
+    "message": "Discard Observation"
+  },
+  "screens.ObservationEdit.ObservationEditView.discardObservationDescription": {
+    "message": "Your observation will not be saved. This cannot be undone."
+  },
   "screens.ObservationEdit.ObservationEditView.photoButton": {
     "description": "Button label for adding photo",
     "message": "Add Photo"
@@ -721,6 +704,9 @@
   "sharedComponents.DeviceIconWithName.thisDevice": {
     "message": "This Device!"
   },
+  "sharedComponents.DiscardModal.defaultButton": {
+    "message": "Continue Editing"
+  },
   "sharedComponents.ErrorModal.goBack": {
     "message": "Go Back"
   },

src/frontend/Navigation/ScreenGroups/AppScreens.tsx

@@ -232,6 +232,7 @@ export const createDefaultScreenGroup = (
             <CustomHeaderLeftClose
               headerBackButtonProps={headerProp}
               observationId={observationId}
+              openDiscardModal={() => {}}
             />
           ),
           headerRight: () => <SaveButton observationId={observationId} />,

src/frontend/screens/MapScreen/track/SaveTrackScreen.tsx

@@ -7,7 +7,7 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import {DiscardModal} from '../../../sharedComponents/DiscardModal.tsx';
+import {DiscardModal} from '../../../sharedComponents/CustomHeaderLeftClose/DiscardModal.tsx';
 import {BottomSheet} from '../../../sharedComponents/BottomSheet/BottomSheet';
 import PhotoIcon from '../../../images/camera.svg';
 import DetailsIcon from '../../../images/details.svg';
@@ -16,8 +16,6 @@ import {defineMessages, useIntl} from 'react-intl';
 import {Text} from '../../../sharedComponents/Text';
 import {TrackDescriptionField} from './saveTrack/TrackDescriptionField';
 import {useBottomSheetModal} from '../../../sharedComponents/BottomSheetModal';
-import DiscardIcon from '../../../images/delete.svg';
-import ErrorIcon from '../../../images/Error.svg';
 import {TabName} from '../../../Navigation/types.ts';
 import {useCurrentTrackStore} from '../../../hooks/tracks/useCurrentTrackStore.ts';
 import {useNavigationFromHomeTabs} from '../../../hooks/useNavigationWithTypes.ts';
@@ -106,23 +104,11 @@ export const SaveTrackScreen = () => {
         <DiscardModal
           bottomSheetRef={sheetRef}
           isOpen={isOpen}
-          buttonConfigs={[
-            {
-              variation: 'filled',
-              dangerous: true,
-              onPress: handleDiscard,
-              text: t(m.discardTrackDiscardButton),
-              icon: <DiscardIcon />,
-            },
-            {
-              onPress: closeSheet,
-              text: t(m.discardTrackDefaultButton),
-              variation: 'outlined',
-            },
-          ]}
+          closeSheet={closeSheet}
+          discardButtonText={m.discardTrackDiscardButton}
+          handleDiscard={handleDiscard}
           title={t(m.discardTrackTitle)}
           description={t(m.discardTrackDescription)}
-          icon={<ErrorIcon width={60} height={60} style={styles.image} />}
         />
       </ScrollView>
       <BottomSheet items={bottomSheetItems} />
@@ -132,7 +118,6 @@ export const SaveTrackScreen = () => {
 
 const styles = StyleSheet.create({
   icon: {width: 30, height: 30},
-  image: {marginBottom: 15},
   titleText: {fontSize: 20, fontWeight: '700'},
   container: {
     flex: 1,
@@ -188,8 +173,4 @@ export const m = defineMessages({
     id: 'Modal.GPSDisable.discardButton',
     defaultMessage: 'Discard Track',
   },
-  discardTrackDefaultButton: {
-    id: 'Modal.GPSDisable.defaultButton',
-    defaultMessage: 'Continue Editing',
-  },
 });

src/frontend/screens/ObservationEdit/index.tsx

@@ -12,6 +12,8 @@ import {PresetView} from './PresetView';
 import {useBottomSheetModal} from '../../sharedComponents/BottomSheetModal';
 import {ErrorModal} from '../../sharedComponents/ErrorModal';
 import {SaveButton} from './SaveButton';
+import {DiscardModal} from '../../sharedComponents/CustomHeaderLeftClose/DiscardModal';
+import {CustomHeaderLeftClose} from '../../sharedComponents/CustomHeaderLeftClose';
 
 const m = defineMessages({
   editTitle: {
@@ -31,6 +33,22 @@ const m = defineMessages({
   },
 });
 
+export const deleteObservationMessages = defineMessages({
+  discardObservation: {
+    id: 'screens.ObservationEdit.ObservationEditView.discardObservation',
+    defaultMessage: 'Discard Observation?',
+  },
+  discardObservationButton: {
+    id: 'screens.ObservationEdit.ObservationEditView.discardObservation',
+    defaultMessage: 'Discard Observation',
+  },
+  discardObservationDescription: {
+    id: 'screens.ObservationEdit.ObservationEditView.discardObservationDescription',
+    defaultMessage:
+      'Your observation will not be saved. This cannot be undone.',
+  },
+});
+
 export const ObservationEdit: NativeNavigationComponent<'ObservationEdit'> & {
   editTitle: MessageDescriptor;
 } = ({navigation}) => {
@@ -49,16 +67,28 @@ export const ObservationEdit: NativeNavigationComponent<'ObservationEdit'> & {
       headerRight: () => (
         <SaveButton observationId={observationId} openErrorModal={openSheet} />
       ),
+      headerLeft: headerBackButtonProps => (
+        <CustomHeaderLeftClose
+          headerBackButtonProps={headerBackButtonProps}
+          observationId={observationId}
+          openDiscardModal={openSheet}
+        />
+      ),
     });
   }, [navigation, openSheet, observationId]);
 
+  const handleDiscard = React.useCallback(() => {
+    closeSheet();
+    navigation.reset({index: 0, routes: [{name: 'Home'}]});
+  }, [navigation, closeSheet]);
+
   const handleCameraPress = React.useCallback(() => {
     navigation.navigate('AddPhoto');
   }, [navigation]);
 
-  const handleDetailsPress = React.useCallback(() => {
-    navigation.navigate('ObservationDetails', {question: 1});
-  }, [navigation]);
+  // const handleDetailsPress = React.useCallback(() => {
+  //   navigation.navigate('ObservationDetails', {question: 1});
+  // }, [navigation]);
 
   const bottomSheetItems = [
     {
@@ -88,6 +118,15 @@ export const ObservationEdit: NativeNavigationComponent<'ObservationEdit'> & {
       </ScrollView>
       <BottomSheet items={bottomSheetItems} />
       <ErrorModal sheetRef={sheetRef} closeSheet={closeSheet} isOpen={isOpen} />
+      {/* <DiscardModal
+        bottomSheetRef={sheetRef}
+        isOpen={isOpen}
+        closeSheet={closeSheet}
+        title={deleteObservationMessages.discardObservation}
+        description={deleteObservationMessages.discardObservationDescription}
+        discardButtonText={deleteObservationMessages.discardObservationButton}
+        handleDiscard={handleDiscard}
+      /> */}
     </View>
   );
 };

src/frontend/screens/PresetChooser.tsx

@@ -17,6 +17,9 @@ import {CustomHeaderLeftClose} from '../sharedComponents/CustomHeaderLeftClose';
 import {CustomHeaderLeft} from '../sharedComponents/CustomHeaderLeft';
 import {Preset} from '@mapeo/schema';
 import {usePresetsQuery} from '../hooks/server/presets';
+// import {DiscardModal} from '../sharedComponents/DiscardModal';
+// import {deleteObservationMessages} from './ObservationEdit';
+import {useBottomSheetModal} from '../sharedComponents/BottomSheetModal';
 
 const m = defineMessages({
   categoryTitle: {
@@ -41,17 +44,22 @@ export const PresetChooser: NativeNavigationComponent<'PresetChooser'> = ({
   const currentIndex = state.index;
   const routes = state.routes;
   const prevRouteNameInStack = routes[currentIndex - 1]?.name;
-
+  const {openSheet} = useBottomSheetModal({
+    openOnMount: false,
+  });
   React.useLayoutEffect(() => {
     navigation.setOptions({
       headerLeft: props =>
         prevRouteNameInStack === 'ObservationEdit' ? (
           <CustomHeaderLeft headerBackButtonProps={props} />
         ) : (
-          <CustomHeaderLeftClose headerBackButtonProps={props} />
+          <CustomHeaderLeftClose
+            openDiscardModal={openSheet}
+            headerBackButtonProps={props}
+          />
         ),
     });
-  }, [prevRouteNameInStack, CustomHeaderLeft, CustomHeaderLeftClose]);
+  }, [prevRouteNameInStack, openSheet, navigation]);
 
   const presetsList = !presets
     ? null
@@ -73,27 +81,43 @@ export const PresetChooser: NativeNavigationComponent<'PresetChooser'> = ({
   );
   const numColumns = Math.floor(Dimensions.get('window').width / MIN_COL_WIDTH);
 
+  // const handleDiscard = React.useCallback(() => {
+  //   closeSheet();
+  //   navigation.reset({index: 0, routes: [{name: 'Home'}]});
+  // }, [navigation, closeSheet]);
+
   return (
-    <View style={styles.container}>
-      <FlatList
-        initialNumToRender={rowsPerWindow}
-        keyExtractor={keyExtractor}
-        getItemLayout={getItemLayout}
-        windowSize={1}
-        maxToRenderPerBatch={numColumns}
-        removeClippedSubviews
-        style={{width: Dimensions.get('window').width}}
-        renderItem={({item}) => (
-          <Item
-            key={keyExtractor(item)}
-            item={item}
-            onSelect={handleSelectPreset}
-          />
-        )}
-        data={presetsList}
-        numColumns={numColumns}
-      />
-    </View>
+    <>
+      <View style={styles.container}>
+        <FlatList
+          initialNumToRender={rowsPerWindow}
+          keyExtractor={keyExtractor}
+          getItemLayout={getItemLayout}
+          windowSize={1}
+          maxToRenderPerBatch={numColumns}
+          removeClippedSubviews
+          style={{width: Dimensions.get('window').width}}
+          renderItem={({item}) => (
+            <Item
+              key={keyExtractor(item)}
+              item={item}
+              onSelect={handleSelectPreset}
+            />
+          )}
+          data={presetsList}
+          numColumns={numColumns}
+        />
+      </View>
+      {/* <DiscardModal
+        bottomSheetRef={sheetRef}
+        isOpen={isOpen}
+        closeSheet={closeSheet}
+        title={deleteObservationMessages.discardObservation}
+        description={deleteObservationMessages.discardObservationDescription}
+        discardButtonText={deleteObservationMessages.discardObservationButton}
+        handleDiscard={handleDiscard}
+      /> */}
+    </>
   );
 };