From 8f648cca8ec40d00808e86efc8516cf97534cb5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Tue, 6 Apr 2021 20:26:09 +0100
Subject: [PATCH] refactor: separate logic from checkbox component

---
 .../src/components/inputs/base/Checkbox.js    | 20 +++------------
 .../src/pages/Services/FormRenderer.js        | 25 +++++++++++--------
 .../src/pages/Services/Services.js            | 11 ++++++++
 .../src/pages/Services/schemas/blockcypher.js |  6 +++++
 4 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/new-lamassu-admin/src/components/inputs/base/Checkbox.js b/new-lamassu-admin/src/components/inputs/base/Checkbox.js
index 9d414442..9ed04691 100644
--- a/new-lamassu-admin/src/components/inputs/base/Checkbox.js
+++ b/new-lamassu-admin/src/components/inputs/base/Checkbox.js
@@ -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
diff --git a/new-lamassu-admin/src/pages/Services/FormRenderer.js b/new-lamassu-admin/src/pages/Services/FormRenderer.js
index b5d46387..31413ea7 100644
--- a/new-lamassu-admin/src/pages/Services/FormRenderer.js
+++ b/new-lamassu-admin/src/pages/Services/FormRenderer.js
@@ -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)}
diff --git a/new-lamassu-admin/src/pages/Services/Services.js b/new-lamassu-admin/src/pages/Services/Services.js
index e5d197c8..2bfe619f 100644
--- a/new-lamassu-admin/src/pages/Services/Services.js
+++ b/new-lamassu-admin/src/pages/Services/Services.js
@@ -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,
diff --git a/new-lamassu-admin/src/pages/Services/schemas/blockcypher.js b/new-lamassu-admin/src/pages/Services/schemas/blockcypher.js
index b3e61cd7..11c6cab8 100644
--- a/new-lamassu-admin/src/pages/Services/schemas/blockcypher.js
+++ b/new-lamassu-admin/src/pages/Services/schemas/blockcypher.js
@@ -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
     }
   ],