add delegate pledges to back project page

app/actions/delegates.js

@@ -1,8 +1,7 @@
 import database from '../db'
 import { Q } from '@nozbe/watermelondb'
-import { when } from 'ramda'
 import { getPledgesWithDelegates } from './pledges'
-import { getProfilesById } from './profiles'
+import { getProfilesById, getProfileById } from './profiles'
 
 const delegatesCollection = database.collections.get('delegates')
 export const getDelegateProfiles = async pledges => {
@@ -65,6 +64,13 @@ export const getExistingDelegates = async () => {
   return delegates
 }
 
+export const getDelegatePledgesByProfile = async profile => {
+  const delegates = await delegatesCollection.query(
+    Q.where('profile_id', profile.id)
+  ).fetch()
+  return delegates
+}
+
 export const delegateExists = async (profileId, idPledge, idx) => {
   const delegates = await delegatesCollection.query(
     Q.where('profile_id', profileId),

app/components/projects/BackProject.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { Formik } from 'formik'
 import withObservables from '@nozbe/with-observables'
 import { Q } from '@nozbe/watermelondb'
 import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider'
 import { withStyles } from '@material-ui/core/styles'
-import { useProjectData } from './hooks'
+import { useProjectData, useProfileData } from './hooks'
 import Divider from '@material-ui/core/Divider'
 import TextField from '@material-ui/core/TextField'
 import MenuItem from '@material-ui/core/MenuItem'
@@ -46,10 +46,10 @@ const Title = ({ className, manifest }) => (
     <Divider />
   </div>
 )
-
-const SubmissionSection = ({ classes, profiles }) => (
+const SubmissionSection = ({ classes, profiles, delegatePledges }) => {
+  return (
     <Formik
-    initialValues={{ delegateProfile: ''}}
+      initialValues={{ delegateProfile: '', delegatePledge: '' }}
       onSubmit={console.log}
     >
       {({
@@ -62,7 +62,9 @@ const SubmissionSection = ({ classes, profiles }) => (
         setFieldValue,
         setStatus,
         status
-    }) => (
+      }) => {
+        const filteredPledges = values.delegateProfile ? delegatePledges.filter(d => d.profile.id == values.delegateProfile.id) : null
+        return (
           <form onSubmit={handleSubmit} className={classes.submissionRoot}>
             <TextField
               className={classes.textField}
@@ -78,33 +80,59 @@ const SubmissionSection = ({ classes, profiles }) => (
               value={values.delegateProfile || ''}
             >
               {profiles && profiles.map(profile => (
-            <MenuItem style={{ display: 'flex', alignItems: 'center' }} key={profile.name} value={profile.name}>
+                <MenuItem style={{ display: 'flex', alignItems: 'center' }} key={profile.name} value={profile}>
                   {profile.name}
                 </MenuItem>
               ))}
             </TextField>
+            {filteredPledges && <TextField
+              className={classes.textField}
+              id="delegatePledge"
+              name="delegatePledge"
+              select
+              label="Select Pledge for Funding"
+              placeholder="Select Pledge for Funding"
+              margin="normal"
+              variant="outlined"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              value={values.delegatePledge || ''}
+            >
+              {filteredPledges.map(pledge => (
+                <MenuItem style={{ display: 'flex', alignItems: 'center' }} key={pledge.idPledge} value={pledge.idPledge}>
+                  {`Pledge no: ${pledge.idPledge}`}
+                </MenuItem>
+              ))}
+            </TextField>}
           </form>
-    )}
+        ) }
+      }
     </Formik>
-)
+  )}
 
-function BackProject({classes, match, profile, projectAddedEvents, delegateAddedEvents}) {
+function BackProject({classes, match, profile, delegates, projectAddedEvents, delegateAddedEvents}) {
   const projectId = match.params.id
   const { projectAge, projectAssets, manifest, delegateProfiles } = useProjectData(projectId, profile, projectAddedEvents)
-  console.log({delegateAddedEvents})
+  const delegatePledges = useProfileData(delegateProfiles)
+  const delegateProfilesArr = delegates.map(d => d.profile.fetch())
+  console.log({delegateAddedEvents, profile, delegates, delegateProfilesArr, delegateProfiles}, profile[0].delegates.fetch())
   return (
     <div className={classes.root}>
       <Title className={classes.title} manifest={manifest} />
-      <SubmissionSection classes={classes} profiles={delegateProfiles} />
+      <SubmissionSection classes={classes} profiles={delegateProfiles} delegatePledges={delegatePledges}/>
     </div>
   )
 }
 
+//TODO get all pledges for a delegate profile
 const StyledProject = withStyles(styles)(BackProject)
 export default withDatabase(withObservables([], ({ database, match }) => ({
   profile: database.collections.get('profiles').query(
     Q.where('id_profile', match.params.id)
   ).observe(),
+  delegates: database.collections.get('delegates').query(
+    Q.on('profiles','id_profile', 3)
+  ).observe(),
   projectAddedEvents: database.collections.get('lp_events').query(
     Q.where('event', 'ProjectAdded')
   ).observe(),

app/components/projects/hooks.js

@@ -2,13 +2,13 @@ import EmbarkJS from 'Embark/EmbarkJS'
 import web3 from 'Embark/web3'
 import LiquidPledging from 'Embark/contracts/LiquidPledging'
 import { useState, useEffect, useMemo, useContext } from 'react'
+import { unnest } from 'ramda'
 import { timeSinceBlock } from '../../utils/dates'
 import { getFiles, ipfs } from '../../utils/ipfs'
 import { databaseExists } from '../../utils/db'
 import { FundingContext } from '../../context'
 import { getDelegateProfiles } from '../../actions/profiles'
-
-console.log({LiquidPledging})
+import { getDelegatePledgesByProfile } from '../../actions/delegates'
 
 async function getProjectAge(id, events, setState){
   const event = events.find(e => e.returnValues.idProject === id)
@@ -19,8 +19,6 @@ async function getProjectAge(id, events, setState){
 async function getProjectAssets(projectId, setState){
   EmbarkJS.onReady(async (err) => {
     const projectInfo = await LiquidPledging.methods.getPledgeAdmin(projectId).call()
-    const pledgeInfo = await LiquidPledging.methods.getPledgeDelegate(5).call()
-    console.log({pledgeInfo})
     const CID = projectInfo.url.split('/').slice(-1)[0]
     console.log({CID, projectInfo, ipfs})
     getFiles(CID)
@@ -52,6 +50,25 @@ async function fetchAndAddDelegateProfiles(account, setState) {
   setState(profiles)
 }
 
+async function fetchAndAddDelegatePledges(profiles, setState) {
+  const dPledges = []
+  profiles.forEach(profile => {
+    const delegatePledges = getDelegatePledgesByProfile(profile)
+    dPledges.push(delegatePledges)
+  })
+  const resolved = await Promise.all(dPledges)
+  setState(unnest(resolved))
+}
+
+export function useProfileData(profiles) {
+  const [delegatePledges, setDelegatePledges] = useState(null)
+
+  useEffect(() => {
+    fetchAndAddDelegatePledges(profiles, setDelegatePledges)
+  }, [profiles])
+  return delegatePledges
+}
+
 const getProjectManifest = assets => assets ? JSON.parse(assets.find(a => a.name.toLowerCase() === 'manifest.json').content) : null
 
 export function useProjectData(projectId, profile, projectAddedEvents) {

app/model/profile.js

@@ -5,7 +5,8 @@ import { LiquidModel } from '../utils/models'
 export default class Profile extends LiquidModel {
   static table = 'profiles'
   static associations = {
-    pledges: { type: 'has_many', foreignKey: 'profile_id' }
+    pledges: { type: 'has_many', foreignKey: 'profile_id' },
+    delegates: { type: 'has_many', foreignKey: 'profile_id' }
   }
 
   @field('addr') addr
@@ -18,6 +19,7 @@ export default class Profile extends LiquidModel {
   @field('id_profile') idProfile
   @field('block_number') blockNumber
   @children('pledges') pledges
+  @children('delegates') delegates
 
   @action async markAsCanceled() {
     await this.update(profile => {