simplify pledging table state

app/components/PledgesTable.jsx

@@ -68,15 +68,13 @@ class PledgesTable extends Component {
   }
 
   handleClose = () => {
-    this.setState({ row: false })
+    this.setState({ rowData: null })
   }
 
-  clearRowData = () => this.setState({ rowData: null })
-
   render() {
-    const { data, row, rowData } = this.state
+    const { data, rowData } = this.state
     return (
-      <Fragment>
+      <div>
         <MaterialTable
           columns={[
             { title: 'Pledge Id', field: 'pledgeId', type: 'numeric' },
@@ -96,7 +94,10 @@ class PledgesTable extends Component {
               icon: 'compare_arrows',
               tooltip: 'Transfer funds',
               onClick: (event, rowData) => {
-                this.handleClickOpen(rowData)
+                const { timeStamp } = event
+                this.setState({
+                  rowData: { ...rowData, timeStamp, type: 'transfer' }
+                })
               }
             },
             {
@@ -106,16 +107,16 @@ class PledgesTable extends Component {
                 const { timeStamp } = event
                 console.log({rowData})
                 this.setState({
-                  rowData: { ...rowData, timeStamp }
+                  rowData: { ...rowData, timeStamp, type: 'withdraw' }
                 })
               }
             }
           ]}
         />
         {!rowData && <div/>}
-      {rowData && <WithdrawCard rowData={rowData} clearRowData={this.clearRowData} />}
-      {row && <TransferCard row={row} handleClose={this.handleClose} />}
-      </Fragment>
+        {rowData && rowData.type === 'withdraw' && <WithdrawCard rowData={rowData} handleClose={this.handleClose} />}
+        {rowData && rowData.type === 'transfer' && <TransferCard row={rowData} handleClose={this.handleClose} />}
+      </div>
     )
   }
 }

app/components/table/CardStyles.js

@@ -8,9 +8,6 @@ const styles = {
     borderBottom: '1px solid lightgray',
     backgroundColor: indigo[50]
   },
-  container: {
-    height: '35%'
-  },
   bullet: {
     display: 'inline-block',
     margin: '0 2px',

app/components/table/TransferCard.jsx

@@ -73,7 +73,7 @@ function TransferCard({ row, handleClose, classes }) {
         setStatus,
         status
       }) => (
-        <Collapse in={show} classes={{ wrapper: classes.container }}>
+        <Collapse in={show} >
           <form onSubmit={handleSubmit} autoComplete="off">
             <Card className={classes.card} elevation={0}>
               <CardContent>

app/components/table/WithdrawCard.jsx

@@ -21,7 +21,7 @@ import styles from './CardStyles'
 const { withdraw } = LiquidPledging.methods
 const { confirmPayment } = LPVault.methods
 
-function Withdraw({ clearRowData, classes, rowData, authorizedPayment }) {
+function Withdraw({ handleClose, classes, rowData, authorizedPayment }) {
   const [show, setShow] = useState(null)
   const [rowId, setRowId] = useState(rowData.pledgeId)
 
@@ -38,7 +38,7 @@ function Withdraw({ clearRowData, classes, rowData, authorizedPayment }) {
 
   const close = () => {
     setShow(false)
-    setTimeout(() => { clearRowData() }, 500)
+    setTimeout(() => { handleClose() }, 500)
   }
 
   const isPaying = rowData.pledgeState === 'Paying'
@@ -53,7 +53,8 @@ function Withdraw({ clearRowData, classes, rowData, authorizedPayment }) {
         try {
           const toSend = sendFn(...args)
           const estimateGas = await toSend.estimateGas()
-          toSend.send({ gas: estimateGas + 1000 })
+          toSend
+            .send({ gas: estimateGas + 1000 })
             .then(res => {
               console.log({res})
             })
@@ -114,7 +115,7 @@ function Withdraw({ clearRowData, classes, rowData, authorizedPayment }) {
 Withdraw.propTypes = {
   classes: PropTypes.object.isRequired,
   rowData: PropTypes.object.isRequired,
-  clearRowData: PropTypes.func.isRequired,
+  handleClose: PropTypes.func.isRequired,
   authorizedPayment: PropTypes.array.isRequired
 }