refactor: zones preferences

replace Formik with react-form-hook
cheminfo · Aug 26, 2024 · 34a916a · 34a916a
1 parent 4024e59
commit 34a916a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 58 deletions.
diff --git a/src/component/panels/ZonesPanel/ZonesPanel.tsx b/src/component/panels/ZonesPanel/ZonesPanel.tsx
@@ -13,6 +13,7 @@ import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZo
 import useSpectrum from '../../hooks/useSpectrum';
 import { booleanToString } from '../../utility/booleanToString';
 import { tablePanelStyle } from '../extra/BasicPanelStyle';
+import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
 import DefaultPanelHeader from '../header/DefaultPanelHeader';
 import PreferencesHeader from '../header/PreferencesHeader';
 
@@ -37,7 +38,7 @@ function ZonesPanelInner({
   const dispatch = useDispatch();
   const alert = useAlert();
   const [isFlipped, setFlipStatus] = useState(false);
-  const settingRef = useRef<any>();
+  const settingRef = useRef<SettingsRef | null>(null);
 
   const tableData = useMemo(() => {
     const isInView = (xFrom, xTo, yFrom, yTo) => {
@@ -143,9 +144,11 @@ function ZonesPanelInner({
     setFlipStatus(!isFlipped);
   }, [isFlipped]);
 
-  const saveSettingHandler = useCallback(() => {
-    settingRef.current.saveSetting();
-    setFlipStatus(false);
+  const saveSettingHandler = useCallback(async () => {
+    const isSettingValid = await settingRef.current?.saveSetting();
+    if (isSettingValid) {
+      setFlipStatus(false);
+    }
   }, []);
 
   const handleSetShowZones = () => {

diff --git a/src/component/panels/ZonesPanel/ZonesPreferences.tsx b/src/component/panels/ZonesPanel/ZonesPreferences.tsx
@@ -1,13 +1,5 @@
-import { Formik, FormikProps } from 'formik';
-import {
-  useEffect,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  forwardRef,
-  useMemo,
-  memo,
-} from 'react';
+import { useEffect, useCallback, forwardRef, useMemo, memo } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { usePreferences } from '../../context/PreferencesContext';
 import useNucleus from '../../hooks/useNucleus';
@@ -17,65 +9,67 @@ import { is2DNucleus } from '../../utility/nucleusToString';
 import {
   NucleusPreferences,
   NucleusPreferenceField,
-} from '../extra/preferences/NucleusPreferences';
+} from '../extra/preferences/NucleusPreferences2';
 import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
+import {
+  SettingsRef,
+  useSettingImperativeHandle,
+} from '../extra/utilities/settingImperativeHandle';
 
 const preferences1DFields: NucleusPreferenceField[] = [
   {
     id: 1,
     label: 'δ (ppm) :',
-    checkControllerName: 'deltaPPM.show',
-    formatControllerName: 'deltaPPM.format',
+    checkFieldName: 'deltaPPM.show',
+    formatFieldName: 'deltaPPM.format',
   },
 ];
 const preferences2DFields: NucleusPreferenceField[] = [
   {
     id: 1,
     label: 'Serial number:',
-    checkControllerName: 'showSerialNumber',
+    checkFieldName: 'showSerialNumber',
     hideFormatField: true,
   },
   {
     id: 2,
     label: 'Assignment label:',
-    checkControllerName: 'showAssignmentLabel',
+    checkFieldName: 'showAssignmentLabel',
     hideFormatField: true,
   },
   {
     id: 3,
     label: 'Kind:',
-    checkControllerName: 'showKind',
+    checkFieldName: 'showKind',
     hideFormatField: true,
   },
   {
     id: 4,
     label: 'Assignment links:',
-    checkControllerName: 'showAssignment',
+    checkFieldName: 'showAssignment',
     hideFormatField: true,
   },
   {
     id: 5,
     label: 'Delete action:',
-    checkControllerName: 'showDeleteAction',
+    checkFieldName: 'showDeleteAction',
     hideFormatField: true,
   },
   {
     id: 6,
     label: 'Zoom action:',
-    checkControllerName: 'showZoomAction',
+    checkFieldName: 'showZoomAction',
     hideFormatField: true,
   },
   {
     id: 7,
     label: 'Edit action :',
-    checkControllerName: 'showEditAction',
+    checkFieldName: 'showEditAction',
     hideFormatField: true,
   },
 ];
 
 function ZonesPreferences(props, ref) {
-  const formRef = useRef<FormikProps<any>>(null);
-
   const preferences = usePreferences();
   const nucleus = useNucleus();
   const nuclei2D = nucleus.filter((n) => is2DNucleus(n));
@@ -85,10 +79,6 @@ function ZonesPreferences(props, ref) {
     ...nuclei2D,
   ]);
 
-  useEffect(() => {
-    void formRef.current?.setValues(zonesPreferences);
-  }, [zonesPreferences]);
-
   const saveHandler = useCallback(
     (values) => {
       preferences.dispatch({
@@ -99,38 +89,36 @@ function ZonesPreferences(props, ref) {
     [preferences],
   );
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      saveSetting: () => {
-        void formRef.current?.submitForm();
-      },
-    }),
-    [],
-  );
+  const { handleSubmit, reset, control } = useForm<any>({
+    defaultValues: {},
+  });
+
+  useSettingImperativeHandle(ref, handleSubmit, saveHandler);
+
+  useEffect(() => {
+    reset(zonesPreferences);
+  }, [reset, zonesPreferences]);
 
   return (
     <PreferencesContainer>
-      <Formik initialValues={{}} onSubmit={saveHandler} innerRef={formRef}>
-        <>
-          {nuclei?.map((n) => (
-            <NucleusPreferences
-              key={n}
-              nucleus={n}
-              fields={preferences1DFields}
-            />
-          ))}
-          {nuclei2D?.map((n) => (
-            <NucleusPreferences
-              key={n}
-              nucleus={n}
-              fields={preferences2DFields}
-            />
-          ))}
-        </>
-      </Formik>
+      {nuclei?.map((n) => (
+        <NucleusPreferences
+          control={control}
+          key={n}
+          nucleus={n}
+          fields={preferences1DFields}
+        />
+      ))}
+      {nuclei2D?.map((n) => (
+        <NucleusPreferences
+          control={control}
+          key={n}
+          nucleus={n}
+          fields={preferences2DFields}
+        />
+      ))}
     </PreferencesContainer>
   );
 }
 
-export default memo(forwardRef(ZonesPreferences));
+export default memo(forwardRef<SettingsRef>(ZonesPreferences));