Merge pull request #49 from xsnippet/pagination

Add pagination to Recent snippets page

Author: ikalnytskyi

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: {},
     });
   });
 });