loading handling for projects page

2019-02-14 14:02:00 -05:00 · 2019-02-14 14:02:00 -05:00 · ad991066d7
parent c5b734b175
commit ad991066d7
7 changed files with 101 additions and 69 deletions
--- 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)
--- 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'

--- a/app/components/base/Loading.css
+++ 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);
+  }
+}
--- a/app/components/base/Loading.jsx
+++ 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 (
+    <div className="Loading-container">
+      <img className="Loading-logo" id="loading" src="https://our.status.im/content/images/2018/07/status_logo_blue_1--2-.png" />
+      <Typography style={{ fontSize: '1.5rem' }}>Hold on while we gather the latest information</Typography>
+    </div>
+  )
+}
+
+export default Loading
--- 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 (
-    <div className={classes.root}>
-      <div className={classes.creator}>
-        <Avatar src={manifest && manifest.avatar} />
-        <Typography className={classes.creatorName}>{manifest && `By ${manifest.creator}`}</Typography>
-      </div>
-      <div>
-        <Typography className={classes.title} component="h2" gutterBottom>
-          {manifest && manifest.title}
-        </Typography>
-        <Typography className={classes.subTitle} component="h5" gutterBottom>
-          {manifest && manifest.subtitle}
-        </Typography>
-      </div>
-      <div className={classes.secondRow}>
-        {mediaType
-        ? <ReactPlayer width="100%" height="100%" url={mediaUrl} playing={manifest.media.isPlaying} />
-        : <CardMedia
-            component="img"
-            alt="video"
-            className={classes.media}
-            src={mediaUrl}
-            title="media-description"
-        />}
-        <div className={classes.infoBox}>
-          <LinearProgress
-            classes={{
-              colorPrimary: classes.linearColorPrimary,
-              barColorPrimary: classes.linearBarColorPrimary,
-            }}
-            variant="determinate"
-            value={percentToGoal}
-          />
-          <div className={classes.infoBoxSection}>
-            <span className={classes.raisedAmount}>
-              {`${totalPledged.toLocaleString()} ${amountsPledged[0] ? amountsPledged[0][0] : ''}`}
-            </span>
-            <span className={classes.subtext}>{manifest && `pledged of ${Number(manifest.goal).toLocaleString()} goal`}</span>
+    !profile.length || !projectAssets
+    ? <Loading />
+    :
+      <div className={classes.root}>
+        <div className={classes.creator}>
+          <Avatar src={manifest && manifest.avatar} />
+          <Typography className={classes.creatorName}>{manifest && `By ${manifest.creator}`}</Typography>
+        </div>
+        <div>
+          <Typography className={classes.title} component="h2" gutterBottom>
+            {manifest && manifest.title}
+          </Typography>
+          <Typography className={classes.subTitle} component="h5" gutterBottom>
+            {manifest && manifest.subtitle}
+          </Typography>
+        </div>
+        <div className={classes.secondRow}>
+          {mediaType
+          ? <ReactPlayer width="100%" height="100%" url={mediaUrl} playing={manifest.media.isPlaying} />
+          : <CardMedia
+              component="img"
+              alt="video"
+              className={classes.media}
+              src={mediaUrl}
+              title="media-description"
+          />}
+          <div className={classes.infoBox}>
+            <LinearProgress
+              classes={{
+                colorPrimary: classes.linearColorPrimary,
+                barColorPrimary: classes.linearBarColorPrimary,
+              }}
+              variant="determinate"
+              value={percentToGoal}
+            />
+            <div className={classes.infoBoxSection}>
+              <span className={classes.raisedAmount}>
+                {`${totalPledged.toLocaleString()} ${amountsPledged[0] ? amountsPledged[0][0] : ''}`}
+              </span>
+              <span className={classes.subtext}>{manifest && `pledged of ${Number(manifest.goal).toLocaleString()} goal`}</span>
+            </div>
+            <div className={classes.infoBoxSection}>
+              <span className={classes.infoText}>{numberOfBackers}</span>
+              <span className={classes.subtext}>backers</span>
+            </div>
+            <div className={classes.infoBoxSection}>
+              <span className={classes.infoText}>{projectAge}</span>
+              <span className={classes.subtext}>days active</span>
+            </div>
+            <Button color="primary" variant="contained" style={{ height: '50px' }}>Back this project</Button>
          </div>
-          <div className={classes.infoBoxSection}>
-            <span className={classes.infoText}>{numberOfBackers}</span>
-            <span className={classes.subtext}>backers</span>
-          </div>
-          <div className={classes.infoBoxSection}>
-            <span className={classes.infoText}>{projectAge}</span>
-            <span className={classes.subtext}>days active</span>
-          </div>
-          <Button color="primary" variant="contained" style={{ height: '50px' }}>Back this project</Button>
        </div>
      </div>
-    </div>
  )
 }

--- a/app/components/table/TransferCard.jsx
+++ b/app/components/table/TransferCard.jsx
@ -119,7 +119,7 @@ function TransferCard({ row, handleClose, classes }) {
                  <Button size="large" onClick={close}>
                    Cancel
                  </Button>
-                  <Button size="large" onClick={submitForm} color="primary" type="submit">
+                  <Button size="large" color="primary" type="submit">
                    Transfer
                  </Button>
                </CardActions>
--- 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 }) {
            <Card className={classes.card} elevation={0}>
              <CardContent>
                <Typography variant="h6" component="h2">
-                  {`${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}`}
                </Typography>
                {!isPaying && <TextField
                                className={classes.amount}