Revert state on error

src/components/Pager/index.js

@@ -44,7 +44,7 @@ const LastButton = ({currentPage, loadingCount, loadingData, totalPages, changeP
 }
 
 const buildNumberPageButton = n =>
-  <PagerButton loading={n.loading} key={n.page} page={n.page} currentPage={n.currentPage} changePage={n.changePage}>
+  <PagerButton loading={n.loading} key={n.page} page={n.page} currentPage={n.currentPage} changePage={n.changePage} loadingPage={n.loadingPage}>
     {n.page + 1}
   </PagerButton>
 

src/components/Pager/pagerLogic.js

@@ -19,13 +19,13 @@ export const determinePages = (currentPage, loading, pageSize, count) => {
   return pages
 }
 
-export const buildArrayOfNumberedPagerButtons = ({filter, count, loadingCount, loadingData, changePage}) => {
+export const buildArrayOfNumberedPagerButtons = ({filter, count, loadingCount, loadingData, changePage, loadingPage}) => {
   const currentPage = filter.page
   const numberedPageButtons = []
   const pages = determinePages(currentPage, loadingCount, filter.pageSize, count)
 
   for (let i = 0; i < pages.length; i++) {
-    numberedPageButtons.push({page: pages[i], loading: loadingData, currentPage, changePage})
+    numberedPageButtons.push({page: pages[i], loading: loadingData, currentPage, changePage, loadingPage})
   }
 
   return numberedPageButtons

src/components/Pager/story.js

@@ -8,7 +8,8 @@ import { buildArrayOfNumberedPagerButtons } from './pagerLogic'
 const buttonData = buildArrayOfNumberedPagerButtons({
   filter: {
     page: 5,
-    pageSize: 10
+    pageSize: 10,
+    loadingPage: 6
   },
   count: 23423,
   loadingCount: false,

src/components/PagerButton/index.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const PagerButton = ({page, loading, currentPage, changePage, children, className}) => {
+const PagerButton = ({page, loading, currentPage, changePage, children, className, loadingPage}) => {
   let buttonStyle = 'btn pager-button'
   if (className) buttonStyle += ' ' + className
   buttonStyle += (currentPage === page) ? ' btn-primary' : ' btn-default'
+  buttonStyle += (loading && loadingPage === page) ? ' pager-button-loading' : ''
   return (
     <button data-page={page} className={buttonStyle} onClick={changePage} disabled={loading}>
       {children}
@@ -18,7 +19,8 @@ PagerButton.propTypes = {
   page: PropTypes.number.isRequired,
   currentPage: PropTypes.number.isRequired,
   children: PropTypes.any.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
+  loadingPage: PropTypes.number
 }
 
 export default PagerButton

src/components/PagerButton/index.scss

@@ -0,0 +1,9 @@
+@import '../../theme.scss';
+
+.pager-button {
+  cursor: pointer;
+}
+
+.pager-button-loading {
+  background-color: $loading-blue;
+}

src/components/PagerButton/story.js

@@ -14,5 +14,6 @@ stories.add('Basic', () => (
     currentPage={number('currentPage', 3)}
     children={text('children', 'Page 2')}
     className={text('className', '')}
+    loadingPage={number('page', 1)}
   />
 ))

src/containers/Pager.js

@@ -13,7 +13,8 @@ const mapStateToProps = (state, props) => {
     filter: namedState.filter,
     count: namedState.count,
     loadingCount: namedState.loadingCount,
-    loadingData: namedState.loadingData
+    loadingData: namedState.loadingData,
+    loadingPage: namedState.filter.loadingPage
   }
 }
 
@@ -24,8 +25,9 @@ const mapDispatchToProps = dispatch => bindActionCreators({
 
 const handlers = {
   changePage: props => event => {
-    const nextPage = window.parseInt(event.target.getAttribute('data-page'), 10)
-    const updatedFilter = {...props.filter, page: nextPage}
+    const currentPage = props.filter.page
+    const loadingPage = window.parseInt(event.target.getAttribute('data-page'), 10)
+    const updatedFilter = {...props.filter, page: currentPage, loadingPage}
     if (updatedFilter && !updatedFilter.page) {
       props.refreshCount(props.name, updatedFilter)
     }

src/reducer.js

@@ -11,7 +11,8 @@ export const initialState = {
   filter: {
     page: 0,
     pageSize: 10,
-    sorts: []
+    sorts: [],
+    loadingPage: 0
   }
 }
 
@@ -66,6 +67,10 @@ const reduceSetData = (state, action) => ({
   loadingData: false,
   data: action.data,
   error: '',
+  filter: {
+    ...state.filter,
+    page: state.filter.loadingPage
+  },
   count: coalesce(action.count, state.count) || 0
 })
 

src/styles.scss

@@ -2,3 +2,4 @@
 @import './components/Headers/index.scss';
 @import './components/Manifest/index.scss';
 @import './components/SimpleHeader/index.scss';
+@import './components/PagerButton/index.scss';

src/theme.scss

@@ -1,5 +1,6 @@
 $control-error: #900;
 $loading-gray: #999;
+$loading-blue: #add8e6;
 $manifest-error: #a88;
 $manifest-header-gray: #777;
 $focused-row: #eeeeff;