Changes to handle new endpoint

package.json

@@ -17,7 +17,7 @@
     "web-vitals": "^1.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=3005 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/components/FoodOrder/Cart/Cart.js

@@ -1,28 +1,15 @@
 import React, { useContext, useState } from "react";
-import Modal from "../UI/Modal";
+import Modal from "../UI/Modal/Modal";
 import CartItem from "./CartItem";
 import classes from "./Cart.module.css";
 import CartContext from "../store/cart-context";
 import OrderDetails from "./OrderDetails";
 
 const Cart = (props) => {
-
-  const userData = {
-    "clientName": "Marvin the Martian",
-    "clientId": "123"
-  };
-  /*
-  const pruebaData = {
-    "ordersDate": "26-09-2021",
-    "ordersStatus": "ON KITCHEN",
-    "ordersDelivaddress": "Comunidad El Pino",
-    "idPayment": "1",        
-    "idUser": "1"
-  };
-  */
   const [isCheckout, setIsCheckout] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [didSubmit, setDidSubmit] = useState(false);
+  const [isErrorOnSentOrder, setIsErrorOnSentOrder] = useState(false);
   const cartCtx = useContext(CartContext);
 
   const totalAmount = `$${cartCtx.totalAmount.toFixed(2)}`;
@@ -33,37 +20,46 @@ const Cart = (props) => {
   };
 
   const cartItemAddHandler = (item) => {
-    cartCtx.addItem({...item, amount: 1});
+    cartCtx.addItem({ ...item, amount: 1 });
   };
 
   const orderHandler = () => {
     setIsCheckout(true);
   };
 
+  const showCartHandler = () => {
+    setIsCheckout(false);
+  };
+
+  const errorOnSentOrderHandler = () => {
+    setIsErrorOnSentOrder(true);
+  };
+
   const submitOrderHandler = async (userData) => {
-        /*
-    await fetch("http://localhost:8080/api/orders", {  
-      credentials: "include",    
+    setIsSubmitting(true);
+    const rawData = cartCtx.items;
+    const cleanData = rawData.map(({id, ...restOfTheFields}) => restOfTheFields);
+
+    const response = await fetch("http://localhost:3000/ordertemps", {
+      //
       method: "POST",
-      body: JSON.stringify(pruebaData),
       headers: {
-        'Content-Type': 'application/json',
-//        'Access-Control-Allow-Origin': '*',
-        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0ZXN0MUBmYWtlbWFpbC5jb20iLCJleHAiOjE2MzI3NTAzODYsImlhdCI6MTYzMjcxNDM4Nn0.2tvdnG9B0HdpUpV0xsOKKaATFkyuNVKMpzYE8sXBFtw',
-      }
-      */ 
-
-    setIsSubmitting(true);
-    await fetch("https://movieserp-default-rtdb.firebaseio.com/orders.json", {
-      method: 'POST',
-      BODY: JSON.stringify({
-        user: userData,
-        orderedItems: cartCtx.items,
-      }),
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        ordertemp: cleanData,
+       }), //please include user: userData
     });
-    setIsSubmitting(false);
-    setDidSubmit(true);
-    cartCtx.clearCart();
+
+    if (!response.ok){
+      errorOnSentOrderHandler();
+    }
+    else{
+      setIsSubmitting(false);
+      setIsCheckout(false);
+      setDidSubmit(true);
+      cartCtx.clearCart();
+    }
   };
 
   const cartItems = (
@@ -81,16 +77,46 @@ const Cart = (props) => {
     </ul>
   );
 
-  const modalActions = (
-    <div className={classes.actions}>
+  const cartEmptyButtons = (
+    <React.Fragment>
       <button className={classes["button--alt"]} onClick={props.onClose}>
         Close
       </button>
-      {hasItems && (
-        <button className={classes.button} onClick={orderHandler}>
-          Order
-        </button>
-      )}
+    </React.Fragment>
+  );
+
+  const cartContentButtons = (
+    <React.Fragment>
+      <button className={classes["button--alt"]} onClick={orderHandler}>
+        Order's Details
+      </button>
+      <button className={classes["button--alt"]} onClick={props.onClose}>
+        Close
+      </button>      
+    </React.Fragment>
+  );
+
+  const orderDetailsButtons = (
+    <React.Fragment>
+      <button className={classes["button--alt"]} onClick={submitOrderHandler}>
+        Confirm Order
+      </button>            
+      <button className={classes["button--alt"]} onClick={showCartHandler}>
+        Cart's Content
+      </button>
+      <button className={classes["button--alt"]} onClick={props.onClose}>
+        Close
+      </button>      
+    </React.Fragment>
+  );
+
+  const modalActions = (
+    <div className={classes.actions}>
+      {!isCheckout && hasItems
+        ? cartContentButtons
+        : !isCheckout && !hasItems
+        ? cartEmptyButtons
+        : orderDetailsButtons}
     </div>
   );
 
@@ -101,16 +127,36 @@ const Cart = (props) => {
         <span>Total Amount</span>
         <span>{totalAmount}</span>
       </div>
+      {modalActions}
+    </React.Fragment>
+  );
 
+  const OrderDetailsModalContent = (
+    <React.Fragment>
       {isCheckout && (
-        <OrderDetails onConfirm={submitOrderHandler} onCancel={props.onClose} />
+        <OrderDetails />
       )}
-      {!isCheckout && modalActions}
+      {modalActions}
     </React.Fragment>
   );
 
-  const isSubmittingModalContent = <p>Sending order data...</p>;
   /* incluir transaccion para verificar si es exitoso o hubo algun error */
+  const isSubmittingModalContent = (
+    <React.Fragment>
+      <p>Sending order data...</p>
+    </React.Fragment>
+  );
+
+  const errorOnSentOrderModalContent = (
+    <React.Fragment>
+      <p>Process failed. An error occurs sending the order!</p>
+      <div className={classes.actions}>
+        <button className={classes.button} onClick={props.onClose}>
+          Close
+        </button>
+      </div>
+    </React.Fragment>
+  );
 
   const didSubmitModalContent = (
     <React.Fragment>
@@ -125,8 +171,10 @@ const Cart = (props) => {
 
   return (
     <Modal onClose={props.onClose}>
-      {!isSubmitting && !didSubmit && CartModalContent}
-      {isSubmitting && isSubmittingModalContent}
+      {!isSubmitting && !didSubmit && !isCheckout && CartModalContent}
+      {isCheckout && !isSubmitting && OrderDetailsModalContent}
+      {isSubmitting && !isErrorOnSentOrder && !didSubmit && isSubmittingModalContent}
+      {isErrorOnSentOrder && errorOnSentOrderModalContent}
       {!isSubmitting && didSubmit && didSubmitModalContent}
     </Modal>
   );

src/components/FoodOrder/Cart/CartItem.js

@@ -1,7 +1,8 @@
 import classes from './CartItem.module.css';
 
 const CartItem = (props) => {
-  const price = `$${props.price.toFixed(2)}`;
+  //const price = `$${props.price.toFixed(2)}`;
+  const price = `$${parseFloat(props.price).toFixed(2)}`;
 
   return (
     <li className={classes['cart-item']}>