From 48ee8abd478da3806fa14239176550e9542c9853 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 5 Jan 2024 14:27:39 +0200
Subject: [PATCH] feat: use new port input component

---
 .../PairDevice/ConnectViaIP/ConnectViaIP.tsx  |  2 +-
 .../PairDevice/ConnectViaIP/InputsRow.tsx     | 37 +++----------------
 2 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
index 9890cb40..3a82e6eb 100644
--- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
@@ -67,7 +67,7 @@ const ConnectViaIP = () => {
           />
         </YStack>
       ) : (
-        <InputsRow addressType={'Node'} address={nodeAddress} />
+        <InputsRow addressType={'Node'} address={nodeAddress} port={''} portType={''} />
       )}
       <Separator borderColor={'#e3e3e3'} />
       <YStack space={'$2'}>
diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
index b39d8372..8a72cfc5 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
@@ -3,13 +3,14 @@ import { useDispatch, useSelector } from 'react-redux'
 import { Stack, Switch, XStack, YStack } from 'tamagui'
 
 import { RootState } from '../../../redux/store'
+import PortInput from './PortInput'
 
 type InputsRowProps = {
   addressType: string
-  portType?: string
+  portType: string
   isAdvanced?: boolean
   address: string
-  port?: string
+  port: string
   isSwitchOn?: boolean
   isChecked?: boolean
 }
@@ -40,14 +41,6 @@ const InputsRow = ({
     dispatch({ type: 'pairDevice/setIsChecked', payload: { value, checkType: addressType } })
   }
 
-  const onPortChange = (value: string, portType: string) => {
-    if (isNaN(Number(value))) {
-      return
-    }
-
-    dispatch({ type: 'pairDevice/setPort', payload: { value, portType } })
-  }
-
   const onAddressChange = (value: string) => {
     dispatch({ type: 'pairDevice/setAddress', payload: { value, addressType } })
   }
@@ -87,29 +80,11 @@ const InputsRow = ({
         <Input value={address} onChangeText={onAddressChange} />
       </YStack>
       {isAdvanced ? (
-        <YStack space={'$2'} flexBasis={0} flexGrow={3}>
-          <Text size={13} color={'#647084'} weight={'semibold'}>
-            {portType} Port
-          </Text>
-          <Input
-            value={port}
-            onChangeText={value => onPortChange(value, portType ? portType : '')}
-          />
-        </YStack>
+        <PortInput port={port} portType={portType} />
       ) : (
         <XStack space={'$3'} flexGrow={4} flexBasis={0}>
-          <YStack space={'$2'} flexBasis={0} flexGrow={2}>
-            <Text size={13} color={'#647084'} weight={'semibold'}>
-              VC Port
-            </Text>
-            <Input value={vcPort} onChangeText={value => onPortChange(value, 'VC')} />
-          </YStack>
-          <YStack space={'$2'} flexBasis={0} flexGrow={2}>
-            <Text size={13} color={'#647084'} weight={'semibold'}>
-              Beacon Port
-            </Text>
-            <Input value={beaconPort} onChangeText={value => onPortChange(value, 'Beacon')} />
-          </YStack>
+          <PortInput port={vcPort} portType={'VC'} />
+          <PortInput port={beaconPort} portType={'Beacon'} />
         </XStack>
       )}
       <div style={{ display: 'flex', alignItems: 'end', height: '100%' }}>