load more

src/components/LoadMore/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import Button from "../forms/Button";
+
+const LoadMore = ({ onLoadMoreEvt = () => {} }) => {
+  return <Button onClick={onLoadMoreEvt}>Load More</Button>;
+};
+
+export default LoadMore;

src/components/ProductsResults/index.js

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useHistory, useParams } from "react-router-dom";
 import { fetchProductsStart } from "../../redux/Product/products.action";
 import FormSelect from "../forms/FormSelect";
+import LoadMore from "../LoadMore";
 import Product from "./Product";
 import "./styles.scss";
 
@@ -11,6 +12,7 @@ const ProductsResults = ({}) => {
   const history = useHistory();
   const { filterType } = useParams();
   const products = useSelector((state) => state.productsData.products);
+  const { data, queryDoc, isLastPage } = products;
 
   useEffect(() => {
     dispatch(fetchProductsStart({ filterType }));
@@ -21,9 +23,9 @@ const ProductsResults = ({}) => {
     history.push(`/search/${pickedFilter}`);
   };
 
-  if (!Array.isArray(products)) return null;
+  if (!Array.isArray(data)) return null;
 
-  if (products.length < 1) {
+  if (data.length < 1) {
     return (
       <div className="products">
         <p>No search results.</p>
@@ -48,12 +50,24 @@ const ProductsResults = ({}) => {
     ],
     handleChange: handleFilters,
   };
+  const handleLoadMore = () => {
+    dispatch(
+      fetchProductsStart({
+        filterType,
+        startAfterDoc: queryDoc,
+        persistProducts: data,
+      })
+    );
+  };
+  const configLoadMore = {
+    onLoadMoreEvt: handleLoadMore,
+  };
   return (
     <div className="products">
       <h1>Browse Products</h1>
       <FormSelect {...configFilters} />
       <div className="productResults">
-        {products.map((product, index) => {
+        {data.map((product, index) => {
           const { productThumbnail, productName, productPrice } = product;
           if (
             !productThumbnail ||
@@ -65,6 +79,7 @@ const ProductsResults = ({}) => {
           return <Product key={index} {...configProduct} />;
         })}
       </div>
+      {!isLastPage && <LoadMore {...configLoadMore} />}
     </div>
   );
 };

src/pages/Admin/index.js

@@ -2,53 +2,76 @@ import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
   addProductStart,
-  deleteProductStart,
   fetchProductsStart,
+  deleteProductStart,
 } from "./../../redux/Product/products.action";
-import "./styles.scss";
 import Modal from "./../../components/Modal";
 import FormInput from "./../../components/forms/FormInput";
-import Button from "./../../components/forms/Button";
 import FormSelect from "./../../components/forms/FormSelect";
+import Button from "./../../components/forms/Button";
+import LoadMore from "./../../components/LoadMore";
+import "./styles.scss";
 
 const Admin = () => {
+  const products = useSelector((state) => state.productsData.products);
   const dispatch = useDispatch();
   const [hideModal, setHideModal] = useState(true);
   const [productCategory, setProductCategory] = useState("mens");
   const [productName, setProductName] = useState("");
   const [productThumbnail, setProductThumbnail] = useState("");
   const [productPrice, setProductPrice] = useState(0);
-  const products = useSelector((state) => state.productsData.products);
+  const [productDesc, setProductDesc] = useState("");
+
+  const { data, queryDoc, isLastPage } = products;
+
+  useEffect(() => {
+    dispatch(fetchProductsStart());
+  }, []);
 
   const toggleModal = () => setHideModal(!hideModal);
+
   const configModal = {
     hideModal,
     toggleModal,
   };
 
   const resetForm = () => {
-    setHideModal(true)
-    setProductCategory('mens');
-    setProductName('');
-    setProductThumbnail('');
-    setProductPrice('')
-  }
+    setHideModal(true);
+    setProductCategory("mens");
+    setProductName("");
+    setProductThumbnail("");
+    setProductPrice(0);
+    setProductDesc("");
+  };
 
   const handleSubmit = (e) => {
     e.preventDefault();
+
     dispatch(
       addProductStart({
         productCategory,
         productName,
-        productPrice,
         productThumbnail,
+        productPrice,
+        productDesc,
       })
     );
-    resetForm()
+    resetForm();
   };
-  useEffect(() => {
-    dispatch(fetchProductsStart);
-  }, []);
+
+  const handleLoadMore = () => {
+    dispatch(
+      fetchProductsStart({
+        startAfterDoc: queryDoc,
+        persistProducts: data,
+      })
+    );
+  };
+
+  const configLoadMore = {
+    onLoadMoreEvt: handleLoadMore,
+  };
+
   return (
     <div className="admin">
       <div className="callToActions">
@@ -94,19 +117,24 @@ const Admin = () => {
             />
 
             <FormInput
-              type="Price"
+              label="Price"
+              type="number"
               min="0.00"
               max="10000.00"
               step="0.01"
               value={productPrice}
               handleChange={(e) => setProductPrice(e.target.value)}
             />
+
+            <br />
+
             <Button type="submit">Add product</Button>
           </form>
         </div>
       </Modal>
+
       <div className="manageProducts">
-        <table border='0' cellPadding='0' cellSpacing='0'>
+        <table border="0" cellPadding="0" cellSpacing="0">
           <tbody>
             <tr>
               <th>
@@ -115,26 +143,56 @@ const Admin = () => {
             </tr>
             <tr>
               <td>
-                <table className='results' border='0' cellPadding='10' cellSpacing='0'>
+                <table
+                  className="results"
+                  border="0"
+                  cellPadding="10"
+                  cellSpacing="0"
+                >
+                  <tbody>
+                    {Array.isArray(data) &&
+                      data.length > 0 &&
+                      data.map((product, index) => {
+                        const {
+                          productName,
+                          productThumbnail,
+                          productPrice,
+                          documentID,
+                        } = product;
+
+                        return (
+                          <tr key={index}>
+                            <td>
+                              <img className="thumb" src={productThumbnail} />
+                            </td>
+                            <td>{productName}</td>
+                            <td>£{productPrice}</td>
+                            <td>
+                              <Button
+                                onClick={() =>
+                                  dispatch(deleteProductStart(documentID))
+                                }
+                              >
+                                Delete
+                              </Button>
+                            </td>
+                          </tr>
+                        );
+                      })}
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+            <tr>
+              <td></td>
+            </tr>
+            <tr>
+              <td>
+                <table border="0" cellPadding="10" cellSpacing="0">
                   <tbody>
-                    {products.map((product, index) => {
-                      const {
-                        productName,
-                        productThumbnail,
-                        productPrice,
-                        documentID
-                      } = product;
-                      return (
-                        <tr key={index}>
-                          <td>
-                            <img src={productThumbnail} alt="product image" />
-                          </td>
-                          <td>{productName}</td>
-                          <td>${productPrice}</td>
-                          <td><Button onClick={() => dispatch(deleteProductStart(documentID))}>Delete</Button></td>
-                        </tr>
-                      );
-                    })}
+                    <tr>
+                      <td>{!isLastPage && <LoadMore {...configLoadMore} />}</td>
+                    </tr>
                   </tbody>
                 </table>
               </td>

src/redux/Product/product.sagas.js

@@ -29,9 +29,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));
   } catch (error) {
     console.log(error);

src/redux/Product/products.helpers.js

@@ -11,22 +11,40 @@ export const handleAddProduct = (product) => {
   });
 };
 
-export const handleFetchProducts = ({ filterType }) => {
+export const handleFetchProducts = ({
+  filterType,
+  startAfterDoc,
+  presistProducts = [],
+}) => {
   return new Promise((resolve, reject) => {
-    let ref = firestore.collection("products").orderBy("createdDate");
+    const pageSize = 6;
+
+    let ref = firestore
+      .collection("products")
+      .orderBy("createdDate")
+      .limit(pageSize);
 
     if (filterType) ref = ref.where("productCategory", "==", filterType);
+    if (startAfterDoc) ref = ref.startAfter(startAfterDoc);
 
     ref
       .get()
       .then((snapshot) => {
-        const productsArray = snapshot.docs.map((doc) => {
-          return {
-            ...doc.data(),
-            documentID: doc.id,
-          };
+        const totalCout = snapshot.size;
+        const data = [
+          ...presistProducts,
+          ...snapshot.docs.map((doc) => {
+            return {
+              ...doc.data(),
+              documentID: doc.id,
+            };
+          }),
+        ];
+        resolve({
+          data,
+          queryDoc: snapshot.docs[totalCout - 1],
+          isLastPage: totalCout < 1,
         });
-        resolve(productsArray);
       })
       .catch((err) => reject(err));
   });