Blog

				
					import "bootstrap/dist/css/bootstrap.css";
import "./index.css";
import axios, { CanceledError } from "axios";
import { useEffect, useState } from "react";

interface User {
  id: number;
  name: string;
}

function App() {
  const [users, setUsers] = useState<User[]>([]);
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const controller = new AbortController();

    setIsLoading(true);
    axios
      .get<User[]>("https://jsonplaceholder.typicode.com/users", {
        signal: controller.signal,
      })
      .then((res) => {
        setUsers(res.data);
        setIsLoading(false);
      })
      .catch((err) => {
        if (err instanceof CanceledError) return;
        setError(err.message);
        setIsLoading(false);
      });

    return () => controller.abort();
  }, []);

  // The constant returns a function that takes the user object of type User that we have defined at line 6
  const deleteUser = (user: User) => {
    const originalUsers = [...users];
    // Optimistic approch:
    // 1. update UI first
    // Filter users and get all the users(u.id) except the one with the given ID(user.id)
    setUsers(users.filter((u) => u.id !== user.id));

    // 2. Call the server to persist the changes
    axios
      // This returns a promise, but in this case, there is nothing we want to do after the promises resolved.
      // So we don't want to call '.then', instead we just want to call the '.catch' method to catch potential errors.
      .delete("https://jsonplaceholder.typicode.com/users/" + user.id)
      .catch((err) => {
        setError(err.message);
        // If it catches an error, it restores the UI back to the original state.
        setUsers(originalUsers);
      });
  };

  const addUser = () => {
    const originalUsers = [...users];
    const newUser = { id: 0, name: "Shazdeh" };
    setUsers([newUser, ...users]);

    axios
      // As a second argument we use newUser
      .post("https://jsonplaceholder.typicode.com/users", newUser)
      // one solution is to write the code as the following line:
      // .then((res) => setUsers([res.data, ...users]))
      // Another solution to make the code more readable is as follow:
      // Because we need to access the data property, we can destructure the response and grab the data property right here.
      // So first we wrap 'res' in parenthesis, then we add braces and grab the {data} property.
      // What is {data}?
      // .then(({data}) => setUsers([data, ...users]))
      // We can rename this property by typing a colon to savedUser. This is just an alias that we're assigning to the propery. So now we can use the savedUser object instead of data in this part: setUsers([data, ...users]))
      .then(({ data: savedUser }) => setUsers([savedUser, ...users]))
      .catch((err) => {
        setError(err.message);
        setUsers(originalUsers);
      });
  };

  const updateUser = (user: User) => {
    const originalUsers = [...users];
    console.log("User updated", user.name + "!");
    const updatedUser = { ...user, name: user.name + "!" };
    // Because we're updating an object, we should map the users
    // If the ID of the current user equals the ID of the user that is passed to this function, then we return the updated user, otherwise, we return the same user object.
    setUsers(users.map((u) => (u.id === user.id ? updatedUser : u)));

    // We can use 'patch' or 'put' method.
    // In HTTP, we use the PUT method for replacing an object and the patch method for patching or updating one or more of its properties.
    // In this case we're going to update only a single propery, so we're going to use the patch method.
    axios
      .patch(
        "https://jsonplaceholder.typicode.com/users/" + user.id,
        updatedUser
      )
      .catch((err) => {
        setError(err.message);
        setUsers(originalUsers);
      });
  };

  return (
    <>
      <p className="text-danger">{error}</p>
      {isLoading && (
        <div className="spinner-grow text-primary">
          <span className="visually-hidden">Loading...</span>
        </div>
      )}
      <button className="btn btn-primary mb-3" onClick={addUser}>
        Add a user
      </button>
      <ul className="list-group">
        {users.map((user) => (
          <li
            key={user.id}
            className="list-group-item d-flex justify-content-between"
          >
            {user.name}
            <div>
              <button
                className="btn btn-secondary mx-1"
                onClick={() => updateUser(user)}
              >
                Update
              </button>
              <button
                className="btn btn-outline-danger"
                onClick={() => {
                  console.log(user.id, "deleted");
                  // Pass the user object that we're currently rendering
                  deleteUser(user);
                }}
              >
                Delete
              </button>
            </div>
          </li>
        ))}
      </ul>
    </>
  );
}

export default App;