Merge pull request #21 from TrumanH/230111-clean-up-checked-items-in-…

…cart

230111 clean up checked items in cart

src/App.js

@@ -15,14 +15,14 @@ const App = ()=> {
   useEffect(() => {
     const unsubscribe = onAuthStateChangeListener((user)=>{
       const createUser = async (user) => {
+        if (!user) {return;}
+        // console.log(user); // here can't get displayName from userAuth
         const userSnapshot = await createUserDocumentFromAuth(user);
-        return userSnapshot;
+        const userDoc = userSnapshot.data()
+        dispatch(setUser(userDoc));
       };
-      if (user) { 
-        const userSnapshot = createUser(user); 
-        console.log(userSnapshot);
-        dispatch(setUser(user)); // TODO: test and use userSnapshot!
-      }
+
+      createUser(user);
     });
 
     return unsubscribe;

src/components/payment-form/payment-form.component.jsx

@@ -1,13 +1,15 @@
 import { useState } from 'react';
 import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
 import { PaymentFormContainer, FormContainer, PaymentButton } from './payment-form.styles';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { cleanUpItems } from '../../store/cart/cart.slice';
 
 const PaymentForm = () => {
   const stripe = useStripe();
   const elements = useElements();
   const totalPrice = useSelector(state=>state.cart.totalPrice);
   const currentUser = useSelector(state=>state.user.user);
+  const dispatch = useDispatch();
   // console.log(currentUser);
   const [ isPaymentProcessing, setPaymentProcessing ] = useState(false);
 
@@ -42,6 +44,7 @@ const PaymentForm = () => {
     } else {
       if (paymentResult.paymentIntent.status === 'succeeded') {
         alert('Payment Successful!');
+        dispatch(cleanUpItems()); // after payment successed, clean up checked products in the cart.
       }
     }
   }

src/store/cart/cart.slice.js

@@ -54,8 +54,14 @@ export const cartSlice = createSlice({
         state.cartItems = removeItemFromCart(state.cartItems, action.payload);
         updateTotal(state);
       },
+      cleanUpItems: (state) => {
+        state.cartItems = []
+        state.isCartOpen = false
+        state.totalPrice = 0
+        state.totalQuantity = 0
+      },
     },
 });
 
-export const { setCartOpen, addItem, decreaseItem, removeItem } = cartSlice.actions;
+export const { setCartOpen, addItem, decreaseItem, removeItem, cleanUpItems } = cartSlice.actions;
 export default cartSlice.reducer;