diff --git a/app/components/projects/BackProject.jsx b/app/components/projects/BackProject.jsx index 89073b6..e5963b4 100644 --- a/app/components/projects/BackProject.jsx +++ b/app/components/projects/BackProject.jsx @@ -1,5 +1,9 @@ import React, { useMemo, useState, useEffect } from 'react' +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 Divider from '@material-ui/core/Divider' const styles = theme => ({ @@ -23,23 +27,30 @@ const styles = theme => ({ } }) -const Title = ({ className }) => ( +const Title = ({ className, manifest }) => (
-
Back Project Page
-
By Status Network
+
{manifest && manifest.title}
+
{manifest && `By ${manifest.creator}`}
) -function BackProject({classes, match}) { +function BackProject({classes, match, profile, projectAddedEvents}) { const projectId = match.params.id - console.log({projectId}) + const { projectAge, projectAssets, manifest } = useProjectData(projectId, profile, projectAddedEvents) return (
- + <Title className={classes.title} manifest={manifest} /> </div> ) } const StyledProject = withStyles(styles)(BackProject) -export default StyledProject +export default withDatabase(withObservables([], ({ database, match }) => ({ + profile: database.collections.get('profiles').query( + Q.where('id_profile', match.params.id) + ).observe(), + projectAddedEvents: database.collections.get('lp_events').query( + Q.where('event', 'ProjectAdded') + ).observe() +}))(StyledProject)) diff --git a/app/components/projects/hooks.js b/app/components/projects/hooks.js new file mode 100644 index 0000000..366d14a --- /dev/null +++ b/app/components/projects/hooks.js @@ -0,0 +1,41 @@ +import web3 from 'Embark/web3' +import { useState, useEffect, useMemo } from 'react' +import { timeSinceBlock } from '../../utils/dates' +import { getFiles } from '../../utils/ipfs' + +async function getProjectAge(id, events, setState){ + const event = events.find(e => e.returnValues.idProject === id) + const { timestamp } = await web3.eth.getBlock(event.blockNumber) + setState(timeSinceBlock(timestamp, 'days')) +} + +async function getProjectAssets(hash, setState){ + console.log({hash}) + const CID = hash.split('/').slice(-1)[0] + getFiles(CID) + .then((files) => { + setState(files) + const manifest = files[2] + console.log({files}, JSON.parse(manifest.content)) + }) + .catch(console.log) +} + +const getProjectManifest = assets => assets ? JSON.parse(assets.find(a => a.name.toLowerCase() === 'manifest.json').content) : null + +export function useProjectData(projectId, profile, projectAddedEvents) { + const [projectAge, setAge] = useState(null) + const [projectAssets, setAssets] = useState(null) + + useEffect(() => { + getProjectAge(projectId, projectAddedEvents, setAge) + }, [projectAddedEvents]) + + useEffect(() => { + if (profile[0]) getProjectAssets(profile[0].url, setAssets) + }, [profile]) + + const manifest = useMemo(() => getProjectManifest(projectAssets), [projectAssets]) + + return { projectAge, projectAssets, manifest } +}