fix: close the 'range editing' model of the range or spectra deleted

cheminfo · Jun 23, 2023 · 0bc6183 · 0bc6183
1 parent ce1ee2c
commit 0bc6183
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 61 deletions.
diff --git a/src/component/modal/editRange/EditRangeModal.tsx b/src/component/modal/editRange/EditRangeModal.tsx
@@ -4,7 +4,7 @@ import { v4 } from '@lukeed/uuid';
 import { Formik } from 'formik';
 import { Spectrum1D } from 'nmr-load-save';
 import { Range, splitPatterns, translateMultiplet } from 'nmr-processing';
-import { useMemo, useCallback, useRef } from 'react';
+import { useMemo, useCallback, useRef, useEffect } from 'react';
 import { FaSearchPlus } from 'react-icons/fa';
 
 import { useChartData } from '../../context/ChartContext';
@@ -57,11 +57,11 @@ const styles = css`
 `;
 
 interface EditRangeModalProps {
-  onSaveEditRangeModal: (value: any) => Promise<void> | null | void;
-  onCloseEditRangeModal: (range: any, originalRange: any) => void;
-  onZoomEditRangeModal: (value: any) => void;
-  range: any;
-  manualRange?: boolean;
+  onSave: (value: any) => Promise<void> | null | void;
+  onClose?: () => void;
+  onRest: (originalRange: Range) => void;
+  onZoom: (value: any) => void;
+  rangeId: string;
 }
 
 interface Coupling {
@@ -70,11 +70,11 @@ interface Coupling {
 }
 
 function EditRangeModal({
-  onSaveEditRangeModal = () => null,
-  onCloseEditRangeModal = () => null,
-  onZoomEditRangeModal = () => null,
-  manualRange = false,
-  range: originRange,
+  onSave,
+  onClose,
+  onZoom,
+  onRest,
+  rangeId,
 }: EditRangeModalProps) {
   const formRef = useRef<any>(null);
   const {
@@ -83,15 +83,35 @@ function EditRangeModal({
     },
   } = useChartData();
   const dispatch = useDispatch();
+  const range = useRange(rangeId);
+  const originalRangeRef = useRef(range);
   const rangesPreferences = usePanelPreferences('ranges', activeTab);
-  const range = useRange(originRange, manualRange);
+
   const handleOnZoom = useCallback(() => {
-    onZoomEditRangeModal(range);
-  }, [onZoomEditRangeModal, range]);
+    onZoom(range);
+  }, [onZoom, range]);
+
+  useEffect(() => {
+    dispatch({
+      type: 'SET_SELECTED_TOOL',
+      payload: {
+        selectedTool: 'zoom',
+      },
+    });
+    if (!range) {
+      onClose?.();
+    }
+  }, [activeTab, dispatch, onClose, range]);
 
   const handleOnClose = useCallback(() => {
-    onCloseEditRangeModal(range, originRange);
-  }, [onCloseEditRangeModal, originRange, range]);
+    dispatch({
+      type: 'SET_SELECTED_TOOL',
+      payload: {
+        selectedTool: 'zoom',
+      },
+    });
+    onRest(originalRangeRef.current);
+  }, [dispatch, onRest]);
 
   const getCouplings = useCallback(
     (couplings) =>
@@ -127,10 +147,10 @@ function EditRangeModal({
       void (async () => {
         const _range = { ...range };
         _range.signals = getSignals(formValues.signals);
-        await onSaveEditRangeModal(_range);
+        await onSave(_range);
       })();
     },
-    [getSignals, onSaveEditRangeModal, range],
+    [getSignals, onSave, range],
   );
 
   const data = useMemo(() => {
@@ -159,7 +179,7 @@ function EditRangeModal({
       return { ...signal, js: couplings };
     });
     return { activeTab: '0', signals };
-  }, [range?.signals, rangesPreferences.coupling.format]);
+  }, [range?.signals, rangesPreferences]);
 
   const changeHandler = useCallback(
     (values) => {
@@ -182,6 +202,10 @@ function EditRangeModal({
     [dispatch, getSignals, range],
   );
 
+  if (!rangesPreferences || !range) {
+    return;
+  }
+
   return (
     <div css={styles}>
       <div className="header handle">
@@ -224,13 +248,14 @@ function EditRangeModal({
   );
 }
 
-function useRange(range: Range, isNew: boolean) {
+function useRange(rangeId: string) {
   const { ranges } = useSpectrum({
     ranges: { values: [] },
   }) as Spectrum1D;
 
-  const id = isNew ? 'new' : range.id;
-  const index = ranges.values.findIndex((rangeRecord) => rangeRecord.id === id);
+  const index = ranges.values.findIndex(
+    (rangeRecord) => rangeRecord.id === rangeId,
+  );
   return ranges.values[index];
 }
 

diff --git a/src/component/panels/RangesPanel/hooks/useEditRangeModal.tsx b/src/component/panels/RangesPanel/hooks/useEditRangeModal.tsx
@@ -77,51 +77,45 @@ export default function useEditRangeModal(range?: RangeData) {
     [assignmentData, dispatch, modal],
   );
 
-  const closeEditRangeHandler = useCallback(
-    (range: Partial<{ id: string }>, originalRange) => {
-      if (range.id === 'new') {
-        deleteRange(range.id, true);
-      } else {
-        saveEditRangeHandler(originalRange, false);
-      }
+  const resetHandler = useCallback(
+    (originalRange) => {
+      saveEditRangeHandler(originalRange, false);
       modal.close();
     },
-    [deleteRange, modal, saveEditRangeHandler],
+    [modal, saveEditRangeHandler],
   );
 
-  const editRange = useCallback(
-    (isManual = false) => {
-      dispatch({
-        type: 'SET_SELECTED_TOOL',
-        payload: { selectedTool: 'editRange' },
-      });
+  const editRange = useCallback(() => {
+    if (!range?.id) return;
 
-      modal.show(
-        <EditRangeModal
-          onCloseEditRangeModal={closeEditRangeHandler}
-          onSaveEditRangeModal={saveEditRangeHandler}
-          onZoomEditRangeModal={zoomRange}
-          range={isManual ? {} : range}
-          manualRange={isManual}
-        />,
-        {
-          position: positions.MIDDLE_RIGHT,
-          transition: transitions.SCALE,
-          isBackgroundBlur: false,
-        },
-      );
+    dispatch({
+      type: 'SET_SELECTED_TOOL',
+      payload: { selectedTool: 'editRange' },
+    });
 
-      zoomRange();
-    },
-    [
-      closeEditRangeHandler,
-      dispatch,
-      modal,
-      range,
-      saveEditRangeHandler,
-      zoomRange,
-    ],
-  );
+    modal.show(
+      <EditRangeModal
+        onRest={resetHandler}
+        onSave={saveEditRangeHandler}
+        onZoom={zoomRange}
+        rangeId={range?.id}
+      />,
+      {
+        position: positions.MIDDLE_RIGHT,
+        transition: transitions.SCALE,
+        isBackgroundBlur: false,
+      },
+    );
+
+    zoomRange();
+  }, [
+    dispatch,
+    modal,
+    range?.id,
+    resetHandler,
+    saveEditRangeHandler,
+    zoomRange,
+  ]);
 
   return useMemo(
     () => ({