Preloading all ipfs content and css styling

This commit is contained in:
Richard Ramos 2018-10-16 18:52:40 -04:00
parent 0c2b5ac5e3
commit 1d3e7d7006
7 changed files with 73 additions and 46 deletions

View File

@ -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} />

View File

@ -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

View File

@ -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>

View File

@ -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

View File

@ -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,22 +69,20 @@ 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">
<img src="images/logo.png" width="200" />

View File

@ -49,3 +49,14 @@
#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;
}

View File

@ -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 });
}