feat(explorer): add pager

.travis.yml

@@ -15,7 +15,12 @@ go:
   - 1.6
   - tip
 
+env:
+  - TRAVIS_NODE_VERSION="0.12"
+
 install:
+  # from http://austinpray.com/ops/2015/09/20/change-travis-node-version.html
+  - rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && (cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`) && source ~/.nvm/nvm.sh && nvm install $TRAVIS_NODE_VERSION
   - make install
 
 script:

Makefile

@@ -13,7 +13,7 @@ install:
 	go list -f '{{range .Imports}}{{.}} {{end}}' ./... | xargs go get -v
 	go list -f '{{range .TestImports}}{{.}} {{end}}' ./... | xargs go get -v
 	go build -v ./...
-	#cd explorer && npm install && npm install react-admin
+	cd explorer && npm install
 
 update:
 	go get -u all
@@ -35,7 +35,7 @@ format:
 test:
 	go test $(GONODE_PLUGINS) ./test/api ./core ./core/config ./commands/server
 	go vet ./...
-	#cd explorer && npm test
+	cd explorer && npm test
 
 kill:
 	kill `cat $(PID)` || true

explorer/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

explorer/package.json

@@ -5,21 +5,27 @@
   "description": "GONODE explorer",
   "author": "Raphaël Benitte <benitteraphael@gmail.com>",
   "devDependencies": {
+    "babel": "^6.3.26",
     "babel-core": "^6.1.2",
     "babel-loader": "^6.1.0",
     "babel-polyfill": "^6.1.19",
     "babel-preset-es2015": "^6.1.2",
     "babel-preset-react": "^6.1.2",
+    "babel-register": "^6.3.13",
     "clean-webpack-plugin": "^0.1.4",
     "css-loader": "^0.22.0",
     "eslint": "^1.10.2",
+    "expect": "^1.13.4",
     "extract-text-webpack-plugin": "^0.9.1",
     "file-loader": "^0.8.4",
     "html-webpack-plugin": "^1.6.2",
     "json-loader": "^0.5.3",
     "less": "^2.5.3",
     "less-loader": "^2.2.2",
+    "mocha": "^2.3.4",
     "modernizr": "^3.2.0",
+    "object.assign": "^4.0.3",
+    "react-addons-test-utils": "^0.14.3",
     "react-docgen": "^2.4.0",
     "react-hot-loader": "^1.3.0",
     "resolve-url-loader": "^1.4.2",
@@ -56,6 +62,9 @@
     "superagent-promise": "^1.0.3"
   },
   "scripts": {
-    "start": "NODE_ENV=development node webpack.config.js"
+    "start": "NODE_ENV=development node webpack.config.js",
+    "lint": "eslint src/* && stylint src/styles",
+    "build": "npm run test && NODE_ENV=production webpack --progress --colors -p",
+    "test": "mocha --compilers js:babel-register --recursive"
   }
 }

explorer/src/Api.js

@@ -12,6 +12,12 @@ const JSON_HEADERS = {
 const API_BASE_URL = 'http://localhost:2405';
 
 const Api = {
+    /**
+     * Authenticate user.
+     *
+     * @param {Object} credentials
+     * @returns {Promise}
+     */
     login(credentials) {
         const url = `${API_BASE_URL}/login`;
 
@@ -46,7 +52,10 @@ const Api = {
     nodes(options, token = null) {
         const searchParams = [];
         if (options.perPage) {
-            searchParams.push(`per_page=${options.perPage}`)
+            searchParams.push(`per_page=${options.perPage}`);
+        }
+        if (options.page) {
+            searchParams.push(`page=${options.page}`);
         }
 
         const url = `${API_BASE_URL}/nodes?${searchParams.join('&')}`;
@@ -58,9 +67,6 @@ const Api = {
 
         return req
             .then(response => response.body)
-            .then(json => {
-                return json.elements;
-            })
         ;
     },
 

explorer/src/actions/node-actions.js

@@ -1,7 +1,6 @@
-import * as types             from '../constants/ActionTypes';
-import Api                    from '../Api';
-import { fetchNodesIfNeeded } from './nodes-actions';
-import { history }            from '../routing';
+import * as types  from '../constants/ActionTypes';
+import Api         from '../Api';
+import { history } from '../routing';
 
 
 function receiveNode(node) {
@@ -67,7 +66,6 @@ export function createNode(nodeData) {
         Api.createNode(nodeData, getState().security.token)
             .then(node => {
                 dispatch(receiveNodeCreation(node));
-                fetchNodesIfNeeded()(dispatch, getState);
                 history.push('/nodes');
             })
         ;

explorer/src/actions/nodes-actions.js

@@ -2,16 +2,28 @@ import * as types from '../constants/ActionTypes';
 import Api        from '../Api';
 
 
-function receiveNodes(nodes) {
+function receiveNodes({
+    elements,
+    per_page,
+    page,
+    previous,
+    next
+}) {
     return {
-        type:  types.RECEIVE_NODES,
-        items: nodes
+        type:         types.RECEIVE_NODES,
+        items:        elements,
+        itemsPerPage: per_page,
+        page,
+        previous,
+        next
     };
 }
 
-function requestNodes() {
+function requestNodes({ perPage = 10, page = 1 }) {
     return {
-        type: types.REQUEST_NODES
+        type: types.REQUEST_NODES,
+        perPage,
+        page
     };
 }
 
@@ -22,16 +34,13 @@ export function selectNode(nodeUuid) {
     };
 }
 
-function fetchNodes() {
+function fetchNodes(params) {
     return (dispatch, getState) => {
-        dispatch(requestNodes());
-
-        const { nodes: {
-            itemsPerPage
-        } } = getState();
+        dispatch(requestNodes(params));
 
         Api.nodes({
-            perPage: itemsPerPage
+            perPage: params.perPage,
+            page:    params.page
         }, getState().security.token)
             .then(nodes => {
                 dispatch(receiveNodes(nodes));
@@ -40,29 +49,27 @@ function fetchNodes() {
     };
 }
 
-function shouldFetchNodes(state) {
+function shouldFetchNodes(params, state) {
     const { nodes } = state;
     if (nodes.isFetching) {
         return false;
     }
 
-    return nodes.didInvalidate;
-}
+    if (nodes.currentPage !== params.page) {
+        return true;
+    }
 
-export function setNodesPagerOptions({ itemsPerPage }) {
-    return (dispatch, getState) => {
-        dispatch({
-            type: types.SET_NODES_PAGER_OPTIONS,
-            itemsPerPage
-        });
-        return fetchNodesIfNeeded()(dispatch, getState);
-    };
+    if (nodes.itemsPerPage !== params.perPage) {
+        return true;
+    }
+
+    return nodes.didInvalidate;
 }
 
-export function fetchNodesIfNeeded() {
+export function fetchNodesIfNeeded(params) {
     return (dispatch, getState) => {
-        if (shouldFetchNodes(getState())) {
-            return dispatch(fetchNodes());
+        if (shouldFetchNodes(params, getState())) {
+            return dispatch(fetchNodes(params));
         }
     };
 }

explorer/src/components/Pager.jsx

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { Link }                        from 'react-router';
 import { FormattedMessage }            from 'react-intl';
 
 
@@ -11,16 +12,45 @@ class Pager extends Component {
     }
 
     render() {
-        const { perPageOptions, perPage } = this.props;
+        const {
+            perPageOptions,
+            perPage,
+            page,
+            previousPage,
+            nextPage
+        } = this.props;
+
+        let previousPageButton = null;
+        if (previousPage) {
+            previousPageButton = (
+                <Link to={`/nodes?pp=${perPage}&p=${previousPage}`} className="button pager_previous">
+                    <i className="fa fa-chevron-left"/>
+                </Link>
+            );
+        }
+
+        let nextPageButton = null;
+        if (nextPage) {
+            nextPageButton = (
+                <Link to={`/nodes?pp=${perPage}&p=${nextPage}`} className="button pager_next">
+                    <i className="fa fa-chevron-right"/>
+                </Link>
+            );
+        }
 
         return (
             <div className="pager">
+                {previousPageButton}
+                <span className="pager_page">
+                    <FormattedMessage id="pager.page" values={{ page }}/>
+                </span>
                 <FormattedMessage id="pager.per_page"/>
                 <select ref="perPage" value={perPage} onChange={this.handleChange.bind(this)}>
                     {perPageOptions.map(perPageOption => (
                         <option key={perPageOption} value={perPageOption}>{perPageOption}</option>
                     ))}
                 </select>
+                {nextPageButton}
             </div>
         );
     }
@@ -30,6 +60,8 @@ Pager.propTypes = {
     perPageOptions: PropTypes.array.isRequired,
     perPage:        PropTypes.number.isRequired,
     page:           PropTypes.number.isRequired,
+    previousPage:   PropTypes.number,
+    nextPage:       PropTypes.number,
     onChange:       PropTypes.func.isRequired
 };
 

explorer/src/components/nodes/NodeForm.jsx

@@ -36,7 +36,7 @@ class NodeForm extends Component {
                             <input type="text" placeholder="node slug" {...slug}/>
                         </div>
                     </div>
-                    <button onClick={handleSubmit}>Submit</button>
+                    <button className="button" onClick={handleSubmit}>Submit</button>
                 </form>
             </div>
         );