refactor: repalce useWatch hook with watch

cheminfo · Nov 20, 2024 · eafab85 · eafab85
1 parent 04bf6e3
commit eafab85
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 41 deletions.
diff --git a/src/component/modal/setting/settings-tabs/DatabasesTabContent.tsx b/src/component/modal/setting/settings-tabs/DatabasesTabContent.tsx
@@ -4,7 +4,7 @@ import { css } from '@emotion/react';
 import { v4 } from '@lukeed/uuid';
 import type { CustomWorkspaces, Database } from 'nmr-load-save';
 import { useCallback, useMemo } from 'react';
-import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 import { FaLink, FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
@@ -34,12 +34,10 @@ function DatabasesTabContent({
   currentWorkspace,
   originalWorkspaces,
 }: DatabasesTabContentProps) {
-  const { setValue, register, control } = useFormContext<WorkspaceWithSource>();
+  const { setValue, register, control, watch } =
+    useFormContext<WorkspaceWithSource>();
 
-  const databases: Database[] = useWatch({
-    name: 'databases.data',
-    defaultValue: [],
-  });
+  const databases: Database[] = watch('databases.data') || [];
 
   const addHandler = useCallback(
     (data: readonly any[], index = 0) => {

diff --git a/src/component/modal/setting/settings-tabs/ExportTabContent.tsx b/src/component/modal/setting/settings-tabs/ExportTabContent.tsx
@@ -14,7 +14,7 @@ import type {
   ExportSettings,
 } from 'nmr-load-save';
 import { useState } from 'react';
-import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 
 import { CheckController } from '../../../elements/CheckController.js';
 import Label from '../../../elements/Label.js';
@@ -79,12 +79,10 @@ export function ExportOptions(props: ExportOptionsProps) {
     control,
     formState: { isValid, errors },
     getValues,
+    watch,
   } = useFormContext<WorkspaceWithSource>();
   const defaultValue = getValues(path);
-  const currentOptions = useWatch({
-    name: path,
-    defaultValue,
-  });
+  const currentOptions = watch(path) || defaultValue;
 
   const {
     dpi = 0,

diff --git a/src/component/modal/setting/settings-tabs/ExternalAPIsTabContent.tsx b/src/component/modal/setting/settings-tabs/ExternalAPIsTabContent.tsx
@@ -2,7 +2,7 @@ import { Classes } from '@blueprintjs/core';
 import type { ExternalAPI } from 'nmr-load-save';
 import { EXTERNAL_API_KEYS } from 'nmr-load-save';
 import { useCallback, useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
@@ -22,12 +22,9 @@ function getKeyPath<T extends keyof ExternalAPI>(
 }
 
 export function ExternalAPIsTabContent() {
-  const { control, setValue } = useFormContext<WorkspaceWithSource>();
+  const { control, setValue, watch } = useFormContext<WorkspaceWithSource>();
 
-  const fields: ExternalAPI[] = useWatch({
-    name: 'externalAPIs',
-    defaultValue: [],
-  });
+  const fields: ExternalAPI[] = watch('externalAPIs') || [];
 
   const addHandler = useCallback(
     (data: readonly any[], index: number) => {

diff --git a/src/component/modal/setting/settings-tabs/InfoBlockTabContent.tsx b/src/component/modal/setting/settings-tabs/InfoBlockTabContent.tsx
@@ -1,7 +1,7 @@
 import { Checkbox, Classes } from '@blueprintjs/core';
 import type { InfoBlockField } from 'nmr-load-save';
 import { useCallback, useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
@@ -24,16 +24,14 @@ function getKeyPath<T extends keyof InfoBlockField>(
 }
 
 function InfoBlockTabContent() {
-  const { control, setValue, register } = useFormContext<WorkspaceWithSource>();
+  const { control, setValue, register, watch } =
+    useFormContext<WorkspaceWithSource>();
   const { data } = useChartData();
   const { datalist, paths } = useMemo(
     () => getSpectraObjectPaths(data),
     [data],
   );
-  const fields: InfoBlockField[] = useWatch({
-    name: 'infoBlock.fields',
-    defaultValue: [],
-  });
+  const fields: InfoBlockField[] = watch('infoBlock.fields') || [];
 
   const addHandler = useCallback(
     (data: readonly any[], index: number) => {

diff --git a/src/component/modal/setting/settings-tabs/NucleiTabContent.tsx b/src/component/modal/setting/settings-tabs/NucleiTabContent.tsx
@@ -1,7 +1,7 @@
 import { Classes } from '@blueprintjs/core';
 import type { NucleiPreferences } from 'nmr-load-save';
 import { useCallback, useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
@@ -21,12 +21,9 @@ function getKeyPath<T extends keyof NucleiPreferences>(
 }
 
 function NucleiTabContent() {
-  const { control, setValue } = useFormContext<WorkspaceWithSource>();
+  const { control, setValue, watch } = useFormContext<WorkspaceWithSource>();
 
-  const fields: NucleiPreferences[] =
-    useWatch({
-      name: 'nuclei',
-    }) || [];
+  const fields: NucleiPreferences[] = watch('nuclei') || [];
 
   const addHandler = useCallback(
     (data: readonly any[], index: number) => {

diff --git a/src/component/modal/setting/settings-tabs/OnLoadProcessingTabContent.tsx b/src/component/modal/setting/settings-tabs/OnLoadProcessingTabContent.tsx
@@ -3,7 +3,7 @@ import type {
   WorkspacePreferences,
   AutoProcessingFilterEntry,
 } from 'nmr-load-save';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 
 import IsotopesViewer from '../../../elements/IsotopesViewer.js';
 import Label from '../../../elements/Label.js';
@@ -13,12 +13,10 @@ import type { WorkspaceWithSource } from '../../../reducer/preferences/preferenc
 import { getFilterLabel } from '../../../../data/getFilterLabel.js';
 
 function OnLoadProcessingTabContent() {
-  const { register } = useFormContext<WorkspacePreferences>();
+  const { register, watch } = useFormContext<WorkspacePreferences>();
 
-  const isExperimentalFeatures = useWatch({
-    name: 'display.general.experimentalFeatures.display',
-    defaultValue: false,
-  });
+  const isExperimentalFeatures =
+    watch('display.general.experimentalFeatures.display') || false;
   return (
     <div>
       <Label

diff --git a/src/component/modal/setting/settings-tabs/SpectraColorsTabContent.tsx b/src/component/modal/setting/settings-tabs/SpectraColorsTabContent.tsx
@@ -2,7 +2,7 @@ import { Classes } from '@blueprintjs/core';
 import type { SpectraColors } from 'nmr-load-save';
 import type { CSSProperties } from 'react';
 import { useCallback, useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
@@ -36,16 +36,14 @@ function getKeyPath(key: SpectraColorsKeys, index: number, fieldKey: string) {
 }
 
 function SpectraColorsTabContent() {
-  const { setValue, control } = useFormContext<WorkspaceWithSource>();
+  const { setValue, control, watch } = useFormContext<WorkspaceWithSource>();
   const { data } = useChartData();
   const { datalist, paths } = useMemo(
     () => getSpectraObjectPaths(data),
     [data],
   );
-  const { oneDimension = [], twoDimensions = [] }: SpectraColors = useWatch({
-    name: 'spectraColors',
-    defaultValue: {},
-  });
+  const { oneDimension = [], twoDimensions = [] }: SpectraColors =
+    watch('spectraColors') || {};
 
   const addHandler = useCallback(
     (data: readonly any[], index: number, key: SpectraColorsKeys) => {