refactor: separate logic from checkbox component

This commit is contained in:
José Oliveira 2021-04-06 20:26:09 +01:00 committed by Josh Harvey
parent 0a4fbad335
commit 8f648cca8e
4 changed files with 34 additions and 28 deletions

View file

@ -1,10 +1,7 @@
import { useQuery } from '@apollo/react-hooks'
import Checkbox from '@material-ui/core/Checkbox'
import { makeStyles } from '@material-ui/core/styles'
import CheckBoxIcon from '@material-ui/icons/CheckBox'
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
import gql from 'graphql-tag'
import * as R from 'ramda'
import React from 'react'
import { Label2, Info3 } from 'src/components/typography'
@ -43,24 +40,13 @@ const useStyles = makeStyles({
}
})
const GET_INFO = gql`
query getData {
config
}
`
const CheckboxInput = ({ name, onChange, value, ...props }) => {
const { data: configData } = useQuery(GET_INFO)
const disabledMessage = 'RBF verification not available'
const label = 'Enable RBF verification'
const wallet = R.lensPath(['config', 'wallets_BTC_wallet'])
const isEnabled = R.equals(R.view(wallet, configData), 'bitcoind')
const CheckboxInput = ({ name, onChange, value, settings, ...props }) => {
const { enabled, label, disabledMessage } = settings
const classes = useStyles()
return (
<>
{isEnabled ? (
{enabled ? (
<div className={classes.checkBoxLabel}>
<Label2>{label}</Label2>
<Checkbox

View file

@ -63,17 +63,20 @@ const FormRenderer = ({
onSubmit={saveNonEmptySecret}>
<Form className={classes.form}>
<Grid container spacing={3} className={classes.grid}>
{elements.map(({ component, code, display, inputProps }) => (
<Grid item xs={xs} key={code}>
<FastField
component={component}
{...inputProps}
name={code}
label={display}
fullWidth={true}
/>
</Grid>
))}
{elements.map(
({ component, code, display, settings, inputProps }) => (
<Grid item xs={xs} key={code}>
<FastField
component={component}
{...inputProps}
name={code}
label={display}
settings={settings}
fullWidth={true}
/>
</Grid>
)
)}
</Grid>
<Button
className={classnames(classes.button, buttonClass)}

View file

@ -6,6 +6,7 @@ import React, { useState } from 'react'
import Modal from 'src/components/Modal'
import { SecretInput } from 'src/components/inputs/formik'
import CheckboxInput from 'src/components/inputs/formik/Checkbox'
import TitleSection from 'src/components/layout/TitleSection'
import SingleRowTable from 'src/components/single-row-table/SingleRowTable'
import { formatLong } from 'src/utils/string'
@ -16,6 +17,7 @@ import schemas from './schemas'
const GET_INFO = gql`
query getData {
accounts
config
}
`
@ -57,8 +59,17 @@ const Services = () => {
}))(faceElements)
}
const updateSettings = element => {
const settings = element.settings
const wallet = R.lensPath(['config', 'wallets_BTC_wallet'])
const isEnabled = R.equals(R.view(wallet, data), settings.requirement)
settings.enabled = isEnabled
return element
}
const getElements = ({ code, elements }) => {
return R.map(elem => {
if (elem.component === CheckboxInput) return updateSettings(elem)
if (elem.component !== SecretInput) return elem
return {
...elem,

View file

@ -24,6 +24,12 @@ export default {
{
code: 'rbf',
component: CheckboxInput,
settings: {
enabled: true,
disabledMessage: 'RBF verification not available',
label: 'Enable RBF verification',
requirement: 'bitcoind'
},
face: true
}
],