mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-02-28 02:50:45 +00:00
feat: use states and create new handlers with reducers
This commit is contained in:
parent
91ebee77da
commit
1a2c443c8a
@ -1,5 +1,4 @@
|
|||||||
import { Checkbox, Input, Text } from '@status-im/components'
|
import { Checkbox, Input, Text } from '@status-im/components'
|
||||||
import { useState } from 'react'
|
|
||||||
import { useDispatch, useSelector } from 'react-redux'
|
import { useDispatch, useSelector } from 'react-redux'
|
||||||
import { Stack, Switch, XStack, YStack } from 'tamagui'
|
import { Stack, Switch, XStack, YStack } from 'tamagui'
|
||||||
|
|
||||||
@ -11,6 +10,8 @@ type AddressAndPortInputsProps = {
|
|||||||
isAdvanced?: boolean
|
isAdvanced?: boolean
|
||||||
address: string
|
address: string
|
||||||
port?: string
|
port?: string
|
||||||
|
isSwitchOn?: boolean
|
||||||
|
isChecked?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const AddressAndPortInputs = ({
|
const AddressAndPortInputs = ({
|
||||||
@ -19,18 +20,24 @@ const AddressAndPortInputs = ({
|
|||||||
portType,
|
portType,
|
||||||
address,
|
address,
|
||||||
port,
|
port,
|
||||||
|
isSwitchOn,
|
||||||
|
isChecked,
|
||||||
}: AddressAndPortInputsProps) => {
|
}: AddressAndPortInputsProps) => {
|
||||||
const [isProtocolSwitchOn, setIsProtocolSwitchOn] = useState(true)
|
const { beaconPort, vcPort, isNodeChecked, isNodeSwitchOn } = useSelector(
|
||||||
const [isChecked, setIsChecked] = useState(true)
|
(state: RootState) => state.pairDevice,
|
||||||
const { beaconPort, vcPort } = useSelector((state: RootState) => state.pairDevice)
|
)
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
|
const isSwitchOnResult = isAdvanced ? isSwitchOn : isNodeSwitchOn
|
||||||
|
const switchStyle = isSwitchOnResult
|
||||||
|
? { backgroundColor: '#2A4AF5' }
|
||||||
|
: { backgroundColor: 'grey' }
|
||||||
|
|
||||||
const onProtocolSwitchChangeHandler = () => {
|
const onSwitchChange = (value: boolean) => {
|
||||||
setIsProtocolSwitchOn(state => !state)
|
dispatch({ type: 'pairDevice/setIsSwitchOn', payload: { value, switchType: addressType } })
|
||||||
}
|
}
|
||||||
|
|
||||||
const onCheckboxChangeHandler = () => {
|
const onCheckboxChange = (value: boolean) => {
|
||||||
setIsChecked(state => !state)
|
dispatch({ type: 'pairDevice/setIsChecked', payload: { value, checkType: addressType } })
|
||||||
}
|
}
|
||||||
|
|
||||||
const onPortChange = (value: string, portType: string) => {
|
const onPortChange = (value: string, portType: string) => {
|
||||||
@ -58,9 +65,9 @@ const AddressAndPortInputs = ({
|
|||||||
</YStack>
|
</YStack>
|
||||||
<Switch
|
<Switch
|
||||||
size="$1"
|
size="$1"
|
||||||
style={isProtocolSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }}
|
style={switchStyle}
|
||||||
checked={isProtocolSwitchOn}
|
checked={isSwitchOnResult}
|
||||||
onCheckedChange={onProtocolSwitchChangeHandler}
|
onCheckedChange={onSwitchChange}
|
||||||
>
|
>
|
||||||
<Switch.Thumb
|
<Switch.Thumb
|
||||||
style={{
|
style={{
|
||||||
@ -110,8 +117,8 @@ const AddressAndPortInputs = ({
|
|||||||
<Checkbox
|
<Checkbox
|
||||||
id="AddressAndPortInputs"
|
id="AddressAndPortInputs"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
selected={isChecked}
|
selected={isAdvanced ? isChecked : isNodeChecked}
|
||||||
onCheckedChange={onCheckboxChangeHandler}
|
onCheckedChange={onCheckboxChange}
|
||||||
size={20}
|
size={20}
|
||||||
/>
|
/>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
@ -20,12 +20,12 @@ const initialState: PairDeviceStateType = {
|
|||||||
nodeAddress: 'http://124.0.0.1',
|
nodeAddress: 'http://124.0.0.1',
|
||||||
beaconAddress: 'http://124.0.0.1',
|
beaconAddress: 'http://124.0.0.1',
|
||||||
vcAddress: 'http://124.0.0.1',
|
vcAddress: 'http://124.0.0.1',
|
||||||
isNodeSwitchOn: false,
|
isNodeSwitchOn: true,
|
||||||
isBeaconSwitchOn: false,
|
isBeaconSwitchOn: true,
|
||||||
isVcSwitchOn: false,
|
isVcSwitchOn: true,
|
||||||
isNodeChecked: false,
|
isNodeChecked: true,
|
||||||
isBeaconChecked: false,
|
isBeaconChecked: true,
|
||||||
isVcChecked: false,
|
isVcChecked: true,
|
||||||
}
|
}
|
||||||
|
|
||||||
const pairDeviceSlice = createSlice({
|
const pairDeviceSlice = createSlice({
|
||||||
|
Loading…
x
Reference in New Issue
Block a user