add useRowData hook

app/components/table/TransferCard.jsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 import { Formik } from 'formik'
 import LiquidPledging from 'Embark/contracts/LiquidPledging'
@@ -12,21 +13,12 @@ import Collapse from '@material-ui/core/Collapse'
 import { getTokenLabel } from '../../utils/currencies'
 import { toWei } from '../../utils/conversions'
 import styles from './CardStyles'
+import { useRowData } from './hooks'
 
 const { transfer } = LiquidPledging.methods
 
 function TransferCard({ row, handleClose, classes }) {
-  const [show, setShow] = useState(null)
-
-  useEffect(() => {
-    setShow(true)
-  }, [])
-
-  const close = () => {
-    setShow(false)
-    setTimeout(() => { handleClose() }, 500)
-  }
-
+  const { show, close } = useRowData(row, handleClose)
   return (
     <Formik
       initialValues={{}}
@@ -124,10 +116,10 @@ function TransferCard({ row, handleClose, classes }) {
                   value={values.idReceiver || ''}
                 />
                 <CardActions>
-                  <Button onClick={close} color="primary">
+                  <Button size="large" onClick={close}>
                     Cancel
                   </Button>
-                  <Button onClick={submitForm} color="primary" type="submit">
+                  <Button size="large" onClick={submitForm} color="primary" type="submit">
                     Transfer
                   </Button>
                 </CardActions>
@@ -140,4 +132,10 @@ function TransferCard({ row, handleClose, classes }) {
   )
 }
 
+TransferCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  row: PropTypes.object.isRequired,
+  handleClose: PropTypes.func.isRequired,
+}
+
 export default withStyles(styles)(TransferCard)

app/components/table/WithdrawCard.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import withObservables from '@nozbe/with-observables'
 import { Q } from '@nozbe/watermelondb'
 import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider'
@@ -17,30 +17,13 @@ import LPVault from 'Embark/contracts/LPVault'
 import { getTokenLabel } from '../../utils/currencies'
 import { toWei } from '../../utils/conversions'
 import styles from './CardStyles'
+import { useRowData } from './hooks'
 
 const { withdraw } = LiquidPledging.methods
 const { confirmPayment } = LPVault.methods
 
 function Withdraw({ handleClose, classes, rowData, authorizedPayment }) {
-  const [show, setShow] = useState(null)
-  const [rowId, setRowId] = useState(rowData.pledgeId)
-
-  useEffect(() => {
-    setShow(true)
-  }, [])
-
-  useEffect(() => {
-    const { pledgeId } = rowData
-    const samePledge = rowId === pledgeId
-    if (show && samePledge) close()
-    else setRowId(pledgeId)
-  }, [rowData.timeStamp])
-
-  const close = () => {
-    setShow(false)
-    setTimeout(() => { handleClose() }, 500)
-  }
-
+  const { show, close } = useRowData(rowData, handleClose)
   const isPaying = rowData.pledgeState === 'Paying'
   return (
     <Formik

app/components/table/hooks.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react'
+
+export function useRowData(rowData, handleClose) {
+  const [show, setShow] = useState(null)
+  const [rowId, setRowId] = useState(rowData.pledgeId)
+
+  useEffect(() => {
+    setShow(true)
+  }, [])
+
+  useEffect(() => {
+    const { pledgeId } = rowData
+    const samePledge = rowId === pledgeId
+    if (show && samePledge) close()
+    else setRowId(pledgeId)
+  }, [rowData.timeStamp])
+
+  const close = () => {
+    setShow(false)
+    setTimeout(() => { handleClose() }, 500)
+  }
+
+  return { show, close }
+}