fix: Simplify DB paginations (especially for Txs of old chains) (#30)

README.md

@@ -67,7 +67,7 @@ const endpoint = 'localhost';
 
 MediBloc Explorer Client is using Webpack.
 
-If you want to watch all the changes of the code in real time, run the following command. It will run the MediBloc Explorer on the port 3000(<http://localhost:3000>).
+If you want to watch all the changes of the code in real time, run the following command. It will run the MediBloc Explorer on the port 8080(<http://localhost:8080>).
 
 `yarn start`
 

client/src/components/AccountList/AccountList.js

@@ -49,8 +49,7 @@ class AccountList extends Component {
     const props = nextProps || this.props;
     const { location: { search } } = props;
     const { page = 1 } = qs.parse(search);
-    const { medState: { numAccount } } = props;
-    const { from, to } = ranger(page, numAccount, contentsInPage);
+    const { from, to } = ranger(page, contentsInPage);
     w.loader(BlockchainActions.getAccounts({ from, to }));
   }
 

client/src/components/BPList/BPList.js

@@ -62,8 +62,7 @@ class BPList extends Component {
     const props = nextProps || this.props;
     const { location: { search } } = props;
     const { page = 1 } = qs.parse(search);
-    const { medState: { numCandidate } } = props;
-    const { from, to } = ranger(page, numCandidate, bpsInPage);
+    const { from, to } = ranger(page, bpsInPage);
     w.loader(BlockchainActions.getBPs({ from, to }));
   }
 

client/src/components/BlockList/BlockList.js

@@ -50,8 +50,7 @@ class BlockList extends Component {
     const props = nextProps || this.props;
     const { location: { search } } = props;
     const { page = 1 } = qs.parse(search);
-    const { medState: { height } } = props;
-    const { from, to } = ranger(page, height, contentsInPage);
+    const { from, to } = ranger(page, contentsInPage);
     w.loader(
       BlockchainActions
         .getBlocks({ from, to }),

client/src/components/TxList/TxList.js

@@ -35,14 +35,14 @@ class TxList extends Component {
   }
 
   getTxs() {
-    const { page, medState: { numTx } } = this.props;
-    const { from, to } = ranger(page, numTx, contentsInPage);
+    const { page } = this.props;
+    const { from, to } = ranger(page, contentsInPage);
     w.loader(BlockchainActions.getTxs({ from, to }));
   }
 
   getAccTxs() {
     const { account, page } = this.props;
-    const { from, to } = ranger(page, account.totalTxs, contentsInPage);
+    const { from, to } = ranger(page, contentsInPage);
     w.loader(BlockchainActions.getAccountDetail({
       address: account.address,
       from,
@@ -61,7 +61,7 @@ class TxList extends Component {
     } = this.props;
     const titles = txTitleList[type];
     const spaces = txSpaceList[type];
-    const { from, to } = ranger(page, txs.length, contentsInPage);
+    const { from, to } = ranger(page, contentsInPage);
 
     return (
       <div className="txList">
@@ -119,7 +119,6 @@ class TxList extends Component {
 
 TxList.propTypes = {
   account: PropTypes.object,
-  medState: PropTypes.object,
   txList: PropTypes.array.isRequired,
   txs: PropTypes.array.isRequired,
 
@@ -131,7 +130,6 @@ TxList.propTypes = {
 
 TxList.defaultProps = {
   account: {},
-  medState: {},
 };
 
 export default TxList;

client/src/config.js

@@ -1,5 +1,5 @@
 // export const NODE_ENDPOINT = '/api/v1';
-export const NODE_ENDPOINT = 'http://localhost:3000/api/v1';
+export const NODE_ENDPOINT = 'http://localhost:8080/api/v1';
 
 
 

client/src/lib/ranger.js

@@ -1,5 +1,4 @@
-const ranger = (page, amount, contentsInPage) => {
-  if (amount < contentsInPage) return { from: 0, to: amount };
+const ranger = (page, contentsInPage) => {
   let from = (page - 1) * contentsInPage;
   let to = (page * contentsInPage) - 1;
   if (from < 0) from = 0;