Add pagination to Recent snippets page

To let user navigate through existing snippets and fetch snippets
proportinaly we have added two buttons Next and Previous
so we can get go throught all snippets by step equal 20

Author: lotrien

package-lock.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "codemirror": "^5.33.0",
     "immutable": "^3.8.2",
+    "parse-link-header": "^1.0.1",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-codemirror2": "^3.0.7",

package.json

@@ -1,13 +1,28 @@
+import parseLinkHeader from 'parse-link-header';
+
 export const setRecentSnippets = snippets => ({
   type: 'SET_RECENT_SNIPPETS',
   snippets,
 });
 
-export const fetchRecentSnippets = dispatch => (
-  fetch('http://api.xsnippet.org/snippets')
-    .then(response => response.json())
-    .then(json => dispatch(setRecentSnippets(json)))
-);
+export const setPaginationLinks = links => ({
+  type: 'SET_PAGINATION_LINKS',
+  links,
+});
+
+export const fetchRecentSnippets = marker => (dispatch) => {
+  let qs = '';
+  if (marker) { qs = `&marker=${marker}`; }
+
+  return fetch(`http://api.xsnippet.org/snippets?limit=20${qs}`)
+    .then((response) => {
+      const links = parseLinkHeader(response.headers.get('Link'));
+
+      dispatch(setPaginationLinks(links));
+      return response.json();
+    })
+    .then(json => dispatch(setRecentSnippets(json)));
+};
 
 export const setSnippet = snippet => ({
   type: 'SET_SNIPPET',

src/actions/index.js

@@ -8,24 +8,73 @@ import * as actions from '../actions';
 import '../styles/RecentSnippets.styl';
 
 class RecentSnippets extends React.Component {
+  constructor(props) {
+    super(props);
+    this.newerSetOfSnippets = this.newerSetOfSnippets.bind(this);
+    this.olderSetOfSnippets = this.olderSetOfSnippets.bind(this);
+  }
+
   componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch(actions.fetchRecentSnippets);
+    const { dispatch, recent, pagination } = this.props;
+    let marker = null;
+
+    if (pagination.get('prev')) {
+      marker = recent.get(0) + 1;
+    }
+
+    dispatch(actions.fetchRecentSnippets(marker));
+  }
+
+  newerSetOfSnippets() {
+    const { dispatch, pagination } = this.props;
+    const prev = pagination.get('prev');
+
+    if (prev) {
+      const marker = Number(prev.marker);
+
+      dispatch(actions.fetchRecentSnippets(marker));
+    }
+  }
+
+  olderSetOfSnippets() {
+    const { dispatch, pagination } = this.props;
+    const marker = Number(pagination.get('next').marker);
+
+    dispatch(actions.fetchRecentSnippets(marker));
   }
 
   render() {
-    const { snippets, recent } = this.props;
+    const { snippets, recent, pagination } = this.props;
+    const older = pagination.get('next');
+    const newer = pagination.get('prev');
 
     return ([
       <Title title="Recent snippets" additionalClass="recent-title" key="title-recent" />,
       <ul className="recent-snippet" key="recent-snippet">
         {recent.map(id => <RecentSnippetItem key={id} snippet={snippets.get(id)} />)}
       </ul>,
+      <div className="pagination" key="pagination">
+        <span
+          className={`pagination-item next ${newer ? '' : 'disabled'}`}
+          onClick={this.newerSetOfSnippets}
+          role="presentation"
+        >
+          &lsaquo; Newer
+        </span>
+        <span
+          className={`pagination-item prev ${older ? '' : 'disabled'}`}
+          onClick={this.olderSetOfSnippets}
+          role="presentation"
+        >
+          Older &rsaquo;
+        </span>
+      </div>,
     ]);
   }
 }
 
 export default connect(state => ({
   snippets: state.get('snippets'),
   recent: state.get('recent'),
+  pagination: state.get('pagination'),
 }))(RecentSnippets);

src/components/RecentSnippets.jsx

@@ -24,6 +24,16 @@ const recent = (state = List(), action) => {
   }
 };
 
+const pagination = (state = Map(), action) => {
+  switch (action.type) {
+    case 'SET_PAGINATION_LINKS':
+      return Map(action.links);
+
+    default:
+      return state;
+  }
+};
+
 const syntaxes = (state = List(), action) => {
   switch (action.type) {
     case 'SET_SYNTAXES':
@@ -38,4 +48,5 @@ export default combineReducers({
   snippets,
   recent,
   syntaxes,
+  pagination,
 });

src/reducers/index.js

@@ -52,3 +52,23 @@
       background-color: button-light-normal
       &:hover
         background-color: button-light-active
+
+.pagination
+  display: flex
+  flex-flow: row nowrap
+  justify-content: flex-end
+  padding-top: 10px
+  &-item
+    padding: 10px 14px
+    font-size: 17px
+    font-family: font-quicksand
+    background-color: button-normal
+    color: text-light
+    cursor: pointer
+    &:hover
+      background-color: button-active
+    &.next
+      margin-right: 4px
+    &.disabled
+      pointer-events: none
+      background-color: button-light-normal

src/styles/RecentSnippets.styl

@@ -35,10 +35,104 @@ describe('actions', () => {
         },
       },
       syntaxes: [],
+      pagination: {},
     });
   });
 
