From 31b8a5dfc0b38f78c63db7926cb82b4b71bedef7 Mon Sep 17 00:00:00 2001
From: Daniel Gonzalez <danielhumgon@gmail.com>
Date: Mon, 10 Aug 2020 21:50:18 -0400
Subject: [PATCH] refactor(configure): Converted configure cards into
 components

---
 src/components/admin-lte/configure/index.js | 178 ++------------------
 src/components/admin-lte/configure/info.js  |  89 ++++++++++
 src/components/admin-lte/configure/jwt.js   | 142 ++++++++++++++++
 3 files changed, 245 insertions(+), 164 deletions(-)
 create mode 100644 src/components/admin-lte/configure/info.js
 create mode 100644 src/components/admin-lte/configure/jwt.js

diff --git a/src/components/admin-lte/configure/index.js b/src/components/admin-lte/configure/index.js
index d13a64b..b72236f 100644
--- a/src/components/admin-lte/configure/index.js
+++ b/src/components/admin-lte/configure/index.js
@@ -1,13 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Content, Row, Col, Box, Inputs, Button } from 'adminlte-2-react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Content } from 'adminlte-2-react'
 import MenuComponents from './menu-components'
 import Servers from './servers'
-import { setWalletInfo } from '../../localWallet'
-import TabsMenu from './TabsMenu'
+import JsonWebTokens from './jwt'
+import ConfigureInfo from './info'
 
-const { Text } = Inputs
+import TabsMenu from './TabsMenu'
 
 const BchWallet = typeof window !== 'undefined' ? window.SlpWallet : null
 
