From 044cb874f63b9a93121bd63aa7e0424fd69a7061 Mon Sep 17 00:00:00 2001
From: Anthony Laibe <anthony@laibe.cc>
Date: Thu, 2 Aug 2018 12:40:25 +0100
Subject: [PATCH] Adding Load more

---
 embark-ui/src/actions/index.js              |  5 +++--
 embark-ui/src/api/index.js                  |  4 ++--
 embark-ui/src/components/LoadMore.js        | 17 +++++++++++++++++
 embark-ui/src/containers/BlocksContainer.js | 21 ++++++++++++++++++++-
 embark-ui/src/reducers/blocksReducer.js     |  4 ++--
 embark-ui/src/sagas/index.js                |  4 ++--
 lib/modules/blockchain_connector/index.js   |  4 ++--
 7 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 embark-ui/src/components/LoadMore.js

diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js
index 00fe79ed..bf5e07d5 100644
--- a/embark-ui/src/actions/index.js
+++ b/embark-ui/src/actions/index.js
@@ -49,9 +49,10 @@ export function receiveProcessesError() {
   };
 }
 
-export function fetchBlocks() {
+export function fetchBlocks(from) {
   return {
-    type: FETCH_BLOCKS
+    type: FETCH_BLOCKS,
+    from
   };
 }
 
diff --git a/embark-ui/src/api/index.js b/embark-ui/src/api/index.js
index 2d63b683..968f99f0 100644
--- a/embark-ui/src/api/index.js
+++ b/embark-ui/src/api/index.js
@@ -6,8 +6,8 @@ export function fetchAccounts() {
   return axios.get(`${BASE_URL}/blockchain/accounts`);
 }
 
-export function fetchBlocks() {
-  return axios.get(`${BASE_URL}/blockchain/blocks`);
+export function fetchBlocks(from) {
+  return axios.get(`${BASE_URL}/blockchain/blocks`, {params: {from}});
 }
 
 export function fetchProcesses() {
diff --git a/embark-ui/src/components/LoadMore.js b/embark-ui/src/components/LoadMore.js
new file mode 100644
index 00000000..39876f82
--- /dev/null
+++ b/embark-ui/src/components/LoadMore.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {Grid, Button} from 'tabler-react';
+import PropTypes from 'prop-types';
+
+const LoadMore = ({loadMore}) => (
+  <Grid.Row className="my-3">
+    <Grid.Col className="text-center">
+      <Button onClick={loadMore} icon="plus" outline color="primary">Load More</Button>
+    </Grid.Col>
+  </Grid.Row>
+);
+
+LoadMore.propTypes = {
+  loadMore: PropTypes.func
+};
+
+export default LoadMore;
diff --git a/embark-ui/src/containers/BlocksContainer.js b/embark-ui/src/containers/BlocksContainer.js
index 54b8580a..02d341f6 100644
--- a/embark-ui/src/containers/BlocksContainer.js
+++ b/embark-ui/src/containers/BlocksContainer.js
@@ -5,12 +5,28 @@ import PropTypes from 'prop-types';
 import {fetchBlocks} from '../actions';
 import Blocks from '../components/Blocks';
 import Loading from '../components/Loading';
+import LoadMore from '../components/LoadMore';
 
 class BlocksContainer extends Component {
+
+  constructor(props) {
+    super(props);
+    this.loadMore = this.loadMore.bind(this);
+  }
+
   componentDidMount() {
     this.props.fetchBlocks();
   }
 
+  loadMore() {
+    this.props.fetchBlocks(this.loadMoreFrom());
+  }
+
+  loadMoreFrom() {
+    let blocks = this.props.blocks.data;
+    return blocks[blocks.length - 1].number - 1;
+  }
+
   render() {
     const {blocks} = this.props;
     if (!blocks.data) {
@@ -26,7 +42,10 @@ class BlocksContainer extends Component {
     }
 
     return (
-      <Blocks blocks={blocks.data} />
+      <React.Fragment>
+        <Blocks blocks={blocks.data}/>
+        {(this.loadMoreFrom() >= 0) ? <LoadMore loadMore={this.loadMore} /> : <React.Fragment />}
+      </React.Fragment>
     );
   }
 }
diff --git a/embark-ui/src/reducers/blocksReducer.js b/embark-ui/src/reducers/blocksReducer.js
index 55b447c6..7a6674fc 100644
--- a/embark-ui/src/reducers/blocksReducer.js
+++ b/embark-ui/src/reducers/blocksReducer.js
@@ -1,9 +1,9 @@
 import {RECEIVE_BLOCKS, RECEIVE_BLOCKS_ERROR} from "../actions";
 
-export default function accounts(state = {}, action) {
+export default function blocks(state = {}, action) {
   switch (action.type) {
     case RECEIVE_BLOCKS:
-      return Object.assign({}, state, {data: action.blocks.data});
+      return Object.assign({}, state, {data: [...state.data || [], ...action.blocks.data]});
     case RECEIVE_BLOCKS_ERROR:
       return Object.assign({}, state, {error: true});
     default:
diff --git a/embark-ui/src/sagas/index.js b/embark-ui/src/sagas/index.js
index cc1c0b82..7cb1d010 100644
--- a/embark-ui/src/sagas/index.js
+++ b/embark-ui/src/sagas/index.js
@@ -2,9 +2,9 @@ import * as actions from '../actions';
 import * as api from '../api';
 import {all, call, fork, put, takeEvery} from 'redux-saga/effects';
 
-export function *fetchBlocks() {
+export function *fetchBlocks(payload) {
   try {
-    const blocks = yield call(api.fetchBlocks);
+    const blocks = yield call(api.fetchBlocks, payload.from);
     yield put(actions.receiveBlocks(blocks));
   } catch (e) {
     yield put(actions.receiveBlocksError());
diff --git a/lib/modules/blockchain_connector/index.js b/lib/modules/blockchain_connector/index.js
index 5f5fa0bf..fb6bd6ee 100644
--- a/lib/modules/blockchain_connector/index.js
+++ b/lib/modules/blockchain_connector/index.js
@@ -216,12 +216,12 @@ class BlockchainConnector {
       'get',
       '/embark-api/blockchain/blocks',
       (req, res) => {
-        let from = req.query.from;
+        let from = parseInt(req.query.from, 10);
         let limit = req.query.limit || 10;
         let results = [];
         async.waterfall([
           function(callback) {
-            if (from) {
+            if (!isNaN(from)) {
               return callback();
             }
             self.getBlockNumber((err, blockNumber) => {