Basic CRUD App React/TypeScript

// Import necessary modules from React and Axios
import React, { useState, useEffect, ChangeEvent } from 'react'; // Import useState and useEffect for managing state and lifecycle, ChangeEvent for typing events
import axios from 'axios'; // Axios is used for making HTTP requests

// Define an interface to type the structure of our items
interface Item {
  id: number; // Unique identifier for each item
  name: string; // Name of the item
  description: string; // Description of the item
}

const App: React.FC = () => {
  // State to hold the list of items fetched from the server
  const [items, setItems] = useState<Item[]>([]); // items is an array of Item objects

  // State to manage the new item being added (doesn't have an id yet)
  const [newItem, setNewItem] = useState<Omit<Item, 'id'>>({ name: '', description: '' }); 
  // Omit<Item, 'id'> means we are creating an object with all properties of Item, except 'id', since the id is automatically generated by the server.

  // State to manage the item being edited (null if no item is being edited)
  const [editItem, setEditItem] = useState<Item | null>(null); 
  // This can either hold an item object (for editing) or null (when nothing is being edited).

  // useEffect is a hook that runs side-effects; here, it runs when the component mounts
  // Fetches all items from the server when the component is first loaded
  useEffect(() => {
    axios.get<Item[]>('http://localhost:5000/items') // GET request to fetch all items
      .then(response => {
        setItems(response.data); // Sets the items state with the data fetched from the server
      })
      .catch(error => {
        console.error('Error fetching items:', error); // Logs an error if the request fails
      });
  }, []); // The empty array ensures this effect only runs once, after the initial render

  // Handle changes in the input fields for adding a new item
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target; // Destructure the name and value of the changed input field
    setNewItem((prevState) => ({ ...prevState, [name]: value })); 
    // Spread the previous state (...prevState) and update only the changed field ([name]: value)
  };

  // Function to add a new item to the list
  const addItem = () => {
    axios.post<Item>('http://localhost:5000/items', newItem) 
    // POST request to add a new item to the server
      .then(response => {
        setItems([...items, response.data]); 
        // Add the newly created item (response.data) to the list of items
        setNewItem({ name: '', description: '' }); 
        // Clear the input fields after the item is added
      })
      .catch(error => {
        console.error('Error adding item:', error); // Log an error if the request fails
      });
  };

  // Start editing an existing item
  const startEdit = (item: Item) => {
    setEditItem(item); // Set the editItem state to the selected item, allowing it to be edited
  };

  // Save the edited item
  const saveEdit = () => {
    if (!editItem) return; // If no item is selected for editing, return early

    axios.put<Item>(`http://localhost:5000/items/${editItem.id}`, editItem) 
    // PUT request to update the item on the server with the new data
      .then(response => {
        // Map through the items array and replace the old item with the updated one
        const updatedItems = items.map(item =>
          item.id === editItem.id ? response.data : item // If the item id matches, replace it with the updated item
        );
        setItems(updatedItems); // Update the state with the new list of items
        setEditItem(null); // Clear the editItem state after saving the changes
      })
      .catch(error => {
        console.error('Error updating item:', error); // Log an error if the request fails
      });
  };

  // Delete an item from the list
  const deleteItem = (id: number) => {
    axios.delete(`http://localhost:5000/items/${id}`) 
    // DELETE request to remove an item from the server by its id
      .then(() => {
        setItems(items.filter(item => item.id !== id)); 
        // Update the items state to remove the deleted item from the list
      })
      .catch(error => {
        console.error('Error deleting item:', error); // Log an error if the request fails
      });
  };

  // JSX return statement: renders the UI
  return (
    <div>
      <h1>CRUD Application with TypeScript</h1>

      <h2>Items</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {editItem?.id === item.id ? ( 
            // Check if the item is currently being edited (editItem.id === item.id)
              <div>
                <input
                  name="name"
                  value={editItem.name}
                  onChange={(e) =>
                    setEditItem({ ...editItem, name: e.target.value }) 
                    // Update the name field of the item being edited
                  }
                />
                <input
                  name="description"
                  value={editItem.description}
                  onChange={(e) =>
                    setEditItem({ ...editItem, description: e.target.value }) 
                    // Update the description field of the item being edited
                  }
                />
                <button onClick={saveEdit}>Save</button> 
                {/* Button to save the edited item */}
                <button onClick={() => setEditItem(null)}>Cancel</button> 
                {/* Button to cancel editing */}
              </div>
            ) : (
              <div>
                {item.name} - {item.description} 
                {/* Display the item name and description */}
                <button onClick={() => startEdit(item)}>Edit</button> 
                {/* Button to start editing the selected item */}
                <button onClick={() => deleteItem(item.id)}>Delete</button> 
                {/* Button to delete the selected item */}
              </div>
            )}
          </li>
        ))}
      </ul>

      <h2>Add New Item</h2>
      <input
        name="name"
        value={newItem.name}
        onChange={handleChange} 
        // Input field for the name of the new item, updates the state when changed
        placeholder="Item Name"
      />
      <input
        name="description"
        value={newItem.description}
        onChange={handleChange} 
        // Input field for the description of the new item, updates the state when changed
        placeholder="Item Description"
      />
      <button onClick={addItem}>Add Item</button> 
      {/* Button to add the new item */}
    </div>
  );
};

// Export the App component as the default export
export default App;