Switch to using react-paginate so we dont need to manage that code ourselves

package.json

@@ -93,6 +93,7 @@
     "postcss-url": "^9.0.0",
     "react-chartjs-2": "^2.11.1",
     "react-helmet": "^6.1.0",
+    "react-paginate": "^7.1.0",
     "react-radio-group": "^3.0.3",
     "react-timeago": "^5.2.0",
     "reactstrap": "^8.9.0"

src/components/Pages.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {Pagination, PaginationItem, PaginationLink} from 'reactstrap';
+import ReactPaginate from 'react-paginate';
 
 export default class Pages extends React.PureComponent {
 
@@ -11,51 +11,33 @@ export default class Pages extends React.PureComponent {
       updatePage: PropTypes.func.isRequired
   };
 
-  pageRange() {
-      const currentPosition = Math.ceil(this.props.pagesToDisplay / 2);
-      const start = this.props.current < currentPosition ? 1
-          : this.props.current - currentPosition + 1;
-      const len = this.props.pages < start + this.props.pagesToDisplay - 1
-          ? this.props.pages - start + 1 : this.props.pagesToDisplay;
-      return Array
-          .apply(null, Array(len))
-          .map((u, i) => start + i);
-  }
-
   render() {
       const {updatePage, current, pages} = this.props;
-      const updatePageWrapper = (num) => {
-          return (e) => {
-              e.preventDefault();
-              updatePage(num);
-          };
-      };
+      const handlePageClick = (data) => updatePage(data.selected);
 
       return (
-          <Pagination aria-label="Page navigation example">
-              {current !== 1 && <PaginationItem>
-                  <PaginationLink first onClick={updatePageWrapper(1)} />
-              </PaginationItem>}
-              {current > 1 && <PaginationItem>
-                  <PaginationLink previous onClick={updatePageWrapper(current-1)} />
-              </PaginationItem>}
-              {this.pageRange().map((page) => {
-                  const isCurrent = current == page;
-                  return (
-                      <PaginationItem key={page} active={isCurrent}>
-                          <PaginationLink onClick={updatePageWrapper(page)}>
-                              {page}
-                          </PaginationLink>
-                      </PaginationItem>
-                  );
-              })}
-              {current !== pages && <PaginationItem>
-                  <PaginationLink next onClick={updatePageWrapper(current + 1)} />
-              </PaginationItem>}
-              {current !== pages && <PaginationItem>
-                  <PaginationLink last onClick={updatePageWrapper(pages)} />
-              </PaginationItem>}
-          </Pagination>
+          <ReactPaginate
+              pageCount={pages}
+              marginPagesDisplayed={2}
+              pageRangeDisplayed={this.props.pagesToDisplay}
+              onPageChange={handlePageClick}
+              forcePage={current}
+
+              breakLabel={'...'}
+              breakClassName={'page-item disabled'}
+              breakLinkClassName={'page-link'}
+
+              pageClassName={'page-item'}
+              pageLinkClassName={'page-link'}
+              nextClassName={'page-item'}
+              nextLinkClassName={'page-link'}
+              previousClassName={'page-item'}
+              previousLinkClassName={'page-link'}
+
+              containerClassName={'pagination'}
+              subContainerClassName={'pages pagination'}
+              activeClassName={'active'}
+          />
       );
   }
 }

src/templates/search.jsx

@@ -47,7 +47,7 @@ const doSearch = (data, setResults) => {
         index.search(query, {page: page-1, filters: filters.join(' AND ')}).then(({nbHits, page, nbPages, hits, hitsPerPage}) => {
             setResults({
                 total: nbHits,
-                pages: nbPages,
+                pages: nbPages + 1,
                 page: page + 1,
                 limit: hitsPerPage,
                 plugins: hits

src/utils/algolia-queries.js

@@ -43,6 +43,7 @@ function pluginQueries() {
         transformer: ({data}) => data.pages.edges.map(pageToAlgoliaRecord),
         indexName: 'Plugins',
         settings: {
+            paginationLimitedTo: 2000, // they recommend 1000, to keep speed up and prevent people from scraping, but both are fine to us
             attributesToSnippet: ['content:20'],
             ranking: [
                 'typo',