Remove useState in favor of Form.useWatch

Author: dolfinus

src/entities/connection/ui/ConnectionTypeForm/components/ConnectionOracle/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 import { Form, Input, InputNumber } from 'antd';
 import { useTranslation } from 'react-i18next';
 
@@ -9,30 +9,19 @@ export const ConnectionOracle = () => {
   const { t } = useTranslation('connection');
   const form = Form.useFormInstance();
 
-  const [isServiceNameDisabled, setServiceNameDisabled] = useState(false);
-  const [isSidDisabled, setSidDisabled] = useState(false);
+  Form.useWatch(['connection_data', 'service_name'], form);
+  Form.useWatch(['connection_data', 'sid'], form);
 
-  const changeDisabledFields = useCallback(() => {
-    const serviceName = form.getFieldValue(['connection_data', 'service_name']);
-    const sid = form.getFieldValue(['connection_data', 'sid']);
-    setServiceNameDisabled(!!sid);
-    setSidDisabled(!!serviceName);
-  }, [form]);
+  const serviceName = form.getFieldValue(['connection_data', 'service_name']);
+  const sid = form.getFieldValue(['connection_data', 'sid']);
 
   const handleFieldChange = () => {
-    changeDisabledFields();
     form.validateFields([
       ['connection_data', 'service_name'],
       ['connection_data', 'sid'],
     ]);
   };
 
-  //* It needs to validate required fields service_name and sid correctly if they have initial values
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    changeDisabledFields();
-  }, [changeDisabledFields]);
-
   return (
     <>
       <Form.Item label={t('host')} name={['connection_data', 'host']} rules={[{ required: true }]}>
@@ -46,24 +35,24 @@ export const ConnectionOracle = () => {
         name={['connection_data', 'service_name']}
         rules={[
           {
-            required: !isServiceNameDisabled,
+            required: !sid,
             message: t('oracle.serviceNameOrSidRequired'),
           },
         ]}
       >
-        <Input size="large" disabled={isServiceNameDisabled} onChange={handleFieldChange} placeholder="XEPDB1" />
+        <Input size="large" disabled={!!sid} onChange={handleFieldChange} placeholder="XEPDB1" />
       </Form.Item>
       <Form.Item
         label={t('oracle.sid')}
         name={['connection_data', 'sid']}
         rules={[
           {
-            required: !isSidDisabled,
+            required: !serviceName,
             message: t('oracle.serviceNameOrSidRequired'),
           },
         ]}
       >
-        <Input size="large" disabled={isSidDisabled} onChange={handleFieldChange} />
+        <Input size="large" disabled={!!serviceName} onChange={handleFieldChange} />
       </Form.Item>
       <ConnectionAuthBasic />
     </>

src/features/transfer/MutateTransferForm/components/StrategyParams/components/StrategyTypeForm/index.tsx

@@ -1,6 +1,7 @@
-import React, { useLayoutEffect, useState } from 'react';
+import React from 'react';
 import { Select } from '@shared/ui';
 import { Form } from 'antd';
+import { TransferStrategyType } from '@entities/transfer';
 import { ConnectionType } from '@shared/types';
 import { useTranslation } from 'react-i18next';
 
@@ -11,31 +12,13 @@ export const StrategyTypeForm = ({ sourceConnectionType }: StrategyTypeFormProps
   const { t } = useTranslation('transfer');
   const strategyParamsSelectOptions = useGetStrategyParamsSelectOptions();
 
-  const [isDisabled, setDisabled] = useState(false);
   const formInstance = Form.useFormInstance();
+  Form.useWatch(['strategy_params', 'type'], formInstance);
 
-  // change strategy_params type value and disabled field state depending on source connection type
-  useLayoutEffect(() => {
-    switch (sourceConnectionType) {
-      case ConnectionType.HDFS:
-      case ConnectionType.S3:
-        // eslint-disable-next-line react-hooks/set-state-in-effect
-        setDisabled(true);
-        return formInstance.setFieldValue(['strategy_params', 'type'], 'full');
-      case ConnectionType.CLICKHOUSE:
-      case ConnectionType.FTP:
-      case ConnectionType.FTPS:
-      case ConnectionType.HIVE:
-      case ConnectionType.MSSQL:
-      case ConnectionType.MYSQL:
-      case ConnectionType.ORACLE:
-      case ConnectionType.POSTGRES:
-      case ConnectionType.SAMBA:
-      case ConnectionType.SFTP:
-      case ConnectionType.WEBDAV:
-        return setDisabled(false);
-    }
-  }, [formInstance, sourceConnectionType]);
+  const supportsOnlyFull = sourceConnectionType === ConnectionType.HDFS || sourceConnectionType === ConnectionType.S3;
+  if (supportsOnlyFull) {
+    formInstance.setFieldValue(['strategy_params', 'type'], TransferStrategyType.FULL);
+  }
 
   return (
     <Form.Item
@@ -48,7 +31,7 @@ export const StrategyTypeForm = ({ sourceConnectionType }: StrategyTypeFormProps
         size="large"
         options={strategyParamsSelectOptions}
         placeholder={t('selectStrategy')}
-        disabled={isDisabled}
+        disabled={supportsOnlyFull}
       />
     </Form.Item>
   );