feat: multiple items

This commit is contained in:
Richard Ramos 2019-08-20 16:17:23 -04:00
parent 633346d478
commit 4049688511
3 changed files with 46 additions and 26 deletions

View File

@ -7,22 +7,22 @@ import Ranking from '../embarkArtifacts/contracts/Ranking';
import Phoenix from 'phoenix'; import Phoenix from 'phoenix';
import withObservables from '@nozbe/with-observables' import withObservables from '@nozbe/with-observables'
const {scan} = require('rxjs/operators'); const { scan, map } = require('rxjs/operators');
import { of } from 'rxjs'; import { of } from 'rxjs';
const phoenix = new Phoenix(web3); const phoenix = new Phoenix(web3);
const RankItem = ({votes, onUpvote, onDownvote}) => ( const RankItem = ({items, onUpvote, onDownvote}) => {
<div> return items.map((item, i) => <div key={i} className="item">
<b>1</b> - 0x00000000000000000000000000001<br /> <b>{i+1}</b> - {item.addr}<br />
Upvotes: {votes.upvotes} - Downvotes: {votes.downvotes}<br /> Upvotes: {item.upvotes} - Downvotes: {item.downvotes}<br />
<button onClick={onUpvote}>Upvote</button> | <button onClick={onDownvote}>Downvote</button> <button onClick={onUpvote(item.addr)}>Upvote</button> | <button onClick={onDownvote(item.addr)}>Downvote</button>
</div> </div>);
); };
const enhance = withObservables(['votes'], ({ votes }) => ({votes: votes || of({ /* default empty object */ })})); const enhance = withObservables(['items'], ({ items }) => ({items: items || of({ /* default empty object */ })}));
const EnhancedRankItem = enhance(RankItem) const EnhancedRankItem = enhance(RankItem)
const observables = {}; const observables = {};
@ -40,15 +40,24 @@ class App extends React.Component {
} }
phoenix.init(() => { phoenix.init(() => {
observables.votes = phoenix.trackEvent(Ranking, 'Rating', {filter: {}, fromBlock: 1}).pipe( observables.items = phoenix
.trackEvent(Ranking, 'Rating', {filter: {}, fromBlock: 1})
.pipe(
scan((acc, curr) => { scan((acc, curr) => {
if(curr.rating >= 3){ const votes = {...acc[curr.addr]} || {};
acc.upvotes++; return {
} else { ...acc,
acc.downvotes++; [curr.addr]: {
upvotes: (votes.upvotes || 0) + (curr.rating >= 3 ? 1 : 0),
downvotes: (votes.downvotes || 0) + (curr.rating < 3 ? 1 : 0)
} }
return acc; }
}, {upvotes: 0, downvotes: 0}) }, {}),
map(summary => {
return Object.keys(summary).map(k => {
return {addr: k, ...summary[k]}
})
})
); );
this.setState({ready: true}); this.setState({ready: true});
@ -56,18 +65,18 @@ class App extends React.Component {
}); });
} }
upvote = () => { upvote = address => () => {
Ranking.methods.rate("0x0000000000000000000000000000000000000001", 5).send(); Ranking.methods.rate(address, 5).send();
} }
downvote = () => { downvote = address => () => {
Ranking.methods.rate("0x0000000000000000000000000000000000000001", 1).send(); Ranking.methods.rate(address, 1).send();
} }
render() { render() {
const {ready} = this.state; const {ready} = this.state;
if(!ready) return <span>Loading...</span>; if(!ready) return <span>Loading...</span>;
return <EnhancedRankItem votes={observables.votes} onUpvote={this.upvote} onDownvote={this.downvote} />; return <EnhancedRankItem items={observables.items} onUpvote={this.upvote} onDownvote={this.downvote} />;
} }
} }

View File

@ -1,5 +1,10 @@
<html> <html>
<head> <head>
<style type="text/css">
div.item {
margin-bottom: 20px;
}
</style>
</head> </head>
<body> <body>
<div id="content"></div> <div id="content"></div>

View File

@ -57,7 +57,13 @@ module.exports = {
// filteredFields: [], // filteredFields: [],
contracts: { contracts: {
"Ranking": {
onDeploy: async (dependencies) => {
await dependencies.contracts.Ranking.methods.rate('0xcafecafecafecafecafecafecafecafecafecafe', 4).send({from: dependencies.web3.eth.defaultAccount}),
await dependencies.contracts.Ranking.methods.rate('0x0001020304050607080900010203040506070809', 1).send({from: dependencies.web3.eth.defaultAccount}),
await dependencies.contracts.Ranking.methods.rate('0x0000000100000001000000010000000100000001', 3).send({from: dependencies.web3.eth.defaultAccount})
}
}
} }
}, },