Pagination (#16)

Author: mysiar

.gitignore

@@ -1,2 +1,3 @@
 /lib/
 /node_modules/
+/tmp

.travis.yml

@@ -1,6 +1,7 @@
 language: node_js
 
 node_js:
+  - "8"
   - "7"
   - "6"
 
@@ -12,3 +13,4 @@ script:
   - yarn build
   - yarn test
   - yarn lint
+  - yarn test-gen

README.md

@@ -4,6 +4,10 @@ A generator to scaffold a React/Redux app with Create-Retrieve-Update-Delete fea
 Works especially well with APIs built with the [API Platform](https://api-platform.com) framework.
 
 [![Build Status](https://travis-ci.org/api-platform/generate-crud.svg?branch=master)](https://travis-ci.org/api-platform/generate-crud)
+[![npm version](https://badge.fury.io/js/api-platform-generate-crud.svg)](https://badge.fury.io/js/api-platform-generate-crud)
+[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)
+
+[![NPM](https://nodei.co/npm/api-platform-generate-crud.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/api-platform-generate-crud/)
 
 ## Features
 
@@ -93,7 +97,6 @@ ReactDom.render(
 
 ## TODO
 
-* Add support for pagination
 * Automatically normalize numbers
 * Generate E2E tests
 * Add a React Native generator

package.json

@@ -1,6 +1,6 @@
 {
   "name": "api-platform-generate-crud",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Generate a CRUD application built with React, Redux and React Router from an Hydra-enabled API",
   "files": [
     "*.md",
@@ -42,7 +42,8 @@
     "test": "jest",
     "lint": "eslint src",
     "build": "babel src -d lib --ignore '*.test.js'",
-    "watch": "babel --watch src -d lib --ignore '*.test.js'"
+    "watch": "babel --watch src -d lib --ignore '*.test.js'",
+    "test-gen": "rm -rf ./tmp && npm run build && ./lib/index.js  https://demo.api-platform.com ./tmp"
   },
   "bin": {
     "api-platform-generate-crud": "./lib/index.js"

src/ReactCrudGenerator.js

@@ -66,6 +66,7 @@ export default class ReactCrudGenerator {
       titleUcFirst
     };
 
+
     // Create directories
     // These directories may already exist
     mkdirp.sync(`${dir}/api`);

templates/react/actions/foo/list.js

@@ -12,15 +12,21 @@ export function success(items) {
   return {type: '{{{ uc }}}_LIST_SUCCESS', items};
 }
 
-export function list() {
+export function view(items) {
+  return { type: '{{{ uc }}}_LIST_VIEW', items};
+}
+
+export function page(page) {
   return (dispatch) => {
     dispatch(loading(true));
+    dispatch(error(''));
 
-    {{{ lc }}}Fetch('/{{{ name }}}')
+    {{{ lc }}}Fetch(page)
       .then(response => response.json())
       .then(data => {
         dispatch(loading(false));
         dispatch(success(data['{{{ hydraPrefix }}}member']));
+        dispatch(view(data['{{{ hydraPrefix }}}view']));
       })
       .catch(e => {
         dispatch(loading(false));
@@ -29,6 +35,10 @@ export function list() {
   };
 }
 
+export function list() {
+  return page('/{{{ name }}}');
+}
+
 export function reset() {
   return {type: '{{{ uc }}}_LIST_RESET'};
 }

templates/react/components/foo/List.js

@@ -2,9 +2,9 @@ import React, {Component} from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { list, reset } from '../../actions/{{{ lc }}}/list';
+import { list, reset, page } from '../../actions/{{{ lc }}}/list';
 import { success } from '../../actions/{{{ lc }}}/delete';
-import { itemToLinks } from '../../utils/helpers';
+import { paginationRoute, itemToLinks } from '../../utils/helpers';
 
 class List extends Component {
   static propTypes = {
@@ -14,8 +14,42 @@ class List extends Component {
     deletedItem: PropTypes.object,
     list: PropTypes.func.isRequired,
     reset: PropTypes.func.isRequired,
+    page: PropTypes.func.isRequired,
   };
 
+  pagination() {
+    return (
+      <span>
+        <button
+          type="button"
+          className="btn btn-basic btn-sm"
+          onClick={() => this.props.page(paginationRoute(this.props.view['{{{ hydraPrefix }}}first']))}
+          disabled={!this.props.view['{{{ hydraPrefix }}}previous']}
+        >First</button>
+        &nbsp;
+        <button
+          type="button"
+          className="btn btn-basic btn-sm"
+          onClick={() => this.props.page(paginationRoute(this.props.view['{{{ hydraPrefix }}}previous']))}
+          disabled={!this.props.view['{{{ hydraPrefix }}}previous']}
+        >Previous</button>
+        &nbsp;
+        <button
+          type="button" className="btn btn-basic btn-sm"
+          onClick={() => this.props.page(paginationRoute(this.props.view['{{{ hydraPrefix }}}next']))}
+          disabled={!this.props.view['{{{ hydraPrefix }}}next']}
+        >Next</button>
+        &nbsp;
+        <button
+          type="button" className="btn btn-basic btn-sm"
+          onClick={() => this.props.page(paginationRoute(this.props.view['{{{ hydraPrefix }}}last']))}
+          disabled={!this.props.view['{{{ hydraPrefix }}}next']}
+        >Last</button>
+        &nbsp;
+      </span>
+    );
+  }
+
   componentDidMount() {
     this.props.list();
   }
@@ -31,6 +65,7 @@ class List extends Component {
       {this.props.loading && <div className="alert alert-info">Loading...</div>}
       {this.props.deletedItem && <div className="alert alert-success">{this.props.deletedItem['@id']} deleted.</div>}
       {this.props.error && <div className="alert alert-danger">{this.props.error}</div>}
+      {this.pagination()}
 
       <div className="table-responsive">
           <table className="table table-striped table-hover">
@@ -80,12 +115,14 @@ const mapStateToProps = (state) => {
     error: state.{{{ lc }}}.list.error,
     loading: state.{{{ lc }}}.list.loading,
     deletedItem: state.{{{ lc }}}.del.deleted,
+    view: state.{{{ lc }}}.list.view,
   };
 };
 
 const mapDispatchToProps = (dispatch) => {
   return {
     list: () => dispatch(list()),
+    page: (arg) => dispatch(page(arg)),
     reset: () => {
       dispatch(reset());
       dispatch(success(null));

templates/react/reducers/foo/list.js

@@ -1,4 +1,4 @@
-import { combineReducers } from 'redux'
+import {combineReducers} from 'redux'
 
 export function error(state = null, action) {
   switch (action.type) {
@@ -39,4 +39,14 @@ export function items(state = [], action) {
   }
 }
 
-export default combineReducers({error, loading, items});
+export function view(state = [], action) {
+  switch (action.type) {
+    case '{{{ uc }}}_LIST_VIEW':
+      return action.items;
+
+    default:
+      return state;
+  }
+}
+
+export default combineReducers({error, loading, items, view});

templates/react/utils/helpers.js

@@ -26,3 +26,7 @@ function createLink(item) {
   }
   return <span key={item}>{item}<br/></span>;
 }
+
+export function paginationRoute(item) {
+  return '/' + item.split('/').splice(-1,1);
+}