Skip to content
This repository has been archived by the owner on Dec 1, 2021. It is now read-only.

Commit

Permalink
WIP: Add react-window pkg
Browse files Browse the repository at this point in the history
  • Loading branch information
@MonikaCat
MonikaCat committed May 27, 2021
1 parent 78e3b6f commit e396a9d
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 56 deletions.
69 changes: 45 additions & 24 deletions imports/ui/transactions/List.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@ import React, { Component } from 'react';
import { Row, Col, Spinner } from 'reactstrap';
import { TransactionRow } from './TransactionRow.jsx';
import i18n from 'meteor/universe:i18n';
import { VariableSizeList } from 'react-window';

const PADDING_SIZE = 10;
const T = i18n.createComponent();

export default class Transactions extends Component{
constructor(props){
super(props);
Expand All @@ -19,35 +22,53 @@ export default class Transactions extends Component{
if (this.props.transactions.length > 0){
this.setState({
txs: this.props.transactions.map((tx, i) => {
return <TransactionRow
key={i}
index={i}
tx={tx}
return <TransactionRow
key={i}
index={i}
tx={tx}
/>
})
})
}
}
}

render(){
if (this.props.loading){
return <Spinner type="grow" color="primary" />
}
else if (!this.props.transactionsExist){
return <div><T>transactions.notFound</T></div>
}
else{
return <div className="transactions-list">
<Row className="header text-nowrap d-none d-lg-flex">
<Col xs={9} lg={this.state.homepage ? 5 : 7}><i className="material-icons">message</i> <span className="d-none d-md-inline-block"><T>transactions.activities</T></span></Col>
<Col xs={3} lg={!this.state.homepage ? { size: 1, order: "last" } : { size: 2, order: "last" }}><span className={this.state.homepage ? "ml-5" : null}><i className="fas fa-hashtag"></i> <span className="d-none d-md-inline-block"><T>transactions.txHash</T></span></span></Col>
<Col xs={4} md={2} lg={1}><i className="fas fa-database"></i> <span className="d-none d-md-inline-block"><T>common.height</T></span></Col>
<Col xs={2} md={1} className="text-nowrap"><span className={this.state.homepage ? "ml-4" : null}><i className="material-icons">check_circle</i> <span className="d-none d-lg-inline-block"><T>transactions.valid</T></span></span></Col>
{!this.state.homepage ? <Col xs={12} lg={2}><i className="material-icons">monetization_on</i> <span className="d-none d-md-inline-block"><T>transactions.fee</T></span></Col> : null }
</Row>
{this.state.txs}
</div>
}
}
getItemSize = index => (117 * (this.state.txs[index]?.props?.tx?.tx?.body?.messages.length))

TxRow = ({ index, style }) => (
<div style={{
...style,
top: `${parseFloat(style.top) + PADDING_SIZE}px`
}}>{this.state.txs[index]}</div>

);

render(){
if (this.props.loading){
return <Spinner type="grow" color="primary" />
}
else if (!this.props.transactionsExist){
return <div><T>transactions.notFound</T></div>
}
else{
return <div className="transactions-list">
<Row className="header text-nowrap d-none d-lg-flex">
<Col xs={9} lg={this.state.homepage ? 5 : 7}><i className="material-icons">message</i> <span className="d-none d-md-inline-block"><T>transactions.activities</T></span></Col>
<Col xs={3} lg={!this.state.homepage ? { size: 1, order: "last" } : { size: 2, order: "last" }}><span className={this.state.homepage ? "ml-5" : null}><i className="fas fa-hashtag"></i> <span className="d-none d-md-inline-block"><T>transactions.txHash</T></span></span></Col>
<Col xs={4} md={2} lg={1}><i className="fas fa-database"></i> <span className="d-none d-md-inline-block"><T>common.height</T></span></Col>
<Col xs={2} md={1} className="text-nowrap"><span className={this.state.homepage ? "ml-4" : null}><i className="material-icons">check_circle</i> <span className="d-none d-lg-inline-block"><T>transactions.valid</T></span></span></Col>
{!this.state.homepage ? <Col xs={12} lg={2}><i className="material-icons">monetization_on</i> <span className="d-none d-md-inline-block"><T>transactions.fee</T></span></Col> : null }
</Row>
{this.state.txs ?
<VariableSizeList
height={700}
itemCount={this.props.transactionsCount}
itemSize={this.getItemSize}
width="100%"
>
{this.TxRow}
</VariableSizeList> : ''}
</div>
}
}
}
3 changes: 2 additions & 1 deletion imports/ui/transactions/ListContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default ValidatorDetailsContainer = withTracker((props) => {
let loading = true;

if (Meteor.isClient){
transactionsHandle = Meteor.subscribe('transactions.list', props.limit);
transactionsHandle = Meteor.subscribe('transactions.list', 2200);
loading = !transactionsHandle.ready() && props.limit == Meteor.settings.public.initialPageSize;

if (!loading) {
Expand All @@ -26,5 +26,6 @@ export default ValidatorDetailsContainer = withTracker((props) => {
loading,
transactionsExist,
transactions: transactionsExist ? transactions : {},
transactionsCount: transactionsExist ? transactions.length : 0
};
})(List);
60 changes: 31 additions & 29 deletions imports/ui/transactions/TransactionsList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ import i18n from 'meteor/universe:i18n';

const T = i18n.createComponent();

export default class Transactions extends Component{
constructor(props){
export default class Transactions extends Component {
constructor(props) {
super(props);

this.state = {
limit: props.homepage ? 16: Meteor.settings.public.initialPageSize,
limit: props.homepage ? 16 : Meteor.settings.public.initialPageSize,
monikerDir: 1,
votingPowerDir: -1,
uptimeDir: -1,
Expand All @@ -33,17 +33,17 @@ export default class Transactions extends Component{
isBottom(el) {
return el.getBoundingClientRect().bottom <= window.innerHeight;
}

componentDidMount() {
document.addEventListener('scroll', this.trackScrolling);
}

componentWillUnmount() {
document.removeEventListener('scroll', this.trackScrolling);
}
componentDidUpdate(prevProps){
if (this.props?.location?.pathname != prevProps?.location?.pathname){

componentDidUpdate(prevProps) {
if (this.props?.location?.pathname != prevProps?.location?.pathname) {
this.setState({
sidebarOpen: (this.props?.location?.pathname.split("/transactions/").length == 2)
})
Expand All @@ -55,35 +55,35 @@ export default class Transactions extends Component{
if (this.isBottom(wrappedElement)) {
// console.log('header bottom reached');
document.removeEventListener('scroll', this.trackScrolling);
this.setState({loadmore:true});
this.setState({ loadmore: true });
this.setState({
limit: this.state.limit+10
limit: this.state.limit + 10
}, (err, result) => {
if (!err){
if (!err) {
document.addEventListener('scroll', this.trackScrolling);
}
if (result){
this.setState({loadmore:false});
if (result) {
this.setState({ loadmore: false });
}
})
}
};

onSetSidebarOpen(open) {
// console.log(open);
this.setState({ sidebarOpen: open }, (error, result) =>{
this.setState({ sidebarOpen: open }, (error, result) => {
let timer = Meteor.setTimeout(() => {
if (!open){
if (!open) {
this.props.history.push('/transactions');
}
Meteor.clearTimeout(timer);
},500)
}, 500)
});

}

render(){
return !this.props.homepage ? <div>
render() {
return !this.props.homepage ? <div id="transactions">
<Helmet>
<title>Latest Transactions on {Meteor.settings.public.chainName} | Big Dipper</title>
<meta name="description" content="See what is happening on {Meteor.settings.public.chainName}" />
Expand All @@ -93,18 +93,20 @@ export default class Transactions extends Component{
<Col md={9} xs={12} className="text-md-right"><ChainStates /></Col>
</Row>
<Switch>
<Route path="/transactions/:txId" render={(props)=> <Sidebar
<Route path="/transactions/:txId" render={(props) => <Sidebar
sidebar={<Transaction {...props} />}
open={this.state.sidebarOpen}
onSetOpen={this.onSetSidebarOpen}
styles={{ sidebar: {
background: "white",
position: "fixed",
width: '85%',
zIndex: 4
},overlay: {
zIndex: 3
} }}
styles={{
sidebar: {
background: "white",
position: "fixed",
width: '85%',
zIndex: 4
}, overlay: {
zIndex: 3
}
}}
>
</Sidebar>} />
</Switch>
Expand Down Expand Up @@ -142,7 +144,7 @@ export default class Transactions extends Component{
</thead>
<tbody>
<List limit={this.state.limit} /></tbody>


</Table>
</CardBody>
Expand Down
40 changes: 38 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"react-showdown": "^1.6.0",
"react-sidebar": "^3.0.2",
"react-toastify": "^4.5.2",
"react-window": "^1.8.6",
"reactstrap": "^8.9.0",
"rollup": "^2.49.0",
"secp256k1": "^3.8.0",
Expand Down

0 comments on commit e396a9d

Please sign in to comment.