@@ -19,9 +18,7 @@ class Configure extends React.Component {
     _this = this
 
     this.state = {
-      menuItem: 'Configure',
-      JWT: '',
-      errMsg: ''
+      menuItem: 'Configure'
     }
 
     _this.BchWallet = BchWallet
@@ -37,93 +34,14 @@ class Configure extends React.Component {
         <TabsMenu onSelect={this.handleSelect} />
         {_this.state.menuItem === 'Configure' && (
           <>
-            <Row>
-              <Col sm={12}>
-                <Box className='hover-shadow border-none mt-2'>
-                  <Row>
-                    <Col sm={12} className='text-center'>
-                      <h1>
-                        <FontAwesomeIcon
-                          className='title-icon'
-                          size='xs'
-                          icon='cog'
-                        />
-                        <span>Configure</span>
-                      </h1>
-                      <Box className='border-none'>
-                        <h3>
-                          <FontAwesomeIcon
-                            className='title-icon'
-                            size='xs'
-                            icon='exclamation-triangle'
-                          />
-                          Be Careful
-                        </h3>
-                        <p>
-                          Backup your wallet first. Updating the configuration
-                          will restart the app.
-                        </p>
-                        <p>
-                          This is just a placeholder. This View will allow the
-                          user to pick alternate back-end servers. The default
-                          will be{' '}
-                          <a
-                            href='https://fullstack.cash'
-                            target='_blank'
-                            rel='noopener noreferrer'
-                          >
-                            FullStack.cash
-                          </a>
-                        </p>
-                        <Button
-                          text='Clear LocalStorage'
-                          type='primary'
-                          className='btn-lg mt-1'
-                          onClick={_this.handleClearLocalStorage}
-                        />
-                      </Box>
-                    </Col>
-                  </Row>
-                </Box>
-              </Col>
-              <Col sm={12}>
-                <Box className='hover-shadow border-none mt-2'>
-                  <Row>
-                    <Col sm={12} className='text-center'>
-                      <h1>
-                        <FontAwesomeIcon
-                          className='title-icon'
-                          size='xs'
-                          icon='coins'
-                        />
-                        <span>JWT</span>
-                      </h1>
-                      <Box className='border-none'>
-                        <Text
-                          id='jwt'
-                          name='JWT'
-                          placeholder='Enter FullStack.cash JWT'
-                          label='FullStack.cash JWT'
-                          labelPosition='above'
-                          onChange={_this.handleUpdate}
-                        />
-                        <Button
-                          text='Update'
-                          type='primary'
-                          className='btn-lg'
-                          onClick={_this.handleUpdateJWT}
-                        />
-                      </Box>
-                    </Col>
-                    <Col sm={12} className='text-center'>
-                      {_this.state.errMsg && (
-                        <p className='error-color'>{_this.state.errMsg}</p>
-                      )}
-                    </Col>
-                  </Row>
-                </Box>
-              </Col>
-            </Row>
+            <ConfigureInfo />
+
+            <JsonWebTokens
+              setWalletInfo={_this.props.setWalletInfo}
+              walletInfo={_this.props.walletInfo}
+              setBchWallet={_this.props.setBchWallet}
+            />
+
             <Servers
               setWalletInfo={_this.props.setWalletInfo}
               walletInfo={_this.props.walletInfo}
@@ -138,76 +56,8 @@ class Configure extends React.Component {
       </Content>
     )
   }
-
-  // Clear localstorage info
-  handleClearLocalStorage () {
-    setWalletInfo({})
-    window.location.reload()
-  }
-
-  componentDidMount () {
-    _this.setJwt()
-  }
-
-  setJwt () {
-    const { JWT } = _this.props.walletInfo
-    if (JWT) {
-      const jwtElem = document.getElementById('jwt')
-      jwtElem.value = JWT
-    }
-  }
-
-  handleUpdate (event) {
-    const value = event.target.value
-    _this.setState({
-      [event.target.name]: value
-    })
-  }
-
-  async handleUpdateJWT () {
-    try {
-      const { mnemonic, selectedServer } = _this.props.walletInfo
-      const apiToken = _this.state.JWT
-
-      // Update instance with JWT
-      if (mnemonic) {
-        const bchjsOptions = { apiToken: apiToken }
-        if (selectedServer) {
-          bchjsOptions.restURL = selectedServer
-        }
-
-        // console.log('bchjs options : ', bchjsOptions)
-        const bchWalletLib = new _this.BchWallet(mnemonic, bchjsOptions)
-
-        // Update bchjs instances  of minimal-slp-wallet libraries
-        bchWalletLib.tokens.sendBch.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
-        bchWalletLib.tokens.utxos.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
-
-        _this.props.setBchWallet(bchWalletLib)
-      }
-
-      const walletInfo = _this.props.walletInfo
-
-      walletInfo.JWT = apiToken
-
-      _this.props.setWalletInfo(walletInfo)
-    } catch (error) {
-      _this.setState({
-        errMsg: error.message
-      })
-    }
-  }
-
-  // Reset form and component state
-  resetValues () {
-    _this.setState({
-      JWT: '',
-      errMsg: ''
-    })
-    const jwtElem = document.getElementById('jwt')
-    jwtElem.value = ''
-  }
 }
+
 Configure.propTypes = {
   setWalletInfo: PropTypes.func.isRequired,
   walletInfo: PropTypes.object.isRequired,
diff --git a/src/components/admin-lte/configure/info.js b/src/components/admin-lte/configure/info.js
new file mode 100644
index 0000000..adb339c
--- /dev/null
+++ b/src/components/admin-lte/configure/info.js
@@ -0,0 +1,89 @@
+import React from 'react'
+import { Row, Col, Box, Button } from 'adminlte-2-react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { setWalletInfo } from '../../localWallet'
+
+// import BchWallet from 'minimal-slp-wallet'
+
+const BchWallet =
+  typeof window !== 'undefined'
+    ? window.SlpWallet
+    : null
+
+let _this
+class ConfigureInfo extends React.Component {
+  constructor (props) {
+    super(props)
+
+    _this = this
+
+    this.state = {
+
+    }
+
+    _this.BchWallet = BchWallet
+  }
+
+  render () {
+    return (
+      <Row>
+        <Col sm={12}>
+          <Box className='hover-shadow border-none mt-2'>
+            <Row>
+              <Col sm={12} className='text-center'>
+                <h1>
+                  <FontAwesomeIcon
+                    className='title-icon'
+                    size='xs'
+                    icon='cog'
+                  />
+                  <span>Configure</span>
+                </h1>
+                <Box className='border-none'>
+                  <h3>
+                    <FontAwesomeIcon
+                      className='title-icon'
+                      size='xs'
+                      icon='exclamation-triangle'
+                    />
+                    Be Careful
+                  </h3>
+                  <p>
+                    Backup your wallet first. Updating the configuration
+                    will restart the app.
+                  </p>
+                  <p>
+                    This is just a placeholder. This View will allow the
+                    user to pick alternate back-end servers. The default
+                    will be{' '}
+                    <a
+                      href='https://fullstack.cash'
+                      target='_blank'
+                      rel='noopener noreferrer'
+                    >
+                      FullStack.cash
+                    </a>
+                  </p>
+                  <Button
+                    text='Clear LocalStorage'
+                    type='primary'
+                    className='btn-lg mt-1'
+                    onClick={_this.handleClearLocalStorage}
+                  />
+                </Box>
+              </Col>
+            </Row>
+          </Box>
+        </Col>
+      </Row>
+    )
+  }
+
+  // Clear localstorage info
+  handleClearLocalStorage () {
+    setWalletInfo({})
+    window.location.reload()
+  }
+}
+
+export default ConfigureInfo
diff --git a/src/components/admin-lte/configure/jwt.js b/src/components/admin-lte/configure/jwt.js
new file mode 100644
index 0000000..79a8596
--- /dev/null
+++ b/src/components/admin-lte/configure/jwt.js
@@ -0,0 +1,142 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Row, Col, Box, Inputs, Button } from 'adminlte-2-react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+// import BchWallet from 'minimal-slp-wallet'
+
+const BchWallet =
+  typeof window !== 'undefined'
+    ? window.SlpWallet
+    : null
+
+const { Text } = Inputs
+
+let _this
+class JsonWebTokens extends React.Component {
+  constructor (props) {
+    super(props)
+
+    _this = this
+
+    this.state = {
+      JWT: '',
+      errMsg: ''
+    }
+
+    _this.BchWallet = BchWallet
+  }
+
+  render () {
+    return (
+      <Row>
+        <Col sm={12}>
+          <Box className='hover-shadow border-none mt-2'>
+            <Row>
+              <Col sm={12} className='text-center'>
+                <h1>
+                  <FontAwesomeIcon
+                    className='title-icon'
+                    size='xs'
+                    icon='coins'
+                  />
+                  <span>JWT</span>
+                </h1>
+                <Box className='border-none'>
+                  <Text
+                    id='jwt'
+                    name='JWT'
+                    placeholder='Enter FullStack.cash JWT'
+                    label='FullStack.cash JWT'
+                    labelPosition='above'
+                    onChange={_this.handleUpdate}
+                  />
+                  <Button
+                    text='Update'
+                    type='primary'
+                    className='btn-lg'
+                    onClick={_this.handleUpdateJWT}
+                  />
+                </Box>
+              </Col>
+              <Col sm={12} className='text-center'>
+                {_this.state.errMsg && (
+                  <p className='error-color'>{_this.state.errMsg}</p>
+                )}
+              </Col>
+            </Row>
+          </Box>
+        </Col>
+      </Row>
+    )
+  }
+
+  setJwt () {
+    const { JWT } = _this.props.walletInfo
+    if (JWT) {
+      const jwtElem = document.getElementById('jwt')
+      jwtElem.value = JWT
+    }
+  }
+
+  handleUpdate (event) {
+    const value = event.target.value
+    _this.setState({
+      [event.target.name]: value
+    })
+  }
+
+  async handleUpdateJWT () {
+    try {
+      const { mnemonic, selectedServer } = _this.props.walletInfo
+      const apiToken = _this.state.JWT
+
+      // Update instance with JWT
+      if (mnemonic) {
+        const bchjsOptions = { apiToken: apiToken }
+        if (selectedServer) {
+          bchjsOptions.restURL = selectedServer
+        }
+
+        // console.log('bchjs options : ', bchjsOptions)
+        const bchWalletLib = new _this.BchWallet(mnemonic, bchjsOptions)
+
+        // Update bchjs instances  of minimal-slp-wallet libraries
+        bchWalletLib.tokens.sendBch.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
+        bchWalletLib.tokens.utxos.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
+
+        _this.props.setBchWallet(bchWalletLib)
+      }
+
+      const walletInfo = _this.props.walletInfo
+
+      walletInfo.JWT = apiToken
+
+      _this.props.setWalletInfo(walletInfo)
+    } catch (error) {
+      _this.setState({
+        errMsg: error.message
+      })
+    }
+  }
+
+  // Reset form and component state
+  resetValues () {
+    _this.setState({
+      JWT: '',
+      errMsg: ''
+    })
+    const jwtElem = document.getElementById('jwt')
+    jwtElem.value = ''
+  }
+
+  componentDidMount () {
+    _this.setJwt()
+  }
+}
+JsonWebTokens.propTypes = {
+  setWalletInfo: PropTypes.func.isRequired,
+  walletInfo: PropTypes.object.isRequired,
+  setBchWallet: PropTypes.func.isRequired
+}
+
+export default JsonWebTokens