diff --git a/app/components/table/TransferCard.jsx b/app/components/table/TransferCard.jsx index 0565f93..c278b81 100644 --- a/app/components/table/TransferCard.jsx +++ b/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 ( - - @@ -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) diff --git a/app/components/table/WithdrawCard.jsx b/app/components/table/WithdrawCard.jsx index d1fd9cb..625674d 100644 --- a/app/components/table/WithdrawCard.jsx +++ b/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 ( { + 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 } +}