Add a loadMore pagination type that displays a load more button

Based on Automattic#442

* add preventDefault to prevent admin form submission
* add a style to center the button

Author: Adam Silverstein

src/react/actions/apiActions.js

@@ -12,10 +12,11 @@ export const getEntriesPaginated = (page, scrollTo) => ({
   scrollTo,
 });
 
-export const getEntriesSuccess = (payload, renderNewEntries) => ({
+export const getEntriesSuccess = (payload, renderNewEntries, paginationType) => ({
   type: types.GET_ENTRIES_SUCCESS,
   payload,
   renderNewEntries,
+  paginationType,
 });
 
 export const getEntriesFailed = () => ({

src/react/containers/AppContainer.js

@@ -34,10 +34,16 @@ class AppContainer extends Component {
 
   render() {
     const { page, loading, entries, polling, mergePolling, config } = this.props;
+    const paginationTypeLoadMore = config.paginationType === 'loadMore';
     const canEdit = config.is_liveblog_editable === '1';
     const frontEndEditing = config.backend_liveblogging !== '1';
     const isAdmin = config.is_admin;
-    const showEditor = isAdmin || ((page === 1 && canEdit && frontEndEditing));
+    const showEditor = isAdmin ||
+      (
+        (page === 1 || paginationTypeLoadMore) &&
+        canEdit &&
+        frontEndEditing
+      );
 
     return (
       <div style={{ position: 'relative' }}>
@@ -75,8 +81,7 @@ const mapStateToProps = state => ({
   page: state.pagination.page,
   loading: state.api.loading,
   entries: Object.keys(state.api.entries)
-    .map(key => state.api.entries[key])
-    .slice(0, state.config.entries_per_page),
+    .map(key => state.api.entries[key]),
   polling: Object.keys(state.polling.entries),
   config: state.config,
 });

src/react/containers/PaginationContainer.js

@@ -7,7 +7,24 @@ import * as userActions from '../actions/userActions';
 
 class PaginationContainer extends Component {
   render() {
-    const { page, pages, getEntriesPaginated } = this.props;
+    const { page, pages, getEntriesPaginated, paginationType } = this.props;
+
+    if (paginationType === 'loadMore') {
+      return (
+        <div className="liveblog-pagination">
+          {page !== pages &&
+          <button
+            className="button button-large liveblog-btn liveblog-pagination-btn liveblog-pagination-loadmore"
+            onClick={(e) => {
+              e.preventDefault();
+              getEntriesPaginated(page + 1);
+            }}
+          >
+              Load More
+          </button>}
+        </div>
+      );
+    }
 
     // Don't diplsay pagination if we only have a single page.
     if (pages === 1) {
@@ -100,11 +117,13 @@ PaginationContainer.propTypes = {
   page: PropTypes.number,
   pages: PropTypes.number,
   getEntriesPaginated: PropTypes.func,
+  paginationType: PropTypes.string,
 };
 
 const mapStateToProps = state => ({
   page: state.pagination.page,
   pages: state.pagination.pages,
+  paginationType: state.config.paginationType,
 });
 
 const mapDispatchToProps = dispatch =>

src/react/epics/api.js

@@ -80,6 +80,7 @@ const getPaginatedEntriesEpic = (action$, store) =>
                 store.getState().api.entries,
                 store.getState().polling.entries,
               ),
+              store.getState().config.paginationType,
             )),
             of(scrollToEntry(getScrollToId(res.response.entries, scrollTo))),
           ),

src/react/epics/polling.js

@@ -54,7 +54,7 @@ const mergePollingEpic = (action$, store) =>
       const entries = Object.keys(polling.entries).map(key => polling.entries[key]);
       const pages = Math.max(pagination.pages, polling.pages);
 
-      if (pagination.page === 1) {
+      if (pagination.page === 1 || config.paginationType === 'loadMore') {
         return concat(
           of(mergePollingIntoEntries(entries, pages)),
           of(scrollToEntry(`id_${entries[entries.length - 1].id}`)),

src/react/reducers/api.js

@@ -30,7 +30,10 @@ export const api = (state = initialState, action) => {
         ...state,
         error: false,
         loading: false,
-        entries: applyUpdate({}, action.payload.entries),
+        entries: applyUpdate(
+          action.paginationType === 'loadMore' ? state.entries : {},
+          action.payload.entries,
+        ),
         newestEntry: getNewestEntry(
           state.newestEntry,
           action.payload.entries[0],

src/styles/core/app/_buttons.scss

@@ -64,3 +64,6 @@
   background: darken($color-warning, 10%);
 }
 
+.liveblog-pagination-btn.liveblog-pagination-loadmore {
+  margin: 10px auto;
+}