From 2331bdedfb47fecce2d51e203efed086fecfeb31 Mon Sep 17 00:00:00 2001 From: pavankpdev Date: Sat, 28 Nov 2020 17:49:02 +0530 Subject: [PATCH] re-architected api call from client --- client/src/App.js | 8 +- client/src/Page/Cart.page.jsx | 34 ++++- client/src/Page/Home.page.jsx | 11 +- client/src/Page/Orders.page.jsx | 16 ++ client/src/Page/Products.page.jsx | 57 ++++--- client/src/Page/SelectedProduct.page.jsx | 144 +++++++----------- .../components/NavBar/NavBar.component.jsx | 5 + .../PaymentButton/PaymentButton.component.jsx | 26 +++- .../FeaturedProductCard.component.jsx | 26 ++-- .../FeaturedProducts.components.jsx | 37 ++--- .../ReviewCard/ReviewCard.component.jsx | 42 +++++ client/src/redux/reducer/Cart/Cart.action.js | 4 + client/src/redux/reducer/Cart/Cart.reducer.js | 6 +- client/src/redux/reducer/Cart/Cart.type.js | 1 + .../reducer/Products/Products.actions.js | 42 ++++- .../reducer/Products/Products.reducer.js | 15 +- .../redux/reducer/Products/Products.type.js | 2 + client/src/utils/defaultData.util.js | 29 ---- client/src/utils/keys.js | 4 +- nginx/default.conf | 8 +- server/node_server/Api/Orders/Orders.api.js | 44 ++++++ .../node_server/Api/Products/Products.api.js | 41 ++++- server/node_server/config/logs.config.js | 2 + server/node_server/database/connectDB.js | 6 +- server/node_server/logs/home.log | 14 ++ .../{routes/index.js => logs/orders.log} | 0 server/node_server/logs/products.log | 116 ++++++++++++++ server/node_server/server.js | 2 + 28 files changed, 532 insertions(+), 210 deletions(-) create mode 100644 client/src/Page/Orders.page.jsx create mode 100644 client/src/components/ReviewCard/ReviewCard.component.jsx create mode 100644 server/node_server/Api/Orders/Orders.api.js rename server/node_server/{routes/index.js => logs/orders.log} (100%) diff --git a/client/src/App.js b/client/src/App.js index f318d2d..36f736e 100644 --- a/client/src/App.js +++ b/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} /> - } - /> + + diff --git a/client/src/Page/Cart.page.jsx b/client/src/Page/Cart.page.jsx index 883d453..9de916f 100644 --- a/client/src/Page/Cart.page.jsx +++ b/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 ( <> + setPaymentSuccess(!paymentSuccess)} + > + +
+ payment success image +
+

+ Your Order has been placed{" "} + + Explore more products + +

+ +

Your Cart

