Skip to content
Snippets Groups Projects
Select Git revision
  • e0050d6ced4741c9904e95607e2bcf47d865c71b
  • master default protected
2 results

App.js

Blame
  • App.js 2.83 KiB
    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>