Untitled

import React, { useState, useEffect } from "react";

function EquipmentManager() {
  const [equipmentList, setEquipmentList] = useState([]);
  const [newEquipment, setNewEquipment] = useState({ name: "", type: "", amount: "" });
  const [editMode, setEditMode] = useState(null);
  const [editedEquipment, setEditedEquipment] = useState({});

  useEffect(() => {
    fetch("/equipment")
      .then((res) => res.json())
      .then((data) => setEquipmentList(data))
      .catch((error) => console.error("Error fetching equipment:", error));
  }, []);

  const addEquipment = () => {
    fetch("/equipment", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newEquipment),
    })
      .then((res) => res.json())
      .then((data) => {
        setEquipmentList([...equipmentList, data]);
        setNewEquipment({ name: "", type: "", amount: "" });
      })
      .catch((error) => console.error("Error adding equipment:", error));
  };

  const editEquipment = (index) => {
    setEditMode(index);
    setEditedEquipment({ ...equipmentList[index] });
  };

  const updateEquipment = (index) => {
    fetch(`/equipment/${editedEquipment._id}`, {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(editedEquipment),
    })
      .then((res) => res.json())
      .then(() => {
        const updatedList = [...equipmentList];
        updatedList[index] = editedEquipment;
        setEquipmentList(updatedList);
        setEditMode(null);
        setEditedEquipment({});
      })
      .catch((error) => console.error("Error updating equipment:", error));
  };

  const cancelEdit = () => {
    setEditMode(null);
    setEditedEquipment({});
  };

  const deleteEquipment = (index, equipmentId) => {
    fetch(`/equipment/${equipmentId}`, {
      method: "DELETE",
    })
      .then(() => {
        const updatedList = [...equipmentList];
        updatedList.splice(index, 1);
        setEquipmentList(updatedList);
      })
      .catch((error) => console.error("Error deleting equipment:", error));
  };

  return (
    <div>
      <h1>Equipment Manager</h1>
      <div>
        <h2>Add New Equipment</h2>
        <input
          type="text"
          placeholder="Name"
          value={newEquipment.name}
          onChange={(e) => setNewEquipment({ ...newEquipment, name: e.target.value })}
        />
        <input
          type="text"
          placeholder="Type"
          value={newEquipment.type}
          onChange={(e) => setNewEquipment({ ...newEquipment, type: e.target.value })}
        />
        <input
          type="text"
          placeholder="Amount"
          value={newEquipment.amount}
          onChange={(e) => setNewEquipment({ ...newEquipment, amount: e.target.value })}
        />
        <button onClick={addEquipment}>Add</button>
      </div>
      <div>
        <h2>Equipment List</h2>
        <ul>
          {equipmentList.map((equipment, index) => (
            <li key={equipment._id}>
              {editMode === index ? (
                <>
                  <input
                    type="text"
                    value={editedEquipment.name || equipment.name}
                    onChange={(e) => setEditedEquipment({ ...editedEquipment, name: e.target.value })}
                  />
                  <input
                    type="text"
                    value={editedEquipment.type || equipment.type}
                    onChange={(e) => setEditedEquipment({ ...editedEquipment, type: e.target.value })}
                  />
                  <input
                    type="text"
                    value={editedEquipment.amount || equipment.amount}
                    onChange={(e) => setEditedEquipment({ ...editedEquipment, amount: e.target.value })}
                  />
                  <button onClick={() => updateEquipment(index)}>Submit</button>
                  <button onClick={cancelEdit}>Cancel</button>
                </>
              ) : (
                <>
                  <span>{equipment.name} </span>
                  <span>{equipment.type} </span>
                  <span>{equipment.amount}</span>
                  <button onClick={() => editEquipment(index)}>Edit</button>
                  <button onClick={() => deleteEquipment(index, equipment._id)}>Delete</button>
                </>
              )}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default EquipmentManager;