@@ -103,6 +124,9 @@ const Cart = (props) => { )} isAuth={props.isAuth} user={props.user} + paymentSuccess={paymentSuccess} + setPaymentSuccess={setPaymentSuccess} + clearCart={clearCart} /> diff --git a/client/src/Page/Home.page.jsx b/client/src/Page/Home.page.jsx index 797da4b..058eb88 100644 --- a/client/src/Page/Home.page.jsx +++ b/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 = () => { - +
diff --git a/client/src/Page/Orders.page.jsx b/client/src/Page/Orders.page.jsx new file mode 100644 index 0000000..d4932d2 --- /dev/null +++ b/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 ( + <> + +
+

Your Orders

+
+ + + ); +}; + +export default Order; diff --git a/client/src/Page/Products.page.jsx b/client/src/Page/Products.page.jsx index f83a13d..60731f2 100644 --- a/client/src/Page/Products.page.jsx +++ b/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 = () => {

- {reduxState.products.home.map( - ({ - Category, - Product_image1, - Product_name, - Product_Price, - Product_ID, - }) => - Category.includes(category) && ( - - ) + {reduxState.products.loading ? ( + + ) : ( + productData.map( + ({ + Category, + Product_image1, + Product_name, + Product_Price, + Product_ID, + }) => + Category.includes(category) && ( + + ) + ) )} diff --git a/client/src/Page/SelectedProduct.page.jsx b/client/src/Page/SelectedProduct.page.jsx index 62d7626..4832753 100644 --- a/client/src/Page/SelectedProduct.page.jsx +++ b/client/src/Page/SelectedProduct.page.jsx @@ -15,14 +15,16 @@ import { ModalHeader, } from "reactstrap"; import { useSelector, useDispatch } from "react-redux"; +import { toNumber } from "lodash"; // Components import RatingStars from "../components/RatingStars/RatingStars.component"; import Footer from "../components/Footer/Footer.components"; -import { toNumber, update } from "lodash"; +import ReviewCard from "../components/ReviewCard/ReviewCard.component"; // Redux Actions import { addToCart, removeFromCart } from "../redux/reducer/Cart/Cart.action"; +import { getSpecificProductData } from "../redux/reducer/Products/Products.actions"; const SelectedProduct = () => { // Component State @@ -47,7 +49,7 @@ const SelectedProduct = () => { const reduxState = useSelector(({ products, cart }) => ({ products, cart })); // Initializing Hooks - const { product_id, category } = useParams(); + const { product_id } = useParams(); const dispatch = useDispatch(); // Updating selected product @@ -56,25 +58,56 @@ const SelectedProduct = () => { ({ Product_ID }) => Product_ID === toNumber(product_id) ); - const isInCart = reduxState.cart.cart.filter( - ({ Product_ID }) => Product_ID === toNumber(product_id) - ); + if (selectedProduct.length !== 0) { + const isInCart = reduxState.cart.cart.filter( + ({ Product_ID }) => Product_ID === toNumber(product_id) + ); - if (isInCart.length !== 0) { - setAddedToCart(true); + if (isInCart.length !== 0) { + setAddedToCart(true); + } + + setSelectedProductData(selectedProduct[0]); + setCarousalImage([ + { + key: "1", + src: selectedProduct[0].Product_image1, + }, + { + key: "2", + src: selectedProduct[0].Product_image2, + }, + ]); + return; } - setSelectedProductData(selectedProduct[0]); - setCarousalImage([ - { - key: "1", - src: selectedProduct[0].Product_image1, - }, - { - key: "2", - src: selectedProduct[0].Product_image2, - }, - ]); + const getSelectedProductDataAction = async () => { + const getSelectedProductData = await dispatch( + getSpecificProductData(product_id) + ); + + const isInCart = reduxState.cart.cart.filter( + ({ Product_ID }) => Product_ID === toNumber(product_id) + ); + + if (isInCart.length !== 0) { + setAddedToCart(true); + } + console.log(getSelectedProductData.payload); + setSelectedProductData(getSelectedProductData.payload); + setCarousalImage([ + { + key: "1", + src: getSelectedProductData.payload.Product_image1, + }, + { + key: "2", + src: getSelectedProductData.payload.Product_image2, + }, + ]); + }; + + getSelectedProductDataAction(); }, []); // Function add the selected product to cart @@ -223,75 +256,12 @@ const SelectedProduct = () => { overflowY: "auto", }} > -
- -
- -

- Pavan Kumar{" "} - - ( Reviewed on 2 October 2020 ) - -

-
- -

Waste of money

-

- Very bad product.customer care service is very .They deliver me - defective laptop and not returning or replacing it within its - period .Amazon say talk to Dell and Dell say your product is not - register so you talk to amazon .In these day amazon service is - very bad. I suggest you all to chose another online platforms to - buy any thing -

- -
-
- -
- -

- Pavan Kumar{" "} - - ( Reviewed on 2 October 2020 ) - -

-
- -

Waste of money

-

- Very bad product.customer care service is very .They deliver me - defective laptop and not returning or replacing it within its - period .Amazon say talk to Dell and Dell say your product is not - register so you talk to amazon .In these day amazon service is - very bad. I suggest you all to chose another online platforms to - buy any thing -

- -
-
- -
- -

- Pavan Kumar{" "} - - ( Reviewed on 2 October 2020 ) - -

-
- -

Waste of money

-

- Very bad product.customer care service is very .They deliver me - defective laptop and not returning or replacing it within its - period .Amazon say talk to Dell and Dell say your product is not - register so you talk to amazon .In these day amazon service is - very bad. I suggest you all to chose another online platforms to - buy any thing -

- -
+ + + + + +