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

function CrudExample() {
  const [users, setUsers] = useState([]);
  const [newUser, setNewUser] = useState({ name: "", email: "" });
  const [editUser, setEditUser] = useState({ id: "", name: "", email: "" });

  const apiUrl = "https://jsonplaceholder.typicode.com/users";

  // Fetching data from API (Read)
  useEffect(() => {
    axios.get(apiUrl)
      .then((response) => setUsers(response.data))
      .catch((error) => console.error(error));
  }, []);

  // Creating a new user (Create)
  const createUser = () => {
    axios.post(apiUrl, newUser)
      .then((response) => setUsers([...users, response.data]))
      .catch((error) => console.error(error));
  };

  // Updating user details (Update)
  const updateUser = () => {
    axios.put(`${apiUrl}/${editUser.id}`, editUser)
      .then((response) => {
        const updatedUsers = users.map((user) =>
          user.id === response.data.id ? response.data : user
        );
        setUsers(updatedUsers);
      })
      .catch((error) => console.error(error));
  };

  // Deleting a user (Delete)
  const deleteUser = (id) => {
    axios.delete(`${apiUrl}/${id}`)
      .then(() => {
        setUsers(users.filter((user) => user.id !== id));
      })
      .catch((error) => console.error(error));
  };

  return (
    <div>
      <h1>CRUD with API in React</h1>

      {/* Display users */}
      <h2>Users List</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.email})
            <button onClick={() => deleteUser(user.id)}>Delete</button>
            <button onClick={() => setEditUser(user)}>Edit</button>
          </li>
        ))}
      </ul>

      {/* Create new user form */}
      <h2>Create User</h2>
      <input
        type="text"
        placeholder="Name"
        value={newUser.name}
        onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
      />
      <input
        type="email"
        placeholder="Email"
        value={newUser.email}
        onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
      />
      <button onClick={createUser}>Add User</button>

      {/* Edit user form */}
      {editUser.id && (
        <div>
          <h2>Edit User</h2>
          <input
            type="text"
            value={editUser.name}
            onChange={(e) => setEditUser({ ...editUser, name: e.target.value })}
          />
          <input
            type="email"
            value={editUser.email}
            onChange={(e) => setEditUser({ ...editUser, email: e.target.value })}
          />
          <button onClick={updateUser}>Update User</button>
        </div>
      )}
    </div>
  );
}

export default CrudExample;

5. Explanation of CRUD Operations

Create User

• createUser function uses POST to send new data to the API.
• When the user is added successfully, the state is updated with the new user.

Read Users

• useEffect is used to fetch data from the API when the component is mounted ([] as a dependency).
• The axios.get() method retrieves data from the API and updates the users state.

Update User

• The updateUser function is triggered when you update the user’s information.
• We use PUT to send the updated data to the API, and once the update is successful, the state is updated with the modified user list.

Delete User

• The deleteUser function uses DELETE to remove a user from the API.
• After deletion, the state is updated by removing the user from the users list.

6. Handling Errors and Loading States

It’s always important to handle errors and loading states when working with APIs.

• You can add a loading state to display a loading message while data is being fetched.
• Use try-catch blocks or .catch() to handle any errors that occur during API requests.

7. Key Points to Remember

• Use Axios or fetch to make API calls in React.
• Use state hooks like useState to store and manage data in your component.
• useEffect helps to fetch data on component mount and manage side effects.
• CRUD operations are essential when interacting with RESTful APIs in React.
• Always handle API errors and loading states to ensure a smooth user experience.