refactor: peaks preferences

replace Formik with react-form-hook
cheminfo · Aug 26, 2024 · fc4b03c · fc4b03c
1 parent a4d5f68
commit fc4b03c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 52 deletions.
diff --git a/src/component/panels/PeaksPanel/PeaksPanel.tsx b/src/component/panels/PeaksPanel/PeaksPanel.tsx
@@ -20,6 +20,7 @@ import useSpectrum from '../../hooks/useSpectrum';
 import { booleanToString } from '../../utility/booleanToString';
 import { FilterType } from '../../utility/filterType';
 import { tablePanelStyle } from '../extra/BasicPanelStyle';
+import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
 import DefaultPanelHeader, {
   ToolbarItemProps,
 } from '../header/DefaultPanelHeader';
@@ -57,7 +58,7 @@ function PeaksPanelInner({
   const toaster = useToaster();
   const isExperimental = useCheckExperimentalFeature();
 
-  const settingRef = useRef<any>();
+  const settingRef = useRef<SettingsRef | null>(null);
 
   const yesHandler = useCallback(() => {
     dispatch({ type: 'DELETE_PEAK', payload: {} });
@@ -77,10 +78,12 @@ function PeaksPanelInner({
     setFlipStatus(!isFlipped);
   }, [isFlipped]);
 
-  const saveSettingHandler = useCallback(() => {
-    settingRef.current.saveSetting();
-    setFlipStatus(false);
-  }, []);
+  async function saveSettingHandler() {
+    const isSettingsValid = await settingRef.current?.saveSetting();
+    if (isSettingsValid) {
+      setFlipStatus(false);
+    }
+  }
 
   const handleOnFilter = useCallback(() => {
     setFilterIsActive(!filterIsActive);

diff --git a/src/component/panels/PeaksPanel/PeaksPreferences.tsx b/src/component/panels/PeaksPanel/PeaksPreferences.tsx
@@ -1,12 +1,5 @@
-import { Formik } from 'formik';
-import {
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  memo,
-  forwardRef,
-  useMemo,
-} from 'react';
+import { useCallback, memo, forwardRef, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { usePreferences } from '../../context/PreferencesContext';
 import useNucleus from '../../hooks/useNucleus';
@@ -15,73 +8,73 @@ import { getUniqueNuclei } from '../../utility/getUniqueNuclei';
 import {
   NucleusPreferences,
   NucleusPreferenceField,
-} from '../extra/preferences/NucleusPreferences';
+} from '../extra/preferences/NucleusPreferences2';
 import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
+import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle';
 
 const formatFields: NucleusPreferenceField[] = [
   {
     id: 1,
     label: 'Serial number :',
-    checkControllerName: 'showSerialNumber',
+    checkFieldName: 'showSerialNumber',
     hideFormatField: true,
   },
   {
     id: 2,
     label: 'δ (ppm) :',
-    checkControllerName: 'deltaPPM.show',
-    formatControllerName: 'deltaPPM.format',
+    checkFieldName: 'deltaPPM.show',
+    formatFieldName: 'deltaPPM.format',
   },
   {
     id: 3,
     label: 'δ (Hz) :',
-    checkControllerName: 'deltaHz.show',
-    formatControllerName: 'deltaHz.format',
+    checkFieldName: 'deltaHz.show',
+    formatFieldName: 'deltaHz.format',
   },
   {
     id: 4,
     label: 'Peak Width (Hz)',
-    checkControllerName: 'peakWidth.show',
-    formatControllerName: 'peakWidth.format',
+    checkFieldName: 'peakWidth.show',
+    formatFieldName: 'peakWidth.format',
   },
   {
     id: 5,
     label: 'Intensity :',
-    checkControllerName: 'intensity.show',
-    formatControllerName: 'intensity.format',
+    checkFieldName: 'intensity.show',
+    formatFieldName: 'intensity.format',
   },
   {
     id: 6,
     label: 'kind :',
-    checkControllerName: 'fwhm.show',
+    checkFieldName: 'fwhm.show',
   },
   {
     id: 7,
     label: 'fwhm :',
-    checkControllerName: 'fwhm.show',
-    formatControllerName: 'fwhm.format',
+    checkFieldName: 'fwhm.show',
+    formatFieldName: 'fwhm.format',
   },
   {
     id: 8,
     label: 'mu :',
-    checkControllerName: 'mu.show',
-    formatControllerName: 'mu.format',
+    checkFieldName: 'mu.show',
+    formatFieldName: 'mu.format',
   },
   {
     id: 9,
     label: 'Delete action :',
-    checkControllerName: 'showDeleteAction',
+    checkFieldName: 'showDeleteAction',
     hideFormatField: true,
   },
   {
     id: 10,
     label: 'Edit peak shape action :',
-    checkControllerName: 'showEditPeakShapeAction',
+    checkFieldName: 'showEditPeakShapeAction',
     hideFormatField: true,
   },
 ];
 
 function PeaksPreferences(props, ref: any) {
-  const formRef = useRef<any>(null);
   const preferences = usePreferences();
   const nucleus = useNucleus();
   const nuclei = useMemo(() => getUniqueNuclei(nucleus), [nucleus]);
@@ -97,29 +90,22 @@ function PeaksPreferences(props, ref: any) {
     [preferences],
   );
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      saveSetting: () => {
-        formRef.current.submitForm();
-      },
-    }),
-    [],
-  );
+  const { handleSubmit, control } = useForm<any>({
+    defaultValues: preferencesByNuclei,
+  });
+
+  useSettingImperativeHandle(ref, handleSubmit, saveHandler);
 
   return (
     <PreferencesContainer>
-      <Formik
-        initialValues={preferencesByNuclei}
-        onSubmit={saveHandler}
-        innerRef={formRef}
-      >
-        <>
-          {nuclei?.map((n) => (
-            <NucleusPreferences key={n} nucleus={n} fields={formatFields} />
-          ))}
-        </>
-      </Formik>
+      {nuclei?.map((n) => (
+        <NucleusPreferences
+          control={control}
+          key={n}
+          nucleus={n}
+          fields={formatFields}
+        />
+      ))}
     </PreferencesContainer>
   );
 }