Load more pagination type implementation

Automattic · May 14, 2018 · a97a669 · a97a669
1 parent 1a2030a
commit a97a669
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 9 deletions.
diff --git a/assets/app.js b/assets/app.js
diff --git a/assets/app.js.map b/assets/app.js.map
diff --git a/liveblog.php b/liveblog.php
@@ -1001,6 +1001,7 @@ public static function enqueue_scripts() {
 						'is_liveblog_editable'         => self::is_liveblog_editable(),
 						'current_user'           	   => self::get_current_user(),
 						'socketio_enabled'             => WPCOM_Liveblog_Socketio_Loader::is_enabled(),
+						'paginationType'               => 'page',
 
 						'key'                          => self::KEY,
 						'nonce_key'                    => self::NONCE_KEY,

diff --git a/src/react/actions/apiActions.js b/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 = () => ({

diff --git a/src/react/containers/AppContainer.js b/src/react/containers/AppContainer.js
@@ -28,13 +28,14 @@ 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';
 
     return (
       <div style={{ position: 'relative' }}>
-        {(page === 1 && canEdit) && <EditorContainer isEditing={false} />}
+        {(page === 1 || paginationTypeLoadMore) && canEdit && <EditorContainer isEditing={false} />}
         <UpdateButton polling={polling} click={() => mergePolling()} />
-        <PaginationContainer />
+        {!paginationTypeLoadMore && <PaginationContainer /> }
         <Entries loading={loading} entries={entries} />
         <PaginationContainer />
         {this.eventsContainer && <EventsContainer container={this.eventsContainer} />}
@@ -61,8 +62,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,
 });

diff --git a/src/react/containers/PaginationContainer.js b/src/react/containers/PaginationContainer.js
@@ -7,8 +7,21 @@ 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="liveblog-btn liveblog-pagination-btn liveblog-pagination-next"
+            onClick={() => getEntriesPaginated(page + 1)}
+          >
+              Load More
+          </button>}
+        </div>
+      );
+    }
     return (
       <div className="liveblog-pagination">
         <div>
@@ -53,11 +66,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 =>

diff --git a/src/react/epics/api.js b/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))),
           ),

diff --git a/src/react/epics/polling.js b/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}`)),

diff --git a/src/react/reducers/api.js b/src/react/reducers/api.js
@@ -28,7 +28,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],