I am having trouble doing the checkout of a cart. I am new with React and Firebase. I just created a Cart. I did a onclick for a checkOut and when I try to place the order the new component is emmpty, it shows nothing. Also, how could I do to empty the Cart as soon as the order is place? I mean to empty "list". list is a state where are all the items.
This is the Cart.jsx: import { useState } from "react"; import { Button, Col, Container, Form, Table } from "react-bootstrap"; import { Link } from "react-router-dom"; import { useCartContext } from "../../Context/CartContext"; import { getFirestore } from "../../firebase"; const CartComponent = () => { const { list, totalPrice, deleteProd } = useCartContext(); const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [phone, setPhone] = useState(''); const [orderId, setOrderId] = useState(); const placeOrder = () => { let newOrder = { Buyer: {name: name, email: email, phone: phone}, items: [...list], total: totalPrice()}; console.log("newOreder", newOrder); const fsDB = getFirestore(); const orederCollection = fsDB.collection("orders"); orederCollection.add(newOrder).then((value) => { setOrderId(value.id); }); } return ( <> <h1 className="py-4 text-center text-muted"> Cart </h1>} {list.length > 0 ? (<div><Container><Table striped hover className="text-muted"> <thead> <tr> <th>Product</th> <th>Title</th> <th>Quantity</th> <th>Price</th> {!header && <th> </th>} </tr> </thead> <tbody> {list.map((varietal) => ( <tr key={varietal.id}> <td> <img src={varietal.image} alt='img' style= /> </td> <td className="align-middle">{varietal.title}</td> <td className="align-middle">{varietal.count}</td> <td className="align-middle">${varietal.price}</td> <td className="align-middle"><button onClick={() => deleteProd(varietal)} className="badge badge-info">Remove</button></td> </tr> ))} </tbody> <tfoot> <tr className="font-weight-bold h4 mr-5 pr-5"> <td colSpan={(!header) ? 4 : 3} className="text-right">Total</td> <td className="mr-5 pr-5">${totalPrice()}</td> </tr> </tfoot> </Table> <div className="mr-5 pr-5"><Form as={Col} className="mx-5 px-5 text-muted"> <Form.Group> <Form.Label>Name</Form.Label> <Form.Control className="font-italic font-weight-lighter" type="text" placeholder="Enter name.." onChange={(e) => {setName(e.target.value)}} /> </Form.Group> <Form.Group> <Form.Label>Email address</Form.Label> <Form.Control className="font-italic font-weight-lighter" type="email" placeholder="Enter email.." onChange={(e) => {setEmail(e.target.value)}} /> </Form.Group> <Form.Group> <Form.Label>Telephone Number</Form.Label> <Form.Control className="font-italic font-weight-lighter" type="tel" placeholder="Enter telephone number.." onChange={(e) => {setPhone(e.target.value)}} /> </Form.Group> <Form.Text className="font-italic text-muted"> We'll never share your information with anyone else. </Form.Text> </Form> <Link to='/purchaseDone' name={name} orderId={orderId}><Button variant="info" className="mx-auto my-4 d-block" size="lg" onClick={() => {placeOrder()}}>Place order</Button></Link> </div> </Container> </div> ) : (<div> <h3 className="d-flex justify-content-center pt-5 text-muted">The Cart is empty</h3> <p className="d-flex justify-content-center text-muted"> Return to home to see our products </p>} <Link to='/' className="d-flex justify-content-center text-decoration-none"><button className="btn btn-info"> Home </button></Link> </div>) </> ); }; export default CartComponent; This is the component that I want to show once the button "place order" is press:
const purchaseDone = (props) => { return( <> <h1>Thanks for buying with us {props.name}</h1> <h2>This is the ID of your purchase: {props.orderId}</h2> </> ); }; export default purchaseDone; This is the CartProvider where the context is:
import { useState } from "react"; import { CartContext } from "./CartContext"; export const CartProvider = ({ children }) => { const [list, setList] = useState([]); const addCart = (varietalCount) => { console.log("varietal para el carrito", varietalCount); if (list.find((item) => item.id === varietalCount.id)) { const newVarietal = list.map((varietal) => { if (varietal.id === varietalCount.id) { return { ...varietal, count: varietalCount.count + varietal.count }; } return varietal; }); setList(newVarietal); } else { setList((state) => { return [...state, varietalCount]; }); } }; console.log("list", list); const deleteProd = (varietalCount) => { const newItems = list.filter((item) => item.id !== varietalCount.id) setList(newItems); }; const totalPrice = () => { return list.reduce((prev, next) => (prev + (next.count * next.price)), 0) }; const totalQuantity = () => { return list.reduce((prev, next) => (prev + (next.count)), 0) }; return( <> <CartContext.Provider value=> {children} </CartContext.Provider> </>); }; 
没有评论:
发表评论