Preloading all ipfs content and css styling

app/components/Voting.js

@@ -21,6 +21,7 @@ class Voting extends PureComponent {
   render(){
     const { addPoll } = this.state;
     const togglePoll = () => { this.setState({ addPoll: !addPoll })};
+
     return (
       <VotingContext.Consumer>
         {({ getPolls, rawPolls, loading, symbol }) =>
@@ -34,7 +35,7 @@ class Voting extends PureComponent {
             <div id="votingDapp">
               <Switch>
                 <Route exact path="/" render={() => <TitleScreen polls={rawPolls} />} />
-                <Route path="/learn" component={LearnAboutBallots} />
+                <Route path="/learn" render={() => <LearnAboutBallots polls={rawPolls} />} />
                 <Route path="/votingHelp" render={HowVotingWorks} />
                 <Route path="/wallet" render={ConnectYourWallet} />
                 <Route path="/otherWallets" render={OtherWallets} />

app/components/flow/HowVotingWorks.js

@@ -7,7 +7,7 @@ import Typography from '@material-ui/core/Typography';
 
 const HowVotingWorks = (props) => <div className="section">
   <Typography variant="headline">How voting works</Typography>
-  <Card>
+  <Card className="card">
     <CardContent>
       <Typography gutterBottom component="h2">
         Any wallet with SNT can vote
@@ -17,7 +17,7 @@ const HowVotingWorks = (props) => <div className="section">
       </Typography>
     </CardContent>
   </Card>
-  <Card>
+  <Card className="card">
     <CardContent>
       <Typography gutterBottom component="h2">
         You don't spend your SNT!
@@ -27,7 +27,7 @@ const HowVotingWorks = (props) => <div className="section">
       </Typography>
     </CardContent>
   </Card>
-  <Card>
+  <Card className="card">
     <CardContent>
       <Typography gutterBottom component="h2">
       Your vote counts

app/components/flow/LearnAboutBallots.js

@@ -12,12 +12,16 @@ import DialogContent from '@material-ui/core/DialogContent';
 
 class LearnAboutBallots extends Component {
   state = {
-    open: false
+    open: false,
+    dialogTitle: '',
+    dialogText: ''
   };
 
-  handleClickOpen = () => {
+  handleClickOpen = (dialogTitle, dialogText) => {
     this.setState({
-    open: true,
+      open: true,
+      dialogTitle,
+      dialogText
     });
   };
 
@@ -26,23 +30,36 @@ class LearnAboutBallots extends Component {
   };
 
   render(){
+    const {polls} = this.props;
+
+    let title, ballots = [];
+    if(polls && polls.length){
+      title = polls[0].content.title;
+      ballots = polls[0].content.ballots;
+    }
+
     return (
-    <div>
-        <Typography variant="headline">What should Status Incubate invest in next?</Typography>
+    <div class="section">
+        <Typography variant="headline">{title}</Typography>
         <BallotDialog
-          selectedValue={this.state.selectedValue}
+          title={this.state.dialogTitle}
+          text={this.state.dialogText}
           open={this.state.open}
           onClose={this.handleClose}
         />
-        <Card>
-        <CardContent>
-            <Typography gutterBottom component="h2">Pixura</Typography>
-            <Typography component="p">A protocol for digital asset ownership</Typography>
-        </CardContent>
-        <CardActions>
-            <Button size="small" color="primary" onClick={this.handleClickOpen}>Learn more &gt;</Button>
-        </CardActions>
-        </Card>
+        {
+          ballots.map((item, i) => {
+            return <Card key={i} className="card">
+              <CardContent>
+                  <Typography gutterBottom component="h2">{item.title}</Typography>
+                  <Typography component="p">{item.subtitle}</Typography>
+              </CardContent>
+              <CardActions>
+                  <Button size="small" color="primary" onClick={() => this.handleClickOpen(item.title, item.content)}>Learn more &gt;</Button>
+              </CardActions>
+            </Card>
+          })
+        }
         <Link to="/votingHelp"> <Button>How voting works</Button></Link>
     </div>
     );
@@ -60,13 +77,13 @@ class BallotDialog extends Component {
   };
   
   render() {
-    const { onClose, selectedValue, ...other } = this.props;
-  
+    const { onClose, title, text, polls, ...other } = this.props;
+   
     return (
     <Dialog onClose={this.handleClose} aria-labelledby="simple-dialog-title" {...other}>
-      <DialogTitle>Pixura</DialogTitle>
+      <DialogTitle>{title}</DialogTitle>
       <DialogContent>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <Typography variant="body1" component="div">{text}</Typography>
       </DialogContent>
       <DialogActions>
         <Button onClick={this.handleClose} color="primary" autoFocus>Ok</Button>

app/components/flow/OtherWallets.js

@@ -8,7 +8,7 @@ import Typography from '@material-ui/core/Typography';
 const OtherWallets = (props) => <div className="section">
   <Typography variant="headline">Connect with another wallet</Typography>
   <Typography variant="body1">Do you hold your SNT in another wallet? Don't worry, we've got you covered. You can also vote using the following wallets.</Typography>
-  <Card>
+  <Card className="card">
     <CardContent>
       <Typography gutterBottom component="h2">
         Ledger or Metamask
@@ -21,7 +21,7 @@ const OtherWallets = (props) => <div className="section">
       </Typography>
     </CardContent>
   </Card>
-  <Card>
+  <Card className="card">
     <CardContent>
       <Typography gutterBottom component="h2">
         Web3 wallet / browser
@@ -31,7 +31,7 @@ const OtherWallets = (props) => <div className="section">
       </Typography>
     </CardContent>
   </Card>
-  <Card>
+  <Card className="card">
     <CardContent>
       <Typography gutterBottom component="h2">
         Exchanges

app/components/flow/TitleScreen.js

@@ -12,8 +12,6 @@ const pad = (n, width, z) => {
 class TitleScreen extends Component {
 
   state = {
-    ipfsHash: '',
-    content: {},
     time: {},
     seconds: 100000
   }
@@ -57,18 +55,9 @@ class TitleScreen extends Component {
     clearInterval(this.timer);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps){
     if (this.props.polls !== prevProps.polls) {
-      if(this.state.ipfsHash === ''){
-        const ipfsHash = web3.utils.toAscii(this.props.polls[0]._description);
-        this.setState({ipfsHash});
-        EmbarkJS.Storage.get(ipfsHash).then(text => {
-          this.setState({content: JSON.parse(text)});
-        });
-      }
-      
       const seconds = this.props.polls[0]._endTime - (new Date()).getTime() / 1000
-
       if(seconds > 0){
         let timeLeftVar = this.secondsToTime(seconds);
         this.setState({ time: timeLeftVar, seconds });
@@ -80,21 +69,19 @@ class TitleScreen extends Component {
   }
 
   render(){
-    const {time, content, seconds} = this.state;
-    const {title, description} = content;
+    const {time, seconds} = this.state;
     const {polls} = this.props;
-
     let canceled = true;
-    let startBlock, endTime;
+
+    let startBlock, endTime, title, description;
 
     if(polls && polls.length){
+      title = polls[0].content.title;
+      description = polls[0].content.description;
       canceled = polls[0]._canceled;
       startBlock = polls[0]._startBlock;
       endTime = polls[0]._endTime;
     }
-
-
-
     
     return (polls && !canceled ? <div>
       <div className="section">

app/css/styles.css

@@ -48,4 +48,15 @@
 
 #votingDapp div.center {
     text-align: center;
+}
+
+#votingDapp div.card {
+    margin-top: 1em;
+    border: 1px solid #edf2f5;
+    border-radius: 3px;
+    box-shadow: none;
+}
+
+#votingDapp div.card h2 {
+    font-weight: bold;
 }

app/dapp.js

@@ -52,12 +52,23 @@ class App extends React.Component {
     this.setState({account: _account});
   }
 
+  _loadIPFSContent = async (polls) => {
+    let promises = polls.map((item,i) => EmbarkJS.Storage.get(web3.utils.toAscii(item._description)));
+    let ipfsContent = await Promise.all(promises);
+    
+    for(let i = 0; i < polls.length; i++){
+      polls[i].content = JSON.parse(ipfsContent[i]);
+    }
+
+    this.setState({ rawPolls: polls, loading: false });
+  }
+
   _getPolls = async () => {
     this.setState({ loading: true })
     const { nPolls, poll } = PollManager.methods;
     const polls = await nPolls().call();
     if (polls) getPolls(polls, poll).then(omitPolls).then(rawPolls => { 
-      this.setState({ rawPolls, loading: false });
+      this._loadIPFSContent(rawPolls);
     });
     else this.setState({ rawPolls: [], loading: false });
   }