App.js

import React, { useState, useEffect } from "react";
import "./assets/css/app.css";
import CheckoutPage from "./Checkout";
import Products from "./Products";
import Header from "./Header";
import RegisterPage from "./RegisterProductPage";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { collection, getDocs, addDoc } from "firebase/firestore";
import { db } from "./firebase";

const App = (props) => {
  let [cartItems, setCartItems] = useState([]);
  let [products, setProducts] = useState([]);
  let [user, setUser] = useState(null);

  const fetchData = async () => {
    /* firestore security rule change : 
          allow read : if request.auth != null; 
          allow write : if request != null;
        */
    const querySnapshot = await getDocs(collection(db, "petshop"));
    let products = [];
    querySnapshot.forEach((doc) => {
      products.push(doc.data());
    });
    setProducts([...products]);
    console.log(products);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleDeleteItem = (index) => {
    const updatedCartItems = cartItems.filter((item, i) => i !== index);
    setCartItems(updatedCartItems);
  };

  const DeleteAllItem = () => {
    setCartItems([]);
  };

  const updateInventory = () => {
    cartItems.forEach((item) => {
      console.log("item" + item);
      products.forEach((product) => {
        console.log("product" + product);
        if (item.id === product.id) product.availableInventory -= 1;
      });
    });
    setCartItems([]);
  };

  const addProduct = async (product) => {
    const docRef = await addDoc(collection(db, "petshop"), product);
    console.log(`document id : ${docRef.id}`);
    setProducts([...products, product]);
  };

  return (
    <BrowserRouter>
      <header>
        <Header
          name={props.sitename}
          nItems={cartItems.length}
          user={user}
          onSignIn={setUser}
          onSignOut={() => setUser(null)}
        />
      </header>
      <main>
        <Routes>
          <Route
            path="/"
            element={
              <Products
                products={products}
                cart={cartItems}
                onSetCart={setCartItems}
                user={user}
              />
            }
          ></Route>
          <Route
            path="/checkout"
            element={
              <CheckoutPage
                cartItems={cartItems}
                onDeleteItem={handleDeleteItem}
                deleteAll={DeleteAllItem}
                updateInventory={updateInventory}
              />
            }
          ></Route>
          <Route
            path="/register-product"
            element={
              <RegisterPage
                addProduct={addProduct}
              />
            }
          ></Route>
        </Routes>
      </main>
    </BrowserRouter>
  );
};

export default App;