AllInOne.jsx

import React from "react";

// Can not really write good unit tests
// Every test should start with a mock of the API call to fetch the `book`
export default function BookDetail() {
  const [isDeleteClicked, setDeleteClicked] = React.useState(false);
  const { state: book, fetchBook, deleteBook } = React.useContext(BookContext);
  const bookUrl = utils.buildBookUrlFromUri();

  React.useEffect(() => {
    fetchBook(bookUrl);
  }, []);

  function onDeleteClick() {
    console.log("Book Deleted");
    deleteBook(bookUrl);
    setDeleteClicked(true);
  }

  if (book === null) {
    return <p>Loading...</p>;
  }

  return (
    <>
      <p>Book: {book.title}</p>
      <button onClick={onDeleteClick}>Delete book</button>
      <p>Is delete clicked: {isDeleteClicked}</p>
    </>
  );
}