Feature/reading list loadmore button (#3221)

* Add Load More Button to Reading List

* Set state showLoadMoreButton is false

app/assets/stylesheets/readinglist.scss

@@ -46,11 +46,18 @@
       font-size: 0.8em;
     }
   }
-  .readinglist-results {
+  .readinglist-result-container {
     width: calc(100% - 20px);
     margin: 10px auto;
     margin-left: 10px;
     float: left;
+    @media screen and ( min-width: 950px ){
+      width: calc(100% - 332px);
+      margin-left: 20px;
+      margin-top: 0px;
+    }
+  }
+  .readinglist-results {
     @include themeable(background, theme-container-background, white);
     @include themeable(border, theme-container-border, 1px solid $light-medium-gray);
     border-radius: 3px;
@@ -59,9 +66,6 @@
     text-align: left;
     font-size: 14px;
     @media screen and ( min-width: 950px ){
-      width: calc(100% - 332px);
-      margin-left: 20px;
-      margin-top: 0px;
       font-size: 17px;
     }
   
@@ -143,6 +147,35 @@
       }
     }
   }
+  .loadmore-wrapper {
+    // width: calc(100% - 20px);
+    // margin: 10px auto;
+    // margin-left: 10px;
+    // float: left;
+    // @media screen and ( min-width: 950px ){
+    //   width: calc(100% - 332px);
+    //   margin-left: 20px;
+    //   margin-top: 0px;
+    // }
+    .classifieds-load-more-button {
+      text-align: center;
+      button {
+        background: transparent;
+        @include themeable(
+          border,
+          theme-border,
+          1px solid $light-medium-gray
+        );
+        font-size: 17px;
+        padding: 14px 5px;
+        margin: 40px auto 70px;
+        width: 320px;
+        max-width: 80%;
+        border-radius: 100px;
+        font-weight: bold;
+      }
+    }
+  }
 }
 
 @media screen and ( max-width: 949px ){

app/javascript/readingList/readingList.jsx

@@ -5,11 +5,14 @@ export class ReadingList extends Component {
     readingListItems: [],
     query: '',
     index: '',
+    page: 0,
+    totalReadingList: 0,
     availableTags: [],
     selectedTags: [],
     itemsLoaded: false,
     archiving: false,
     statusView: document.getElementById('reading-list').dataset.view,
+    showLoadMoreButton: false,
   };
 
   componentDidMount() {
@@ -21,13 +24,19 @@ export class ReadingList extends Component {
     const index = client.initIndex(`SecuredReactions_${env}`);
     const t = this;
     index
-      .search('', { hitsPerPage: 64, filters: `status:${t.state.statusView}` })
+      .search('', {
+        page: t.state.page,
+        hitsPerPage: 64,
+        filters: `status:${t.state.statusView}`,
+      })
       .then(content => {
         t.setState({
+          totalReadingList: content.nbHits,
           readingListItems: content.hits,
           index,
           itemsLoaded: true,
         });
+        this.shouldShowLoadMoreButton();
       });
     const waitingOnUser = setInterval(() => {
       if (window.currentUser) {
@@ -91,15 +100,47 @@ export class ReadingList extends Component {
     }, 1800);
   };
 
-  listSearch(query, tags, statusView) {
+  shouldShowLoadMoreButton = () => {
+    const { totalReadingList, readingListItems } = this.state;
+    const totalReadingListLoaded = readingListItems.length;
+    this.setState({ showLoadMoreButton: true });
+    if (totalReadingListLoaded >= totalReadingList) {
+      this.setState({ showLoadMoreButton: false });
+    }
+  };
+
+  loadNextReadingList = () => {
+    const { statusView, query, selectedTags, page } = this.state;
+    const isLoadMore = true;
+    this.setState({ page: page + 1 });
+    this.listSearch(query, selectedTags, statusView, isLoadMore);
+  };
+
+  listSearch(query, tags, statusView, isLoadMore = false) {
     const t = this;
-    const { index } = this.state;
-    const filters = { hitsPerPage: 256, filters: `status:${statusView}` };
+    if (!isLoadMore) {
+      this.setState({ page: 0 });
+    }
+    const { index, page, readingListItems } = this.state;
+    const filters = { page, hitsPerPage: 64, filters: `status:${statusView}` };
     if (tags.length > 0) {
       filters.tagFilters = tags;
     }
     index.search(query, filters).then(content => {
-      t.setState({ readingListItems: content.hits, query });
+      if (!isLoadMore) {
+        t.setState({
+          readingListItems: content.hits,
+          totalReadingList: content.nbHits,
+          query,
+        });
+      } else {
+        t.setState({
+          readingListItems: [...readingListItems, ...content.hits],
+          totalReadingList: content.nbHits,
+          query,
+        });
+      }
+      this.shouldShowLoadMoreButton();
     });
   }
 
@@ -112,6 +153,7 @@ export class ReadingList extends Component {
       query,
       statusView,
       archiving,
+      showLoadMoreButton,
     } = this.state;
     let allItems = readingListItems.map(item => (
       <div className="readinglist-item-wrapper">
@@ -211,6 +253,16 @@ min read・
     ) : (
       ''
     );
+    let loadMoreButton = '';
+    if (showLoadMoreButton) {
+      loadMoreButton = (
+        <div className="classifieds-load-more-button">
+          <button onClick={e => this.loadNextReadingList(e)} type="button">
+            Load More Reading List
+          </button>
+        </div>
+      );
+    }
     return (
       <div className="home readinglist-home">
         <div className="side-bar">
@@ -228,15 +280,18 @@ min read・
             </div>
           </div>
         </div>
-        <div
-          className={`readinglist-results ${
-            itemsLoaded ? 'readinglist-results--loaded' : ''
-          }`}
-        >
-          <div className="readinglist-results-header">
-            {statusView === 'valid' ? 'Reading List' : 'Archive'}
+        <div className="readinglist-result-container">
+          <div
+            className={`readinglist-results ${
+              itemsLoaded ? 'readinglist-results--loaded' : ''
+            }`}
+          >
+            <div className="readinglist-results-header">
+              {statusView === 'valid' ? 'Reading List' : 'Archive'}
+            </div>
+            <div>{allItems}</div>
           </div>
-          <div>{allItems}</div>
+          <div className="loadmore-wrapper">{loadMoreButton}</div>
         </div>
         {snackBar}
       </div>