Source: manager/managerInventoryTable.js

import React, { useState, useEffect } from 'react';
import { Table, Button, Form, Col } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './managerPages.css';

/**
 * ManagerInventoryTable class displays the inventory table in the manager view
 * It handles adding, editing, deleting and updating the inventory table and fetching the relevant data from the django backend
 * @param {object|null} inventory - The Ingredient objects retrieved from the Django backend
 * @author Sophia Evanisko
 */
const ManagerInventoryTable = ({ inventory }) => {

    const [rows, setRows] = useState(inventory);
    const [showAddForm, setShowAddForm] = useState(false);
    const [showEditForm, setShowEditForm] = useState(false);

    /**
     * Will delete the entry with the given id from the table and update the display
     * @param {*} id - the id of the entry to be deleted
     * @param {*} table - a string representing the purpose of the table i.e. "inventory"
     */
    const deleteRow = async (id, table) => {
        console.log("Attempting to delete " + id);
    
        try {
            let apiUrl;
            if (process.env.NODE_ENV === 'development') {
                apiUrl = `http://localhost:8000/datamanagement/deleteRow/${id}/${table}`;
              } else {
                apiUrl = `https://csce315331-07b.onrender.com/datamanagement/deleteRow/${id}/${table}`;
            }
    
            await fetch(apiUrl);

            const updatedRows = rows.filter((row) => row.id !== id);
            setRows(updatedRows);
        } catch (error) {
            console.error(`Error deleting ingredient: ${error.message}`);
        }
      };


    /**
     * Shows the add ingredient form and hides the edit ingredient form
     */
    const handleAddIngredient = () => {
        setShowAddForm(true);
        setShowEditForm(false);
    };


    /**
     * Hides the add ingredient form and displays the edit ingredient form
     */
    const handleEditIngredient = () => {
        setShowAddForm(false);
        setShowEditForm(true);
    }

    /**
     * Update the local state when the inventory prop changes
     */
    useEffect(() => {
        setRows(inventory);
      }, [inventory]);


    return (
        <div>
            <div>
                <Button variant="info" id="button-basic" onClick={() => handleAddIngredient()}>Add Ingredient</Button>
                <Button variant="warning" id="button-basic" onClick={() => handleEditIngredient()}>Edit Ingredient</Button>
            </div>

            <div>
                {showAddForm && (
                    <div> 
                        <h1>add item here</h1>
                        <Form>
                            
                            
                        </Form>
                    </div>

                )}
            </div>

            <div>
                {showEditForm && (
                    <div> 
                        <h1>edit item here</h1>
                        <Form>
                            
                            
                        </Form>
                    </div>

                )}
            </div>

            <div className="scrollable-tbody">
                <Table striped bordered hover>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Weight</th>
                            <th>Quantity</th>
                            <th>Standard Amount</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {inventory.map((ingredient) => (
                            <tr key={ingredient.id}>
                                <td>{ingredient.id}</td>
                                <td>{ingredient.name}</td>
                                <td>{ingredient.type}</td>
                                <td>{ingredient.weight}</td>
                                <td>{ingredient.quantity}</td>
                                <td>{ingredient.standard_amount}</td>
                                <td>
                                    <Button variant="danger" onClick={() => deleteRow(ingredient.id, "ingredient")}>
                                    Delete
                                    </Button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </Table>
            </div>
        </div>
        
        
    );
};
  
export default ManagerInventoryTable;