From e396a9dbdfa84a02c49c749f462c0ffd46552fc3 Mon Sep 17 00:00:00 2001
From: Magic Cat <pusz.monika@gmail.com>
Date: Thu, 27 May 2021 18:01:19 +0800
Subject: [PATCH] WIP: Add react-window pkg

---
 imports/ui/transactions/List.jsx             | 69 +++++++++++++-------
 imports/ui/transactions/ListContainer.js     |  3 +-
 imports/ui/transactions/TransactionsList.jsx | 60 +++++++++--------
 package-lock.json                            | 40 +++++++++++-
 package.json                                 |  1 +
 5 files changed, 117 insertions(+), 56 deletions(-)

diff --git a/imports/ui/transactions/List.jsx b/imports/ui/transactions/List.jsx
index 18b2ecbf4..5f43f6cef 100644
--- a/imports/ui/transactions/List.jsx
+++ b/imports/ui/transactions/List.jsx
@@ -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);
@@ -19,10 +22,10 @@ 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}
                         />
                     })
                 })    
@@ -30,24 +33,42 @@ export default class Transactions extends Component{
         }
     }
 
-    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>
+         }
+     }
 }
\ No newline at end of file
diff --git a/imports/ui/transactions/ListContainer.js b/imports/ui/transactions/ListContainer.js
index 43a62a6f5..71c1f6340 100644
--- a/imports/ui/transactions/ListContainer.js
+++ b/imports/ui/transactions/ListContainer.js
@@ -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) {
@@ -26,5 +26,6 @@ export default ValidatorDetailsContainer = withTracker((props) => {
         loading,
         transactionsExist,
         transactions: transactionsExist ? transactions : {},
+        transactionsCount: transactionsExist ? transactions.length : 0
     };
 })(List);
\ No newline at end of file
diff --git a/imports/ui/transactions/TransactionsList.jsx b/imports/ui/transactions/TransactionsList.jsx
index 95185114f..a1ed0fbcd 100644
--- a/imports/ui/transactions/TransactionsList.jsx
+++ b/imports/ui/transactions/TransactionsList.jsx
@@ -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,
@@ -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)
             })
@@ -55,15 +55,15 @@ 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 });
                 }
             })
         }
@@ -71,19 +71,19 @@ export default class Transactions extends Component{
 
     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}" />
@@ -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>
@@ -142,7 +144,7 @@ export default class Transactions extends Component{
                         </thead>
                         <tbody>
                             <List limit={this.state.limit} /></tbody>
-                     
+
 
                     </Table>
                 </CardBody>
diff --git a/package-lock.json b/package-lock.json
index b71de92da..cfa3e4245 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4698,8 +4698,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "mute-stream": {
       "version": "0.0.7",
@@ -5920,6 +5919,15 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
+    "react-window": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.6.tgz",
+      "integrity": "sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      }
+    },
     "reactstrap": {
       "version": "8.9.0",
       "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz",
@@ -6837,6 +6845,34 @@
         "supercop.js": "^2.0.1",
         "varstruct": "^6.1.1",
         "websocket-stream": "^5.1.1"
+      },
+      "dependencies": {
+        "axios": {
+          "version": "0.19.2",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+          "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+          "requires": {
+            "follow-redirects": "1.5.10"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+              "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+              "requires": {
+                "ms": "2.0.0"
+              }
+            }
+          }
+        }
       }
     },
     "text-table": {
diff --git a/package.json b/package.json
index 0077af2f0..6f9f235e6 100644
--- a/package.json
+++ b/package.json
@@ -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",