Update archive page to use pagination with page numbers and ellipses

* Change the way pagination is handled on the archive page
* Display page links for 10 pages max

client/homebrew/pages/archivePage/archivePage.jsx

@@ -100,9 +100,11 @@ const ArchivePage = createClass({
             try {
                 this.setState({ searching: true, error: null });
 
-                await request.get(
+                await request
+                    .get(
                         `/api/archive?title=${title}&page=${page}&size=${size}&v3=${v3}&legacy=${legacy}`
-                ).then((response) => {
+                    )
+                    .then((response) => {
                         if (response.ok) {
                             this.updateStateWithBrews(
                                 response.body.brews,
@@ -126,14 +128,16 @@ const ArchivePage = createClass({
         const { title, v3, legacy } = this.state;
 
         if (title !== '') {
-            
             try {
                 await request
                     .get(
                         `/api/archive/total?title=${title}&v3=${v3}&legacy=${legacy}`
-                ).then((response) => {
+                    )
+                    .then((response) => {
                         if (response.ok) {
-                        this.setState({totalBrews : response.body.totalBrews});
+                            this.setState({
+                                totalBrews: response.body.totalBrews,
+                            });
                         }
                     });
             } catch (error) {
@@ -148,7 +152,9 @@ const ArchivePage = createClass({
         return (
             <Navbar>
                 <Nav.section>
-                    <Nav.item className="brewTitle">Archive: Search for brews</Nav.item>
+                    <Nav.item className="brewTitle">
+                        Archive: Search for brews
+                    </Nav.item>
                 </Nav.section>
                 <Nav.section>
                     <NewBrew />
@@ -250,24 +256,32 @@ const ArchivePage = createClass({
 
             const totalPages = Math.ceil(totalBrews / size);
 
-            const pages = new Array(totalPages).fill().map((_, index) => (
+            let startPage, endPage;
+            if (page <= 6) {
+                startPage = 1;
+                endPage = Math.min(totalPages, 10);
+            } else if (page + 4 >= totalPages) {
+                startPage = Math.max(1, totalPages - 9);
+                endPage = totalPages;
+            } else {
+                startPage = page - 5;
+                endPage = page + 4;
+            }
+
+            const pagesAroundCurrent = new Array(endPage - startPage + 1)
+                .fill()
+                .map((_, index) => (
                     <a
-                    key={index}
+                        key={startPage + index}
                         className={`pageNumber ${
-                        page == index + 1 ? 'currentPage' : ''
+                            page === startPage + index ? 'currentPage' : ''
                         }`}
-                    href={`/archive?title=${title}&page=${
+                        onClick={() => this.loadPage(startPage + index, false)}
-                        index + 1
-                    }&size=${size}&v3=${v3}&legacy=${legacy}`}
                     >
-                    {index + 1}
+                        {startPage + index}
                     </a>
                 ));
 
-            if (totalPages === null) {
-                return;
-            }
-    
             return (
                 <div className="paginationControls">
                     {page > 1 && (
@@ -278,7 +292,13 @@ const ArchivePage = createClass({
                             &lt;&lt;
                         </button>
                     )}
-                    <ol className="pages">{pages}</ol>
+                    <ol className="pages">
+                        {startPage > 1 && <a className="firstPage pageNumber">1 ...</a>}
+                        {pagesAroundCurrent}
+                        {endPage < totalPages && (
+                            <a className="lastPage pageNumber">... {totalPages}</a>
+                        )}
+                    </ol>
                     {page < totalPages && (
                         <button
                             className="nextPage"
@@ -289,18 +309,12 @@ const ArchivePage = createClass({
                     )}
                 </div>
             );
-        } else { return;}
+        } else {
-
+            return null;
-        
+        }
     },
 
     renderFoundBrews() {
-        console.log('State when rendering:');
-        const stateWithoutBrewCollection = { ...this.state };
-        delete stateWithoutBrewCollection.brewCollection;
-        console.table(stateWithoutBrewCollection);
-        console.table(this.state.brewCollection);
-
         const { title, brewCollection, page, totalPages, error, searching } =
             this.state;
 

client/homebrew/pages/archivePage/archivePage.less

@@ -207,6 +207,13 @@ body {
                                         text-decoration:underline;
                                         pointer-events:none;
                                     }
+
+                                    &.firstPage {
+                                        margin-right:-5px;
+                                    }
+                                    &.lastPage {
+                                        margin-left:-5px;
+                                    }
                                 }
                             }
                             button {