Adding Load more

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
   };
 }
 

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() {

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;

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>
     );
   }
 }

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:

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());

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) => {