fix(SFOX): refactor quoteInput

blockchain · Jun 12, 2018 · eb65206 · eb65206
1 parent cd7972e
commit eb65206
Showing 1 changed file with 29 additions and 39 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/QuoteInput.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/QuoteInput.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { toUpper } from 'ramda'
+import { toUpper, path } from 'ramda'
 import FiatConvertor from './QuoteInputTemplate'
 import { Remote } from 'blockchain-wallet-v4/src'
 
@@ -41,39 +41,36 @@ const otherSide = (side) => {
 }
 
 class QuoteInput extends Component {
-  /* eslint-disable */
-  state = {
-    side: 'input',
-    input: this.props.initialAmount,
-    output: '0',
-    lastQuoteId: this.props.initialQuoteId,
-    userInput: false
-  }
-  /* eslint-enable */
-
-  static getDerivedStateFromProps (nextProps, lastState) {
-    let { quoteR, spec } = nextProps
-    let { side, userInput } = lastState
-    return quoteR.map((quote) => {
-      if (quote && quote.id !== lastState.lastQuoteId && userInput) {
-        return {
-          [side]: convert.to[spec[side]](quote.baseAmount),
-          [otherSide(side)]: convert.to[spec[otherSide(side)]](quote.quoteAmount),
-          lastQuoteId: quote.id,
-          fiatAmount: quote.baseCurrency === 'BTC' ? quote.quoteAmount : quote.baseAmount
-        }
-      } else {
-        return null
-      }
-    }).getOrElse(null)
-  }
+  constructor (props) {
+    super(props)
+    this.state = {
+      side: 'input',
+      input: this.props.initialAmount,
+      output: '',
+      lastQuoteId: this.props.initialQuoteId,
+      userInput: false
+    }
 
-  componentDidMount () {
-    this.fetchQuoteDebounced()
+    this.updateFields = this.updateFields.bind(this)
   }
 
   componentDidUpdate (prevProps) {
     if (prevProps.type !== this.props.type) this.fetchQuoteDebounced()
+    this.props.quoteR.map(quote => {
+      if (quote.id !== path(['quoteR', 'data', 'id'], prevProps)) {
+        this.updateFields(quote)
+      }
+    })
+  }
+
+  updateFields (quote) {
+    if (!this.state.userInput) return null
+    let fiat = this.state.side === 'input' ? quote.baseAmount : quote.quoteAmount
+    let crypto = this.state.side === 'output' ? quote.baseAmount / 1e8 : quote.quoteAmount / 1e8
+    this.setState({
+      input: fiat,
+      output: crypto
+    })
   }
 
   getQuoteValues = () => {
@@ -87,15 +84,13 @@ class QuoteInput extends Component {
   }
 
   handleChangeLeft = (event) => {
-    this.setState({ side: 'input', input: event.target.value })
+    this.setState({ side: 'input', input: event.target.value, userInput: true })
     this.fetchQuoteDebounced()
-    this.setState({ userInput: true })
   }
 
   handleChangeRight = (event) => {
-    this.setState({ side: 'output', output: event.target.value })
+    this.setState({ side: 'output', output: event.target.value, userInput: true })
     this.fetchQuoteDebounced()
-    this.setState({ userInput: true })
   }
 
   fetchQuoteDebounced = () => {
@@ -107,11 +102,6 @@ class QuoteInput extends Component {
     let quote = this.getQuoteValues()
     if (!this.state.userInput) {
       this.setState({ input: '', output: '' })
-      quote = {
-        amt: 100000000,
-        baseCurrency: 'BTC',
-        quoteCurrency: 'USD'
-      }
     }
     this.props.onFetchQuote(quote)
   }
@@ -153,7 +143,7 @@ QuoteInput.propTypes = {
 }
 
 QuoteInput.defaultProps = {
-  initialAmount: 0,
+  initialAmount: '',
   debounce: 500,
   initialQuoteId: null
 }