feat: update header with new UI (#312)

* chore: update header to include modal * chore: translations * chore: missing dependencies * chore: update save icon * chore: delete old save icon * chore: update use of save icon * chore: destructure foruseEffect dependecy
digidem · May 1, 2024 · 1dd8130 · 1dd8130
1 parent 9750502
commit 1dd8130
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 132 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -3,17 +3,23 @@
     "description": "Button on dialog to keep editing (cancelling close action)",
     "message": "Continue editing"
   },
-  "AppContainer.EditHeader.discardChangesContent": {
-    "description": "Button on dialog to cancel observation edits",
+  "AppContainer.EditHeader.discardChangesButton": {
+    "description": "Title of dialog that shows when cancelling observation edits",
     "message": "Discard changes"
   },
+  "AppContainer.EditHeader.discardChangesDescription": {
+    "message": "Your changes will not be saved. This cannot be undone."
+  },
   "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.discardObservationButton": {
+    "description": "Title of dialog that shows when cancelling observation edits",
+    "message": "Discard Observation"
+  },
+  "AppContainer.EditHeader.discardObservationDescription": {
+    "message": "Your Observation will not be saved. This cannot be undone."
   },
   "AppContainer.EditHeader.discardTitle": {
     "description": "Title of dialog that shows when cancelling a new observation",

diff --git a/src/frontend/images/CheckMark.svg b/src/frontend/images/CheckMark.svg
diff --git a/src/frontend/screens/ObservationEdit/SaveButton.tsx b/src/frontend/screens/ObservationEdit/SaveButton.tsx
@@ -4,7 +4,6 @@ import debug from 'debug';
 import {defineMessages, useIntl} from 'react-intl';
 
 import {IconButton} from '../../sharedComponents/IconButton';
-import {SaveIcon} from '../../sharedComponents/icons/SaveIcon';
 import {useNavigationFromRoot} from '../../hooks/useNavigationWithTypes';
 import {usePersistedDraftObservation} from '../../hooks/persistedState/usePersistedDraftObservation';
 import {useCreateObservation} from '../../hooks/server/observations';
@@ -14,6 +13,7 @@ import {useCreateBlobMutation} from '../../hooks/server/media';
 import {DraftPhoto, Photo} from '../../contexts/PhotoPromiseContext/types';
 import {useDraftObservation} from '../../hooks/useDraftObservation';
 import {useCurrentTrackStore} from '../../hooks/tracks/useCurrentTrackStore';
+import SaveCheck from '../../images/CheckMark.svg';
 
 const m = defineMessages({
   noGpsTitle: {
@@ -242,7 +242,7 @@ export const SaveButton = ({
     </View>
   ) : (
     <IconButton onPress={handleSavePress} testID="saveButton">
-      <SaveIcon inprogress={false} />
+      <SaveCheck />
     </IconButton>
   );
 };

diff --git a/src/frontend/screens/ObservationEdit/index.tsx b/src/frontend/screens/ObservationEdit/index.tsx
@@ -56,9 +56,9 @@ export const ObservationEdit: NativeNavigationComponent<'ObservationEdit'> & {
     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 = [
     {

diff --git a/src/frontend/screens/PresetChooser.tsx b/src/frontend/screens/PresetChooser.tsx
@@ -51,7 +51,7 @@ export const PresetChooser: NativeNavigationComponent<'PresetChooser'> = ({
           <CustomHeaderLeftClose headerBackButtonProps={props} />
         ),
     });
-  }, [prevRouteNameInStack, CustomHeaderLeft, CustomHeaderLeftClose]);
+  }, [prevRouteNameInStack, navigation]);
 
   const presetsList = !presets
     ? null

diff --git a/src/frontend/screens/Settings/ProjectSettings/DeviceName/EditScreen.tsx b/src/frontend/screens/Settings/ProjectSettings/DeviceName/EditScreen.tsx
@@ -13,7 +13,7 @@ import {
 import {BLACK} from '../../../../lib/styles';
 import {HookFormTextInput} from '../../../../sharedComponents/HookFormTextInput';
 import {IconButton} from '../../../../sharedComponents/IconButton';
-import {SaveIcon} from '../../../../sharedComponents/icons';
+import SaveIcon from '../../../../images/CheckMark.svg';
 import {useBottomSheetModal} from '../../../../sharedComponents/BottomSheetModal';
 import {ErrorModal} from '../../../../sharedComponents/ErrorModal';
 import {FieldRow} from './FieldRow';
@@ -72,14 +72,16 @@ export const EditScreen = ({
     deviceName: string;
   }>({defaultValues: {deviceName}});
 
-  const editDeviceInfoMutation = useEditDeviceInfo();
+  const {isPending, mutate} = useEditDeviceInfo();
 
   const {isDirty: nameHasChanges} = control.getFieldState(
     'deviceName',
     formState,
   );
 
-  const errorModal = useBottomSheetModal({openOnMount: false});
+  const {openSheet, sheetRef, closeSheet, isOpen} = useBottomSheetModal({
+    openOnMount: false,
+  });
 
   React.useEffect(
     function showDiscardChangesAlert() {
@@ -117,41 +119,30 @@ export const EditScreen = ({
           return (
             <IconButton
               onPress={
-                editDeviceInfoMutation.isPending
+                isPending
                   ? () => {}
                   : handleSubmit(async value => {
                       if (!nameHasChanges) {
                         navigation.navigate('DeviceNameDisplay');
                         return;
                       }
 
-                      editDeviceInfoMutation.mutate(value.deviceName, {
+                      mutate(value.deviceName, {
                         onSuccess: () =>
                           navigation.navigate('DeviceNameDisplay'),
                         onError: () => {
-                          errorModal.openSheet();
+                          openSheet();
                         },
                       });
                     })
               }>
-              {editDeviceInfoMutation.isPending ? (
-                <UIActivityIndicator size={30} />
-              ) : (
-                <SaveIcon />
-              )}
+              {isPending ? <UIActivityIndicator size={30} /> : <SaveIcon />}
             </IconButton>
           );
         },
       });
     },
-    [
-      handleSubmit,
-      navigation,
-      editDeviceInfoMutation.mutate,
-      editDeviceInfoMutation.isPending,
-      nameHasChanges,
-      errorModal.openSheet,
-    ],
+    [handleSubmit, navigation, isPending, mutate, nameHasChanges, openSheet],
   );
 
   return (
@@ -168,15 +159,11 @@ export const EditScreen = ({
             style={{flex: 1, color: BLACK, fontSize: 16}}
             showCharacterCount
             autoFocus
-            editable={!editDeviceInfoMutation.isPending}
+            editable={isPending}
           />
         </FieldRow>
       </ScrollView>
-      <ErrorModal
-        sheetRef={errorModal.sheetRef}
-        closeSheet={errorModal.closeSheet}
-        isOpen={errorModal.isOpen}
-      />
+      <ErrorModal sheetRef={sheetRef} closeSheet={closeSheet} isOpen={isOpen} />
     </>
   );
 };