Pagination

src/components/Pagination/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import './styles.scss';
+
+const Pagination = ({
+  onNextEvt,
+  onPrevEvt
+}) => {
+  return (
+    <div className="pagination">
+      <ul>
+        <li>
+          <span onClick={() => onPrevEvt()}>
+            Prev
+          </span>
+        </li>
+        <li>
+          <span onClick={() => onNextEvt()}>
+            Next
+          </span>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Pagination;

src/components/Pagination/styles.scss

@@ -0,0 +1,51 @@
+.adminPagination {
+
+  .pagination {
+    text-align: left;
+    padding: 0;
+
+    ul li:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.pagination {
+  display: block;
+  width: 100%;
+  padding:  0 10px;
+  margin: 5rem auto;
+  text-align: center;
+
+  ul, ul li {
+    padding: 0;
+    margin: 0;
+  }
+
+  ul {
+    li {
+      display: inline-block;
+      list-style-type: none;
+      margin: 0 2rem;
+
+      span {
+        display: block;
+        font-size: 1.8rem;
+        line-height: 1;
+        font-weight: 400;
+        text-transform: uppercase;
+        color: black;
+        border: 1px solid black;
+        padding: 10px 25px;
+        cursor: pointer;
+        transition: all .4s ease-in-out;
+
+        &:hover {
+          background: black;
+          color: white;
+          transition: all .4s ease-in-out;
+        }
+      }
+    }
+  }
+}

src/components/ProductResults/index.js

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useParams } from 'react-router-dom';
 import { fetchProductsStart } from './../../redux/Products/products.actions';
 import Product from './Product';
+import Pagination from './../Pagination';
 import FormSelect from './../forms/FormSelect';
 import './styles.scss';
 
@@ -16,6 +17,8 @@ const ProductResults = ({ }) => {
   const { filterType } = useParams();
   const { products } = useSelector(mapState);
 
+  const { data, queryDoc } = products;
+
   useEffect(() => {
     dispatch(
       fetchProductsStart({ filterType })
@@ -27,8 +30,20 @@ const ProductResults = ({ }) => {
     history.push(`/search/${nextFilter}`);
   };
 
-  if (!Array.isArray(products)) return null;
-  if (products.length < 1) {
+  const handleNext = () => {
+    dispatch(
+      fetchProductsStart({ filterType, startAfterDoc: queryDoc })
+    )
+  };
+
+  const handlePrev = () => {
+    dispatch(
+      fetchProductsStart({ filterType, endAtDoc: queryDoc })
+    )
+  };
+
+  if (!Array.isArray(data)) return null;
+  if (data.length < 1) {
     return (
       <div className="products">
         <p>
@@ -53,6 +68,11 @@ const ProductResults = ({ }) => {
     handleChange: handleFilter
   };
 
+  const configPagination = {
+    onNextEvt: handleNext,
+    onPrevEvt: handlePrev
+  };
+
   return (
     <div className="products">
 
@@ -63,7 +83,7 @@ const ProductResults = ({ }) => {
       <FormSelect {...configFilters} />
 
       <div className="productResults">
-        {products.map((product, pos) => {
+        {data.map((product, pos) => {
           const { productThumbnail, productName, productPrice } = product;
           if (!productThumbnail || !productName ||
             typeof productPrice === 'undefined') return null;
@@ -79,6 +99,9 @@ const ProductResults = ({ }) => {
           );
         })}
       </div>
+
+      <Pagination {...configPagination} />
+
     </div>
   );
 };

src/pages/Admin/index.js

@@ -5,6 +5,7 @@ import Modal from './../../components/Modal';
 import FormInput from './../../components/forms/FormInput';
 import FormSelect from './../../components/forms/FormSelect';
 import Button from './../../components/forms/Button';
+import Pagination from './../../components/Pagination';
 import './styles.scss';
 
 const mapState = ({ productsData }) => ({
@@ -20,11 +21,12 @@ const Admin = props => {
   const [productThumbnail, setProductThumbnail] = useState('');
   const [productPrice, setProductPrice] = useState(0);
 
+  const { data, queryDoc } = products;
+
   useEffect(() => {
     dispatch(
       fetchProductsStart()
     );
-
   }, []);
 
   const toggleModal = () => setHideModal(!hideModal);
@@ -57,6 +59,23 @@ const Admin = props => {
 
   };
 
+  const handleNext = () => {
+    dispatch(
+      fetchProductsStart({ startAfterDoc: queryDoc })
+    )
+  };
+
+  const handlePrev = () => {
+    dispatch(
+      fetchProductsStart({ endAtDoc: queryDoc })
+    )
+  };
+
+  const configPagination = {
+    onNextEvt: handleNext,
+    onPrevEvt: handlePrev
+  };
+
   return (
     <div className="admin">
 
@@ -137,7 +156,7 @@ const Admin = props => {
               <td>
                 <table className="results" border="0" cellPadding="10" cellSpacing="0">
                   <tbody>
-                    {products.map((product, index) => {
+                    {(Array.isArray(data) && data.length > 0) && data.map((product, index) => {
                       const {
                         productName,
                         productThumbnail,
@@ -171,6 +190,9 @@ const Admin = props => {
           </tbody>
         </table>
 
+        <div className="adminPagination">
+          <Pagination {...configPagination} />
+        </div>
       </div>
 
     </div>

src/redux/Products/products.actions.js

@@ -5,7 +5,7 @@ export const addProductStart = productData => ({
   payload: productData
 });
 
-export const fetchProductsStart = (filters) => ({
+export const fetchProductsStart = (filters={}) => ({
   type: productsTypes.FETCH_PRODUCTS_START,
   payload: filters
 });

src/redux/Products/products.helpers.js

@@ -15,23 +15,32 @@ export const handleAddProduct = product => {
   });
 }
 
-export const handleFetchProducts = ({ filterType }) => {
+export const handleFetchProducts = ({ filterType, startAfterDoc, endAtDoc }) => {
   return new Promise((resolve, reject) => {
+    const pageSize = 6;
 
-    let ref = firestore.collection('products').orderBy('createdDate');
+    let ref = firestore.collection('products').orderBy('createdDate').limit(pageSize);
 
     if (filterType) ref = ref.where('productCategory', '==', filterType);
+    if (startAfterDoc) ref = ref.startAfter(startAfterDoc);
+    if (endAtDoc) ref = ref.endAt(endAtDoc);
 
     ref
       .get()
       .then(snapshot => {
-        const productsArray = snapshot.docs.map(doc => {
+
+        if (snapshot.size < 1) reject('No results');
+
+        const data = snapshot.docs.map(doc => {
           return {
             ...doc.data(),
             documentID: doc.id
           }
         });
-        resolve(productsArray);
+        resolve({
+          data,
+          queryDoc: snapshot.docs.pop()
+        });
       })
       .catch(err => {
         reject(err);

src/redux/Products/products.sagas.js

@@ -36,11 +36,9 @@ export function* onAddProductStart() {
   yield takeLatest(productsTypes.ADD_NEW_PRODUCT_START, addProduct);
 }
 
-export function* fetchProducts({ payload: {
-  filterType
-}}) {
+export function* fetchProducts({ payload }) {
   try {
-    const products = yield handleFetchProducts({ filterType });
+    const products = yield handleFetchProducts(payload);
     yield put(
       setProducts(products)
     );