Merge pull request #229 from eoscostarica/fix/debounce-as-parameter

Reset values when pair change
eoscostarica · Oct 8, 2020 · 93f47f3 · 93f47f3
2 parents 1e4d19a + a6fbcf8
commit 93f47f3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 36 deletions.
diff --git a/src/components/InputTextAndSelect/InputTextAndSelect.js b/src/components/InputTextAndSelect/InputTextAndSelect.js
@@ -1,6 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useRef } from 'react'
 import clsx from 'clsx'
-import debounce from 'lodash.debounce'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@material-ui/styles'
@@ -129,7 +128,7 @@ const InputTextAndSelect = ({
   onChange,
   options,
   selected,
-  value,
+  value: inputValRef,
   inputDisabled,
   useHelperTextAsNode,
   placeholder,
@@ -142,31 +141,19 @@ const InputTextAndSelect = ({
   const classes = useStyles()
   const { t } = useTranslation('translations')
   const textInput = useRef(null)
-  const [inputData, setInputData] = useState({})
 
-  const handleOnChange = debounce((value) => {
-    setInputData({ ...inputData, inputValue: value })
-    onChange({ ...inputData, inputValue: value })
-  }, 500)
+  const handleOnChange = (value) => {
+    onChange({ ...inputValRef, inputValue: value })
+  }
 
   const handleOnChangeSelect = (value) => {
-    setInputData({ ...inputData, selectValue: value })
-    onChange({ ...inputData, selectValue: value })
+    onChange({ ...inputValRef, selectValue: value })
   }
 
   const handleOnKeyPress = (key) => {
     if (key === 'Enter') textInput.current.blur()
   }
 
-  useEffect(() => {
-    setInputData(
-      value || {
-        inputValue: '',
-        selectValue: 0
-      }
-    )
-  }, [value])
-
   return (
     <Box className={classes.boxInputContainer} id={containerId}>
       <form
@@ -186,7 +173,7 @@ const InputTextAndSelect = ({
             className={classes.inputText}
             ref={textInput}
             onValueChange={(inputVal) => handleOnChange(inputVal.value)}
-            value={inputData.inputValue || ''}
+            value={inputValRef.inputValue || ''}
             isAllowed={isValueAllowed}
             placeholder={placeholder || t('placeholder')}
             readOnly={inputDisabled}
@@ -198,7 +185,7 @@ const InputTextAndSelect = ({
           <Select
             id={id}
             onChange={(e) => handleOnChangeSelect(e.target.value)}
-            value={inputData.selectValue || t('selected')}
+            value={inputValRef.selectValue || t('selected')}
             renderValue={(selected) => {
               if (!selected) {
                 return (

diff --git a/src/routes/Evodex/BackLayer/Exchange/ExchangeBackLayer.js b/src/routes/Evodex/BackLayer/Exchange/ExchangeBackLayer.js
@@ -187,6 +187,7 @@ const ExchangeBackLayer = ({
   const [loading, setLoading] = useState(false)
   const [isTourOpen, setIsTourOpen] = useState(false)
   const [stopCallBack, setStopCallBack] = useState(false)
+  const [switchValues, setSwitchValues] = useState(false)
   const [userBalance, setUserBalance] = useState({})
 
   const handleOnSetData = (
@@ -195,7 +196,7 @@ const ExchangeBackLayer = ({
     setField,
     assetTo
   ) => {
-    if (pair) {
+    if (pair && inputValue) {
       const assets = getExchangeAssets(inputValue, pair)
 
       setAssets(assets)
@@ -208,14 +209,14 @@ const ExchangeBackLayer = ({
   }
 
   const handleOnChange = (key) => (value) => {
-    switch (key) {
-      case 'youGive': {
-        if (stopCallBack) {
-          setStopCallBack(false)
+    if (stopCallBack) {
+      setStopCallBack(false)
 
-          break
-        }
+      return
+    }
 
+    switch (key) {
+      case 'youGive': {
         setYouGive((prevState) => ({
           ...prevState,
           ...value
@@ -231,12 +232,6 @@ const ExchangeBackLayer = ({
         break
       }
       case 'youReceive': {
-        if (stopCallBack) {
-          setStopCallBack(false)
-
-          break
-        }
-
         setYouReceive((prevState) => ({
           ...prevState,
           ...value
@@ -268,6 +263,7 @@ const ExchangeBackLayer = ({
     if (!pair) return
 
     setStopCallBack(true)
+    setSwitchValues(true)
     setYouReceive(youGive)
     setYouGive(youReceive)
   }
@@ -393,6 +389,21 @@ const ExchangeBackLayer = ({
     if (!pair) return
 
     getCurrencyBalance(pair)
+
+    if (switchValues) {
+      setYouGive(youGive)
+      setYouReceive(youReceive)
+      setSwitchValues(false)
+    } else {
+      setYouGive({
+        ...youGive,
+        inputValue: ''
+      })
+      setYouReceive({
+        ...youReceive,
+        inputValue: ''
+      })
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pair])
 
@@ -407,11 +418,11 @@ const ExchangeBackLayer = ({
 
     setPair(exchangeState.currentPair)
     setYouGive({
-      ...youGive,
+      inputValue: '',
       selectValue: youGiveValueSelected
     })
     setYouReceive({
-      ...youReceive,
+      inputValue: '',
       selectValue: youReceiveValueSelected
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps