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}) => (
+
+
+
+
+
+);
+
+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 (
-
+
+
+ {(this.loadMoreFrom() >= 0) ? : }
+
);
}
}
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) => {