From ad991066d739fde4e19b97d29661cd364db234d0 Mon Sep 17 00:00:00 2001 From: Barry Gitarts Date: Thu, 14 Feb 2019 14:02:00 -0500 Subject: [PATCH] loading handling for projects page --- app/actions/pledges.js | 1 - app/components/PledgesTable.jsx | 3 +- app/components/base/Loading.css | 21 +++++ app/components/base/Loading.jsx | 15 ++++ app/components/projects/Project.jsx | 124 +++++++++++++------------- app/components/table/TransferCard.jsx | 2 +- app/components/table/WithdrawCard.jsx | 4 +- 7 files changed, 101 insertions(+), 69 deletions(-) create mode 100644 app/components/base/Loading.css create mode 100644 app/components/base/Loading.jsx diff --git a/app/actions/pledges.js b/app/actions/pledges.js index 8020f41..8f5fbdd 100644 --- a/app/actions/pledges.js +++ b/app/actions/pledges.js @@ -6,7 +6,6 @@ import { getProfilesById } from './profiles' const createPledge = (pledge, data, profiles) => { const { id, owner, amount, blockNumber, token, commitTime, nDelegates, pledgeState, intendedProject } = data - console.log({data}) const profile = profiles.find(p => p.idProfile == owner) pledge.pledgeId = Number(id) pledge.owner = Number(owner) diff --git a/app/components/PledgesTable.jsx b/app/components/PledgesTable.jsx index 6ac5eea..7ebb331 100644 --- a/app/components/PledgesTable.jsx +++ b/app/components/PledgesTable.jsx @@ -1,10 +1,9 @@ -import React, { Fragment, Component } from 'react' +import React, { Component } from 'react' import MaterialTable from 'material-table' import withObservables from '@nozbe/with-observables' import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider' import { toEther } from '../utils/conversions' import { getTokenLabel } from '../utils/currencies' -import TransferDialog from './TransferDialog' import TransferCard from './table/TransferCard' import WithdrawCard from './table/WithdrawCard' diff --git a/app/components/base/Loading.css b/app/components/base/Loading.css new file mode 100644 index 0000000..4ff31f2 --- /dev/null +++ b/app/components/base/Loading.css @@ -0,0 +1,21 @@ +.Loading-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.Loading-logo { + animation: Loading-logo-spin infinite 20s linear; + height: 40vmin; + pointer-events: none; + margin-bottom: 20%; +} + +@keyframes Loading-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/app/components/base/Loading.jsx b/app/components/base/Loading.jsx new file mode 100644 index 0000000..4280937 --- /dev/null +++ b/app/components/base/Loading.jsx @@ -0,0 +1,15 @@ +import React from 'react' +import Typography from '@material-ui/core/Typography' + +import './Loading.css' + +function Loading() { + return ( +
+ + Hold on while we gather the latest information +
+ ) +} + +export default Loading diff --git a/app/components/projects/Project.jsx b/app/components/projects/Project.jsx index b8222c7..9d62990 100644 --- a/app/components/projects/Project.jsx +++ b/app/components/projects/Project.jsx @@ -5,13 +5,9 @@ import Button from '@material-ui/core/Button' import withObservables from '@nozbe/with-observables' import { Q } from '@nozbe/watermelondb' import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider' -import Card from '@material-ui/core/Card' -import CardHeader from '@material-ui/core/CardHeader' import CardMedia from '@material-ui/core/CardMedia' -import CardContent from '@material-ui/core/CardContent' -import CardActions from '@material-ui/core/CardActions' -import CardActionArea from '@material-ui/core/CardActionArea' import LinearProgress from '@material-ui/core/LinearProgress' +import Loading from '../base/Loading' import Avatar from '@material-ui/core/Avatar' import ReactPlayer from 'react-player' import { uniqBy, length } from 'ramda' @@ -135,12 +131,12 @@ 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) + .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 @@ -169,6 +165,7 @@ const getMediaSrc = assets => { } } + function Project({ classes, match, profile, transfers, pledges, projectAddedEvents }) { const projectId = match.params.id const [projectAge, setAge] = useState(null) @@ -179,11 +176,9 @@ function Project({ classes, match, profile, transfers, pledges, projectAddedEven }, [projectAge]) useEffect(() => { - getProjectAssets(profile[0].url, setAssets) + if (profile[0]) getProjectAssets(profile[0].url, setAssets) }, [profile]) - const received = useMemo(() => getReceivedAmount(projectId, transfers), [projectId, transfers]) - const withdrawn = useMemo(() => getWithdrawnAmount(projectId, transfers), [projectId, transfers]) const amountsPledged = useMemo(() => getAmountsPledged(pledges), [pledges]) const numberOfBackers = useMemo(() => getNumberOfBackers(pledges), [pledges]) const mediaType = useMemo(() => getMediaType(projectAssets), [projectAssets]) @@ -193,59 +188,62 @@ function Project({ classes, match, profile, transfers, pledges, projectAddedEven const percentToGoal = manifest ? Math.min( (Number(totalPledged) / Number(manifest.goal)) * 100, 100 - ) : 0 - console.log({profile, projectAssets, mediaUrl, mediaType, amountsPledged}) + ) : 0 + console.log({profile, projectAssets, mediaUrl, mediaType, amountsPledged, pledges, transfers}) return ( -
-
- - {manifest && `By ${manifest.creator}`} -
-
- - {manifest && manifest.title} - - - {manifest && manifest.subtitle} - -
-
- {mediaType - ? - : } -
- -
- - {`${totalPledged.toLocaleString()} ${amountsPledged[0] ? amountsPledged[0][0] : ''}`} - - {manifest && `pledged of ${Number(manifest.goal).toLocaleString()} goal`} + !profile.length || !projectAssets + ? + : +
+
+ + {manifest && `By ${manifest.creator}`} +
+
+ + {manifest && manifest.title} + + + {manifest && manifest.subtitle} + +
+
+ {mediaType + ? + : } +
+ +
+ + {`${totalPledged.toLocaleString()} ${amountsPledged[0] ? amountsPledged[0][0] : ''}`} + + {manifest && `pledged of ${Number(manifest.goal).toLocaleString()} goal`} +
+
+ {numberOfBackers} + backers +
+
+ {projectAge} + days active +
+
-
- {numberOfBackers} - backers -
-
- {projectAge} - days active -
-
-
) } diff --git a/app/components/table/TransferCard.jsx b/app/components/table/TransferCard.jsx index c278b81..5fac265 100644 --- a/app/components/table/TransferCard.jsx +++ b/app/components/table/TransferCard.jsx @@ -119,7 +119,7 @@ function TransferCard({ row, handleClose, classes }) { - diff --git a/app/components/table/WithdrawCard.jsx b/app/components/table/WithdrawCard.jsx index 625674d..e7efd8b 100644 --- a/app/components/table/WithdrawCard.jsx +++ b/app/components/table/WithdrawCard.jsx @@ -37,7 +37,7 @@ function Withdraw({ handleClose, classes, rowData, authorizedPayment }) { const toSend = sendFn(...args) const estimateGas = await toSend.estimateGas() toSend - .send({ gas: estimateGas + 1000 }) + .send({ gas: estimateGas }) .then(res => { console.log({res}) }) @@ -68,7 +68,7 @@ function Withdraw({ handleClose, classes, rowData, authorizedPayment }) { - {`${isPaying ? 'Confirm' : ''} Withdraw${isPaying ? 'al' : ''} ${values.amount || ''} ${values.amount ? getTokenLabel(rowData[6]) : ''} from Pledge ${rowData.pledgeId}`} + {`${isPaying ? 'Confirm' : ''} Withdraw${isPaying ? 'al' : ''} ${values.amount || ''} ${values.amount ? getTokenLabel(rowData.pledge.token) : ''} from Pledge ${rowData.pledgeId}`} {!isPaying &&