function ProfileDetails(props) {
  const dispatch = useDispatch();
  const name = useSelector(selectName);
  const posts = useSelector(selectPostsByAuthor(name));
  const [nameField, setNameField] = useState(true);

  return (
    <div>
      <h2>Profile</h2>

      <label htmlFor="name">Name: </label>

      <input
        id="name" value={name} disabled={nameField}
        onChange={(e) => dispatch(setName(e.target.value))}
      />

      <button onClick={() => setNameField(!nameField)}>
        {nameField ? "Change" : "Save"}
      </button>

      <p>Posts: {posts.length}</p>
    </div>
  );
}

function AppDetails(props) {
  const posts = useSelector(selectPosts);
  const users = useSelector(selectAuthors);

  return (
    <div>
      <h2>App</h2>

      <p>Users: {users.length}</p>
      <p>Total Posts: {posts.length}</p>
    </div>
  );
}