update pledging table on creation

app/components/CreateFunding.jsx

@@ -18,7 +18,7 @@ const addFunderSucessMsg = response => {
   return `Funder created with ID of ${idGiver}`
 }
 
-const CreateFunding = () => (
+const CreateFunding = ({ refreshTable }) => (
   <Formik
     initialValues={{ funderId: '', receiverId: '', tokenAddress : '', amount: '' }}
     onSubmit={async (values, { setSubmitting, resetForm, setStatus }) => {
@@ -32,6 +32,7 @@ const CreateFunding = () => (
           setStatus({
             snackbar: { variant: 'success', message: 'funding provided!' }
           })
+          refreshTable()
         })
         .catch(e => {
           console.log({e})
@@ -91,10 +92,10 @@ const CreateFunding = () => (
           {currencies.map(option => (
             <MenuItem style={{ display: 'flex', alignItems: 'center' }} key={option.value} value={option.value}>
               {option.icon || <img
-                src={option.img || `${TOKEN_ICON_API}/${option.value}.png`}
-                style={{ width: '3%', marginRight: '3%' }}
+                                src={option.img || `${TOKEN_ICON_API}/${option.value}.png`}
+                                style={{ width: '3%', marginRight: '3%' }}
               />}
-                {option.label}
+              {option.label}
             </MenuItem>
           ))}
         </TextField>

app/dapp.js

@@ -11,7 +11,7 @@ import FunderProfilesTable from './components/FunderProfilesTable'
 import PledgesTable from './components/PledgesTable'
 import { initVaultAndLP, vaultPledgingNeedsInit, standardTokenApproval, getLpAllowance } from './utils/initialize'
 import { getProfileEvents, formatFundProfileEvent } from './utils/events';
-import { getAllPledges } from './utils/pledges';
+import { getAllPledges, appendToExistingPledges } from './utils/pledges';
 
 const { getNetworkType } = web3.eth.net;
 
@@ -52,16 +52,21 @@ class App extends React.Component {
     })
   }
 
+  appendPledges = () => {
+    const { allPledges } = this.state
+    appendToExistingPledges(allPledges, this.setState)
+  }
+
   render() {
     const { needsInit, lpAllowance, fundProfiles, allPledges } = this.state;
-    const { appendFundProfile } = this;
+    const { appendFundProfile, appendPledges } = this;
     return (
       <div>
         {allPledges && <PledgesTable data={allPledges} />}
         {fundProfiles && <FunderProfilesTable data={fundProfiles} />}
         <AddFunder appendFundProfile={appendFundProfile} />
         <Divider variant="middle" />
-        <CreateFunding />
+        <CreateFunding refreshTable={appendPledges} />
         {needsInit && <Button variant="outlined" color="secondary" onClick={initVaultAndLP}>
           Initialize Contracts
         </Button>}

app/utils/pledges.js

@@ -1,28 +1,35 @@
 import LiquidPledgingMock from 'Embark/contracts/LiquidPledgingMock'
 
-// amount: "21000000000000000000"
-// commitTime: "0"
-// intendedProject: "0"
-// nDelegates: "1"
-// oldPledge: "0"
-// owner: "4"
-// pledgeState: "0"
-// token: "0x10Aa1c9C2ad79b240Dc612cd2c0c0f5513bAfF28"
-
 const { getPledgeAdmin, numberOfPledges, getPledge } = LiquidPledgingMock.methods
 export const formatPledge = async (pledgePromise, idx) => {
   const pledge = await pledgePromise
   return {
     ...pledge,
-    id: idx
+    id: idx + 1
   }
 }
 
-export const getAllPledges = async () => {
+export const getAllPledges = async (start = 1) => {
   const numPledges = await numberOfPledges().call()
+  console.log({numPledges})
   const pledges = []
-  for (let i = 0; i <= numPledges; i++) {
+  for (let i = start; i <= numPledges; i++) {
     pledges.push(getPledge(i).call())
   }
   return Promise.all(pledges.map(formatPledge))
 }
+
+export const appendToExistingPledges = async (pledges, setState) => {
+  const numPledges = await numberOfPledges().call()
+  const difference = numPledges - pledges.length
+  if (difference > 0) {
+    const newPledges = await getAllPledges(difference)
+    setState((state) => ({
+      ...state,
+      allPledges: {
+        ...state.pledges,
+        ...newPledges
+      }
+    }))
+  }
+}