SmartAndDumb.jsx

import React from "react";

export default function SmartBookDetail() {
  const [isDeleteClicked, setDeleteClicked] = React.useState(false);
  const { state: book, fetchBook, deleteBook } = React.useContext(BookContext);
  const bookUrl = utils.buildBookUrlFromUri();

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

  // Writing unit tests for this function would require the test to become
  // integration test and start with mocking API request.
  function onDeleteClick() {
    console.log("Book Deleted");
    deleteBook(bookUrl);
    setDeleteClicked(true);
  }

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

  return (
    <DumbBookDetail
      book={book}
      onDeleteClick={onDeleteClick}
      isDeleteClicked={isDeleteClicked}
    />
  );
}

// There is barely anything to test in this component
export default function DumbBookDetail({
  book,
  onDeleteClick,
  isDeleteClicked,
}) {
  return (
    <>
      <p>Book: {book.title}</p>
      <button onClick={onDeleteClick}>Delete book</button>
      <p>Is delete clicked: {isDeleteClicked}</p>
    </>
  );
}