Exercise 5.7 should be more strongly worded to prevent problems in 5.13, or vice versa

[git-by-soumya]

Exercise 5.7 does not specify that the feature (view/hide buttons) needs to be implemented by preventing the rendering of needed data. It could also be done by hiding the data using css (display: none), instead of conditional rendering.

Exercise 5.13 explicitly asks to test that the Blog component "does not render its URL or number of likes by default". Hiding those data (url, likes) using css, as was taught, does not prevent its rendering in the DOM. Those who have solved 5.7 by reusing the logic from Togglable (display: none, hideWhenVisible etc.) and a state (visible/not visible), instead of conditional rendering will have problems in 5.13.

Thus, there is a problem of rewriting the component while solving the exercise (to test that component). Or perhaps you intended for us to rewrite the Blog component, if we did not conditionally render it, and then solve the exercise by writing tests for it? Maybe you meant for us to test the visibility of data instead of its absence in the DOM (unrendered).

I have attached a text file containing my blog component: Blog.jsx.txt
Or the code could also be found at the bottom, after the exercise snippets.

Some portions of the exercises have been extracted below:

5.7 Blog List Frontend, step 7

Let's add a button to each blog, which controls whether all of the details about the blog are shown or not.

Full details of the blog open when the button is clicked.

And the details are hidden when the button is clicked again.

At this point, the like button does not need to do anything.
.....
NB: Even though the functionality implemented in this part is almost identical to the functionality provided by the Togglable component, it can't be used directly to achieve the desired behavior. The easiest solution would be to add a state to the blog component that controls if the details are being displayed or not.

5.13: Blog List Tests, step 1

Make a test, which checks that the component displaying a blog renders the blog's title and author, but does not render its URL or number of likes by default.

Add CSS classes to the component to help the testing as necessary.

Blog.jsx

import { useState } from "react";

const Blog = ({ blog, updateLikes, viewerUsername, deleteBlog, }) => {
  const [ visible, setVisible, ] = useState(false);

  const blogStyle = {
    paddingTop: 10,
    paddingLeft: 2,
    border: "solid",
    borderWidth: 1,
    marginBottom: 5,
  };
  const showWhenVisible = { display: visible ? "" : "none", };

  const toggleVisibility = () => {
    setVisible(!visible);
  };

  const handleLike = async () => {
    const { title, author, url, likes, } = blog;
    await updateLikes(blog.id, {
      title,
      author,
      url,
      likes: likes + 1,
      user: blog.user.id,
    });
  };

  const handleRemove = async () => {
    const removeBlog = confirm(`Remove blog ${blog.title} by ${blog.author} ?`);
    if(removeBlog) {
      await deleteBlog(blog.id);
    }
  };

  const showRemoveButton = (currentUsername, blogCreatorUsername) => {
    if(currentUsername === blogCreatorUsername) {
      return <button onClick={handleRemove}>remove</button>;
    } else {
      return null;
    }
  };

  return (
    <div style={blogStyle}>
      <div>
        {blog.title} {blog.author} {" "}
        <button onClick={toggleVisibility}>
          {visible ? "hide" : "view"}
        </button>
      </div>
      <div style={showWhenVisible}>
        <div>{blog.url}</div>
        <div>
          likes {blog.likes}
          <button onClick={handleLike}>like</button>
        </div>
        <div>{blog.user.name}</div>
        {showRemoveButton(viewerUsername, blog.user.username)}
      </div>
    </div>
  );
};

export default Blog;