Source: manager/managerMenuTable.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';

/**
 * ManagerMenuTable class displays the menu table in the manager view
 * It handles adding, editing, deleting and updating the menu table and fetching the relevant data from the django backend
 * @param {object|null} menu_items - The MenuItem objects retrieved from the Django backend
 * @author Sophia Evanisko
 */
const ManagerMenuTable = ({ menu_items }) => {
    const [rows, setRows] = useState(menu_items);
    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. "menu"
       */
    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}`;
        }

        // Make a DELETE request to your Django backend to delete the menu item
        await fetch(apiUrl);

        // Update the local state by removing the deleted menu item
        const updatedRows = rows.filter((menuitem) => menuitem.id !== id);
        setRows(updatedRows);
      } catch (error) {
        console.error(`Error deleting menu item: ${error.message}`);
      }
    };

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

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


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


  return (
    <div>
        <div>
            <Button variant="info" id="button-basic" onClick={() => handleAddMenuItem()}>Add Menu Item</Button>
            <Button variant="warning" id="button-basic" onClick={() => handleEditMenuItem()}>Edit Menu Item</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>Menu Type</th>
                        <th>Name</th>
                        <th>Ingredients</th>
                        <th>Price</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {rows.map((menuitem) => (
                        <tr key={menuitem.id}>
                        <td>{menuitem.id}</td>
                        <td>{menuitem.menu_type}</td>
                        <td>{menuitem.name}</td>
                        <td>{menuitem.ingredients}</td>
                        <td>{menuitem.price}</td>
                        <td>
                            <Button
                            variant="danger"
                            onClick={() => deleteRow(menuitem.id, "menuitem")}
                            >
                            Delete
                            </Button>
                        </td>
                        </tr>
                    ))}
                </tbody>
            </Table>
        </div>
    </div>
    
  );
};

export default ManagerMenuTable;