re-architected api call from client

client/src/App.js

@@ -13,6 +13,7 @@ const UploadPage = React.lazy(() => import("./Page/UploadProduct.page"));
 const ProductPage = React.lazy(() => import("./Page/Products.page"));
 const SelectedProduct = React.lazy(() => import("./Page/SelectedProduct.page"));
 const CartPage = React.lazy(() => import("./Page/Cart.page"));
+const OrderPage = React.lazy(() => import("./Page/Orders.page"));
 
 function App() {
   // Destructuring auth data from Auth0 hook
@@ -33,11 +34,8 @@ function App() {
             exact
             component={SelectedProduct}
           />
-          <Route
-            path="/cart"
-            exact
-            component={() => <CartPage isAuth={isAuthenticated} user={user} />}
-          />
+          <Route path="/cart" exact component={CartPage} />
+          <Route path="/orders" exact component={OrderPage} />
         </Suspense>
       </Switch>
     </div>

client/src/Page/Cart.page.jsx

@@ -1,23 +1,24 @@
 // Libraries
-import React from "react";
-import { Container, Row, Col, Card } from "reactstrap";
+import React, { useState } from "react";
+import { Container, Row, Col, Card, Modal, ModalBody } from "reactstrap";
 import { useSelector, useDispatch } from "react-redux";
+import { Link } from "react-router-dom";
 import SumBy from "lodash/sumBy";
 
 // Components
 import PaymentButton from "../components/PaymentButton/PaymentButton.component";
 
-// Utilities
-import { cartData } from "../utils/defaultData.util";
-
 // Redux Action
 import {
   incrementQuantity,
   decrementQuantity,
   deleteProduct,
+  clearCart,
 } from "../redux/reducer/Cart/Cart.action";
 
 const Cart = (props) => {
+  const [paymentSuccess, setPaymentSuccess] = useState(false);
+
   // Redux state
   const reduxState = useSelector(({ cart }) => ({ cart }));
 
@@ -31,6 +32,26 @@ const Cart = (props) => {
   return (
     <>
       <Container>
+        <Modal
+          isOpen={paymentSuccess}
+          toggle={() => setPaymentSuccess(!paymentSuccess)}
+        >
+          <ModalBody>
+            <div className="d-flex justify-content-center">
+              <img
+                src="https://assets-ouch.icons8.com/free-download/304/ff381043-e5e3-4b0a-95d3-708000f97eda.png?filename=kingdom-order-completed.png"
+                className="img-fluid w-50"
+                alt="payment success image"
+              />
+            </div>
+            <h2 className="mt-3 display-3 text-default text-center">
+              Your Order has been placed{" "}
+              <Link to="/" className="h4 text-primary font-weight-700">
+                <i className="fas fa-arrpw-left" /> Explore more products
+              </Link>
+            </h2>
+          </ModalBody>
+        </Modal>
         <div className="mt-3 border-bottom border-primary d-flex justify-content-between">
           <h1 className="text-primary">Your Cart</h1>
           <h1 className="font-weight-700">
@@ -103,6 +124,9 @@ const Cart = (props) => {
                 )}
                 isAuth={props.isAuth}
                 user={props.user}
+                paymentSuccess={paymentSuccess}
+                setPaymentSuccess={setPaymentSuccess}
+                clearCart={clearCart}
               />
             </Col>
           </>

client/src/Page/Home.page.jsx

@@ -16,13 +16,18 @@ import { carouselList } from "../utils/defaultData.util";
 import { getHomePageData } from "../redux/reducer/Products/Products.actions";
 
 const HomePage = () => {
-  const [home, setHome] = useState({});
+  const [home, setHome] = useState([]);
 
   const dispatch = useDispatch();
   const reduxState = useSelector(({ products }) => ({ products }));
 
   useEffect(() => {
-    dispatch(getHomePageData());
+    const homeDataAction = async () => {
+      const homeData = await dispatch(getHomePageData());
+      setHome(homeData.payload);
+      console.log(homeData.payload);
+    };
+    homeDataAction();
   }, []);
 
   return (
@@ -34,7 +39,7 @@ const HomePage = () => {
           <UncontrolledCarousel items={carouselList} />
           <Container>
             <SelectedProducts />
-            <FeaturedProducts />
+            <FeaturedProducts list={home} />
           </Container>
           <Footer />
         </>

client/src/Page/Orders.page.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Container, Row, Col, Card, Modal, ModalBody } from "reactstrap";
+
+const Order = () => {
+  return (
+    <>
+      <Container>
+        <div className="mt-3 border-bottom border-primary d-flex justify-content-between">
+          <h1 className="text-primary">Your Orders</h1>
+        </div>
+      </Container>
+    </>
+  );
+};
+
+export default Order;

client/src/Page/Products.page.jsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Container,
   Row,
@@ -8,21 +8,35 @@ import {
   Col,
   ModalBody,
   Label,
+  Spinner,
 } from "reactstrap";
 import { useParams } from "react-router-dom";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 
 // Components
 import ProductCard from "../components/ProductCard/ProductCard.component";
 
+// Actions
+import { getProductsWithCategory } from "../redux/reducer/Products/Products.actions";
+
 const ProductPage = () => {
   const [showFilter, setShowFilter] = useState(false);
+  const [productData, setProductData] = useState([]);
 
   // Redux state
   const reduxState = useSelector(({ products }) => ({ products }));
 
   // Params hooks
   const { category } = useParams();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const getProductsAction = async () => {
+      const getproductsData = await dispatch(getProductsWithCategory(category));
+      setProductData(getproductsData.payload);
+    };
+    getProductsAction();
+  }, [category]);
 
   // Function to toggle filter modal
   const toggle = () => setShowFilter(!showFilter);
@@ -59,23 +73,28 @@ const ProductPage = () => {
           </h3>
         </Row>
         <Row className="justify-content-center">
-          {reduxState.products.home.map(
-            ({
-              Category,
-              Product_image1,
-              Product_name,
-              Product_Price,
-              Product_ID,
-            }) =>
-              Category.includes(category) && (
-                <ProductCard
-                  img={Product_image1}
-                  name={Product_name}
-                  price={Product_Price}
-                  Product_ID={Product_ID}
-                  category={Category}
-                />
-              )
+          {reduxState.products.loading ? (
+            <Spinner color="primary" />
+          ) : (
+            productData.map(
+              ({
+                Category,
+                Product_image1,
+                Product_name,
+                Product_Price,
+                Product_ID,
+              }) =>
+                Category.includes(category) && (
+                  <ProductCard
+                    img={Product_image1}
+                    name={Product_name}
+                    price={Product_Price}
+                    Product_ID={Product_ID}
+                    category={Category}
+                    key={Product_ID}
+                  />
+                )
+            )
           )}
         </Row>
       </Container>