Make port placeholder depends on selected protocol

Author: dolfinus

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

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Form, InputNumber, Radio, RadioChangeEvent } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
+
+export const ConnectionHttpProtocol = () => {
+  const { t } = useTranslation('connection');
+
+  const formInstance = Form.useFormInstance();
+  Form.useWatch('protocol', formInstance);
+
+  const [defaultPort, setDefaultPort] = useState("443");
+
+  const handleProtocolChange = (e: RadioChangeEvent) => {
+    if (e.target.value === 'https') {
+      setDefaultPort("443");
+    } else {
+      setDefaultPort("80");
+    }
+  }
+
+  return (
+    <>
+      <Form.Item
+        label={t('protocol')}
+        name={['connection_data', 'protocol']}
+        rules={[{ required: true }]}
+        initialValue="https"
+      >
+          <Radio.Group onChange={handleProtocolChange}>
+            <Radio.Button value="http">HTTP</Radio.Button>
+            <Radio.Button value="https">HTTPS</Radio.Button>
+          </Radio.Group>
+      </Form.Item>
+      <Form.Item label={t('port')} name={['connection_data', 'port']}>
+        <InputNumber size="large" min={MIN_ALLOWED_PORT} max={MAX_ALLOWED_PORT} placeholder={defaultPort} />
+      </Form.Item>
+    </>
+  );
+};

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Form, Input, InputNumber, Radio } from 'antd';
+import { Form, Input, Radio } from 'antd';
 import { useTranslation } from 'react-i18next';
 
-import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
 import { ConnectionAuthS3 } from '../ConnectionAuthS3';
+import { ConnectionHttpProtocol } from '../ConnectionHttpProtocol';
 
 export const ConnectionS3 = () => {
   const { t } = useTranslation('connection');
@@ -13,20 +13,7 @@ export const ConnectionS3 = () => {
       <Form.Item label={t('host')} name={['connection_data', 'host']} rules={[{ required: true }]}>
         <Input size="large" placeholder="s3.mycompany.com" />
       </Form.Item>
-      <Form.Item
-        label={t('protocol')}
-        name={['connection_data', 'protocol']}
-        rules={[{ required: true }]}
-        initialValue="https"
-      >
-        <Radio.Group>
-          <Radio.Button value="http">HTTP</Radio.Button>
-          <Radio.Button value="httpS">HTTPS</Radio.Button>
-        </Radio.Group>
-      </Form.Item>
-      <Form.Item label={t('port')} name={['connection_data', 'port']}>
-        <InputNumber size="large" min={MIN_ALLOWED_PORT} max={MAX_ALLOWED_PORT} placeholder="443" />
-      </Form.Item>
+      <ConnectionHttpProtocol />
       <Form.Item label={t('s3.bucketStyle')} name={['connection_data', 'bucket_style']} rules={[{ required: true }]} initialValue="domain">
         <Radio.Group>
           <Radio.Button value="domain">bucket.s3.mycompany.com</Radio.Button>

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

@@ -1,12 +1,25 @@
-import React from 'react';
-import { Form, Input, InputNumber, Radio } from 'antd';
+import React, { useState } from 'react';
+import { Form, Input, InputNumber, Radio, RadioChangeEvent } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
 import { ConnectionAuthSamba } from '../ConnectionAuthSamba';
 
 export const ConnectionSamba = () => {
   const { t } = useTranslation('connection');
+  
+  const formInstance = Form.useFormInstance();
+  Form.useWatch('protocol', formInstance);
+
+  const [defaultPort, setDefaultPort] = useState("445");
+
+  const handleProtocolChange = (e: RadioChangeEvent) => {
+    if (e.target.value === 'SMB') {
+      setDefaultPort("445");
+    } else {
+      setDefaultPort("139");
+    }
+  }
 
   return (
     <>
@@ -19,13 +32,13 @@ export const ConnectionSamba = () => {
         rules={[{ required: true }]}
         initialValue="SMB"
       >
-        <Radio.Group>
+        <Radio.Group onChange={handleProtocolChange}>
           <Radio.Button value="NetBIOS">NetBIOS</Radio.Button>
           <Radio.Button value="SMB">SMB</Radio.Button>
         </Radio.Group>
       </Form.Item>
       <Form.Item label={t('port')} name={['connection_data', 'port']}>
-        <InputNumber size="large" min={MIN_ALLOWED_PORT} max={MAX_ALLOWED_PORT} placeholder="445" />
+        <InputNumber size="large" min={MIN_ALLOWED_PORT} max={MAX_ALLOWED_PORT} placeholder={defaultPort} />
       </Form.Item>
       <Form.Item label={t('samba.share')} name={['connection_data', 'share']} rules={[{ required: true }]}>
         <Input size="large" placeholder="MYSHARE" />

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Form, Input, InputNumber, Radio } from 'antd';
+import { Form, Input } from 'antd';
 import { useTranslation } from 'react-i18next';
 
-import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
 import { ConnectionAuthBasic } from '../ConnectionAuthBasic';
+import { ConnectionHttpProtocol } from '../ConnectionHttpProtocol';
 
 export const ConnectionWebdav = () => {
   const { t } = useTranslation('connection');
@@ -13,20 +13,7 @@ export const ConnectionWebdav = () => {
       <Form.Item label={t('host')} name={['connection_data', 'host']} rules={[{ required: true }]}>
         <Input size="large" placeholder="myserver.mycompany.com" />
       </Form.Item>
-      <Form.Item
-        label={t('protocol')}
-        name={['connection_data', 'protocol']}
-        rules={[{ required: true }]}
-        initialValue="https"
-      >
-        <Radio.Group>
-          <Radio.Button value="http">HTTP</Radio.Button>
-          <Radio.Button value="httpS">HTTPS</Radio.Button>
-        </Radio.Group>
-      </Form.Item>
-      <Form.Item label={t('port')} name={['connection_data', 'port']}>
-        <InputNumber size="large" min={MIN_ALLOWED_PORT} max={MAX_ALLOWED_PORT} placeholder="443" />
-      </Form.Item>
+      <ConnectionHttpProtocol/>
       <ConnectionAuthBasic />
     </>
   );