adds Paginator styles and adjusts the leading and trailing ellipsis logic

src/client/components/layout/Table/index.scss

@@ -2,6 +2,7 @@
 
 table {
   width: 100%;
+  margin-bottom: base(.75);
 
   th {
     @extend %uppercase-label;

src/client/components/modules/Pagination/NextArrow/index.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import Arrow from '../../../graphics/Arrow';
-
-import './index.scss';
-
-const NextArrow = () => <span className="next-arrow"><Arrow /></span>;
-
-export default NextArrow;

src/client/components/modules/Pagination/Page/index.scss

@@ -1,5 +0,0 @@
-.paginator__page {
- &--is-current {
-   background: red;
- }
-}

src/client/components/modules/Pagination/PrevArrow/index.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import Arrow from '../../../graphics/Arrow';
-
-import './index.scss';
-
-const PrevArrow = () => <span className="prev-arrow"><Arrow /></span>;
-
-export default PrevArrow;

src/client/components/modules/Pagination/index.scss

@@ -1,20 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.pagination {
-  margin-top: base(.5);
-  display: flex;
-  align-items: flex-end;
-
-  .pagination-node.prev {
-    .icon {
-      transform: scaleX(-1);
-    }
-  }
-
-  .ellipsis {
-    line-height: 1;
-    padding: base(.25);
-    padding-bottom: 0;
-    margin-right: base(.45);
-  }
-}

src/client/components/modules/Paginator/Ellipsis/index.js

@@ -2,6 +2,6 @@ import React from 'react';
 
 import './index.scss';
 
-const Ellipsis = () => <span className="ellipsis">...</span>;
+const Ellipsis = () => <span className="paginator__ellipsis">...</span>;
 
 export default Ellipsis;

src/client/components/modules/Paginator/NextArrow/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Arrow from '../../../graphics/Arrow';
+
+import './index.scss';
+
+const NextArrow = ({ updatePage }) => (
+  <button
+    className="paginator__next-arrow"
+    onClick={updatePage}
+    type="button"
+  >
+    <Arrow />
+  </button>
+);
+
+NextArrow.defaultProps = {
+  updatePage: null,
+};
+
+NextArrow.propTypes = {
+  updatePage: PropTypes.func,
+};
+
+export default NextArrow;

src/client/components/modules/Paginator/Page/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import './index.scss';
 
@@ -21,4 +22,16 @@ const Page = ({ page, isCurrent, updatePage }) => {
   );
 };
 
+Page.defaultProps = {
+  page: 1,
+  isCurrent: false,
+  updatePage: null,
+};
+
+Page.propTypes = {
+  page: PropTypes.number,
+  isCurrent: PropTypes.bool,
+  updatePage: PropTypes.func,
+};
+
 export default Page;

src/client/components/modules/Paginator/PrevArrow/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Arrow from '../../../graphics/Arrow';
+
+import './index.scss';
+
+const PrevArrow = ({ updatePage }) => (
+  <button
+    className="paginator__prev-arrow"
+    onClick={updatePage}
+    type="button"
+  >
+    <Arrow />
+  </button>
+);
+
+PrevArrow.defaultProps = {
+  updatePage: null,
+};
+
+PrevArrow.propTypes = {
+  updatePage: PropTypes.func,
+};
+
+export default PrevArrow;

src/client/components/modules/Paginator/PrevArrow/index.scss

@@ -0,0 +1,3 @@
+.prev-arrow {
+  transform: rotate(180deg);
+}

src/client/components/modules/Paginator/index.js

@@ -17,7 +17,7 @@ const nodeTypes = {
   PrevArrow,
 };
 
-const baseClass = 'pagination';
+const baseClass = 'paginator';
 
 const Pagination = (props) => {
   const history = useHistory();
@@ -33,6 +33,7 @@ const Pagination = (props) => {
     numberOfNeighbors,
   } = props;
 
+  // uses react router to set the current page
   const updatePage = (page) => {
     const params = queryString.parse(location.search, { ignoreQueryPrefix: true });
     params.page = page;
@@ -56,8 +57,9 @@ const Pagination = (props) => {
   const nodes = pages.slice(rangeStartIndex, rangeEndIndex);
 
   // Add prev ellipsis and first page if necessary
+  if (currentPage - numberOfNeighbors - 1 >= 2) nodes.unshift({ type: 'Ellipsis' });
+  // Add first page if necessary
   if (currentPage > numberOfNeighbors + 1) {
-    nodes.unshift({ type: 'Ellipsis' });
     nodes.unshift({
       type: 'Page',
       props: {
@@ -68,8 +70,9 @@ const Pagination = (props) => {
   }
 
   // Add next ellipsis and total page if necessary
+  if (currentPage + numberOfNeighbors + 1 < totalPages) nodes.push({ type: 'Ellipsis' });
+  // Add last page if necessary
   if (rangeEndIndex < totalPages) {
-    nodes.push({ type: 'Ellipsis' });
     nodes.push({
       type: 'Page',
       props: {
@@ -79,7 +82,7 @@ const Pagination = (props) => {
     });
   }
 
-  // Add prev and next arrows based on need
+  // Add prev and next arrows based on necessity
   if (hasPrevPage) {
     nodes.unshift({
       type: 'PrevArrow',

src/client/components/modules/Paginator/index.scss

@@ -0,0 +1,38 @@
+@import '../../../scss/styles.scss';
+
+.paginator {
+  display: flex;
+  align-items: flex-end;
+
+  &__prev-arrow,
+  &__next-arrow,
+  &__page {
+    @extend %btn-reset;
+    line-height: 1;
+    outline: 0;
+    box-shadow: $shadow-sm;
+    padding: base(.5) base(.65);
+    margin-right: base(.45);
+    cursor: pointer;
+    font-size: base(.4);
+    color: $black;
+
+    &--is-current {
+      color: $gray;
+      cursor: default;
+    }
+  }
+
+  &__prev-arrow {
+    .icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__ellipsis {
+    line-height: 1;
+    padding: base(.25);
+    padding-bottom: 0;
+    margin-right: base(.45);
+  }
+}

src/client/components/views/collections/List/index.js

@@ -7,7 +7,7 @@ import getSanitizedConfig from '../../../../config/getSanitizedConfig';
 import DefaultTemplate from '../../../layout/DefaultTemplate';
 import HeadingButton from '../../../modules/HeadingButton';
 import SearchableTable from '../../../modules/SearchableTable';
-import Pagination from '../../../modules/Pagination';
+import Pagination from '../../../modules/Paginator';
 
 import './index.scss';
 
@@ -27,7 +27,7 @@ const ListView = (props) => {
     `${serverURL}/${collection.slug}?`,
     page && `page=${page}&`,
     'page=4&',
-    'limit=4',
+    'limit=1',
   ].filter(Boolean).join('');
 
   const [{ data }] = usePayloadAPI(apiURL);