mirror of
https://github.com/embarklabs/subspace.git
synced 2025-01-23 12:59:25 +00:00
feat: multiple items
This commit is contained in:
parent
633346d478
commit
4049688511
@ -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,34 +40,43 @@ class App extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
phoenix.init(() => {
|
phoenix.init(() => {
|
||||||
observables.votes = phoenix.trackEvent(Ranking, 'Rating', {filter: {}, fromBlock: 1}).pipe(
|
observables.items = phoenix
|
||||||
scan((acc, curr) => {
|
.trackEvent(Ranking, 'Rating', {filter: {}, fromBlock: 1})
|
||||||
if(curr.rating >= 3){
|
.pipe(
|
||||||
acc.upvotes++;
|
scan((acc, curr) => {
|
||||||
} else {
|
const votes = {...acc[curr.addr]} || {};
|
||||||
acc.downvotes++;
|
return {
|
||||||
}
|
...acc,
|
||||||
return acc;
|
[curr.addr]: {
|
||||||
}, {upvotes: 0, downvotes: 0})
|
upvotes: (votes.upvotes || 0) + (curr.rating >= 3 ? 1 : 0),
|
||||||
);
|
downvotes: (votes.downvotes || 0) + (curr.rating < 3 ? 1 : 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {}),
|
||||||
|
map(summary => {
|
||||||
|
return Object.keys(summary).map(k => {
|
||||||
|
return {addr: k, ...summary[k]}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
this.setState({ready: true});
|
this.setState({ready: true});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
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} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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})
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user