empty cart, firebase-firestore react-hooks - reactjs

Question

I'm developing an ecommerce app with Firestore.
When a user deletes an item or adds an item - it's rendering properly.
But when I'm trying to empty the whole cart (delete doc), it's just not rendering without refresh.
Maybe it's about the deleted doc, so the the function cannot find the doc because there is no doc?
If so, what would be best practice solution here?
Here is the code:
import React, { useState, useEffect } from 'react'
import firebase from 'firebase';
import { useAuth, useStoreUpdate } from '../contexts/FirebaseContext';
import { Link, useHistory } from 'react-router-dom';
import 'react-responsive-modal/styles.css';
import { Modal } from 'react-responsive-modal';
export default function Cart() {
const [userMail, setUserMail] = useState(undefined)
const [userCart, setUserCart] = useState(undefined)
const [totalAmmout, setTotalAmmout] = useState(0)
const user = useAuth()
const userDoc = firebase.firestore().collection("cart").doc(userMail)
const updateStore = useStoreUpdate()
const [open, setOpen] = useState(false);
const onOpenModal = () => setOpen(true);
const onCloseModal = () => setOpen(false);
const history = useHistory()
const emptyCart = async () => {
await userDoc.delete()
await updateCart()
await console.log('ksaljdklasd');
await updateStore()
await console.log('dasdsad');
}
const updateCart = () => {
userDoc.get().then((doc) => {
if (doc.exists) {
let cart = doc.data()
setUserCart(cart)
}
})
}
const updateData = async () => {
if (user.currentUser) {
await updateCart()
if (userCart) {
let totalPrice = 0;
await userCart.item.forEach(item => {
totalPrice += item.price
})
await setTotalAmmout(totalPrice)
}
}
}
async function removeFromCart(itemId, name, url, price, category, type, description) {
const cartItem = { itemId, name, url, price, category, type, description }
await userDoc.update({
item: firebase.firestore.FieldValue.arrayRemove(cartItem)
})
await updateCart()
await updateStore()
}
useEffect(() => {
if (user.currentUser) {
setUserMail(user.currentUser.email);
updateStore();
}
}, []);
useEffect(() => {
updateData().then(
console.log(totalAmmout)
)
}, userCart);
if (!userCart) return <h1>hold</h1>
return (
<main className="main-cart">
<div className="container">
{userCart.item && userCart.item.length >= 1 && userCart.item.map((item) => {
return (
< div className="item-container" key={item.itemId} >
<h3>{item.name}</h3>
<p>${item.price}</p>
<img height="150px" width="150px" src={item.url} alt="" />
<button onClick={async () => {
await removeFromCart(item.itemId, item.name, item.url, item.price, item.category, item.type, item.description)
}}>X</button>
</div>
)
})}
</div>
<button className="fixed-bottom-link" onClick={onOpenModal}>finish</button>
<Modal showCloseIcon={true} open={open} onClose={onCloseModal} center>
<div className="modal-container">
<div>
{userCart &&
userCart.item.map(item => {
return (
<li>{item.name} <span className="strong">{'|$' + item.price}</span></li>
)
})
}
{totalAmmout &&
<h3>total price: ${totalAmmout}</h3>
}
</div>
<button onClick={emptyCart}>Click to Pay</button>
</div>
</Modal>
</main >
)
}

Answer 1

just had to reset the doc :
befor :
const emptyCart = async () => {
await userDoc.delete()
await updateCart()
await updateStore()
}
after :
const emptyCart = async () => {
const userDoc = await firebase.firestore().collection("cart").doc(userMail)
await userDoc.delete()
await userDoc.set({
item: firebase.firestore.FieldValue.arrayUnion()
})
await updateCart()
await updateStore()
}