-  it('should create an action to fetch recent snippets', async () => {
+  it('should create an action to set pagination links', () => {
+    const links = {
+      first: {
+        limit: '20',
+        rel: 'first',
+        url: 'http://api.xsnippet.org/snippets?limit=20',
+      },
+      next: {
+        limit: '20',
+        marker: 28,
+        rel: 'next',
+        url: 'http://api.xsnippet.org/snippets?limit=20&marker=28',
+      },
+      prev: {
+        limit: '20',
+        rel: 'prev',
+        url: 'http://api.xsnippet.org/snippets?limit=20',
+      },
+    };
+    const store = createStore();
+    store.dispatch(actions.setPaginationLinks(links));
+
+    expect(store.getState().toJS()).toEqual({
+      recent: [],
+      snippets: {},
+      syntaxes: [],
+      pagination: links,
+    });
+  });
+
+  it('should create an action to fetch recent snippets with marker', async () => {
+    const snippets = [
+      {
+        id: 1,
+        content: 'test',
+        syntax: 'JavaScript',
+      },
+      {
+        id: 2,
+        content: 'batman',
+        syntax: 'Python',
+      },
+    ];
+    const links = '<http://api.xsnippet.org/snippets?limit=20>; rel="first", <http://api.xsnippet.org/snippets?limit=20&marker=19>; rel="next", <http://api.xsnippet.org/snippets?limit=20&marker=59>; rel="prev"';
+
+    fetchMock.getOnce(
+      'http://api.xsnippet.org/snippets?limit=20&marker=39',
+      {
+        headers: { Link: links },
+        body: snippets,
+      },
+    );
+
+    const store = createStore();
+    await store.dispatch(actions.fetchRecentSnippets(39));
+
+    expect(store.getState().toJS()).toEqual({
+      recent: [1, 2],
+      snippets: {
+        1: {
+          id: 1,
+          content: 'test',
+          syntax: 'JavaScript',
+        },
+        2: {
+          id: 2,
+          content: 'batman',
+          syntax: 'Python',
+        },
+      },
+      syntaxes: [],
+      pagination: {
+        first: {
+          limit: '20',
+          rel: 'first',
+          url: 'http://api.xsnippet.org/snippets?limit=20',
+        },
+        next: {
+          limit: '20',
+          marker: '19',
+          rel: 'next',
+          url: 'http://api.xsnippet.org/snippets?limit=20&marker=19',
+        },
+        prev: {
+          limit: '20',
+          marker: '59',
+          rel: 'prev',
+          url: 'http://api.xsnippet.org/snippets?limit=20&marker=59',
+        },
+      },
+    });
+  });
+
+  it('should create an action to fetch recent snippets without marker', async () => {
     const snippets = [
       {
         id: 1,
@@ -51,11 +145,18 @@ describe('actions', () => {
         syntax: 'Python',
       },
     ];
+    const links = '<http://api.xsnippet.org/snippets?limit=20>; rel="first", <http://api.xsnippet.org/snippets?limit=20&marker=39>; rel="next"';
 
-    fetchMock.getOnce('http://api.xsnippet.org/snippets', JSON.stringify(snippets));
+    fetchMock.getOnce(
+      'http://api.xsnippet.org/snippets?limit=20',
+      {
+        headers: { Link: links },
+        body: snippets,
+      },
+    );
 
     const store = createStore();
-    await store.dispatch(actions.fetchRecentSnippets);
+    await store.dispatch(actions.fetchRecentSnippets());
 
     expect(store.getState().toJS()).toEqual({
       recent: [1, 2],
@@ -72,6 +173,19 @@ describe('actions', () => {
         },
       },
       syntaxes: [],
+      pagination: {
+        first: {
+          limit: '20',
+          rel: 'first',
+          url: 'http://api.xsnippet.org/snippets?limit=20',
+        },
+        next: {
+          limit: '20',
+          marker: '39',
+          rel: 'next',
+          url: 'http://api.xsnippet.org/snippets?limit=20&marker=39',
+        },
+      },
     });
   });
 
@@ -94,6 +208,7 @@ describe('actions', () => {
         },
       },
       syntaxes: [],
+      pagination: {},
     });
   });
 
@@ -119,6 +234,7 @@ describe('actions', () => {
         },
       },
       syntaxes: [],
+      pagination: {},
     });
   });
 
@@ -130,6 +246,7 @@ describe('actions', () => {
     expect(store.getState().toJS()).toEqual({
       recent: [],
       snippets: {},
+      pagination: {},
       syntaxes,
     });
   });
@@ -145,6 +262,7 @@ describe('actions', () => {
     expect(store.getState().toJS()).toEqual({
       recent: [],
       snippets: {},
+      pagination: {},
       syntaxes,
     });
   });
@@ -171,6 +289,7 @@ describe('actions', () => {
         },
       },
       syntaxes: [],
+      pagination: {},
     });
   });
 });