{"size": 807, "ext": "js", "max_stars_repo_path": "client/src/pages/BookPage.js", "max_stars_repo_name": "mayinx/mern-app-template", "max_stars_repo_stars_event_min_datetime": "2021-08-12T12:19:04.000Z", "max_stars_repo_stars_event_max_datetime": "2021-08-12T12:19:04.000Z", "max_issues_repo_path": "client/src/pages/BookPage.js", "max_issues_repo_name": "mayinx/mern-app-template", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/pages/BookPage.js", "max_forks_repo_name": "mayinx/mern-app-template", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.9, "max_line_length": 74, "alphanum_fraction": 0.6084262701}
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import Book from "../domain/Book/Book";
import axios from "axios";

export default function BookPage() {
  const params = useParams();
  const [resource, setResource] = useState({});
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const url = `/api/books/${params.id}`;
    axios.get(url).then((res) => {
      setResource(res.data);
      setIsLoading(false);
    });
  }, [params.id]);

  return (
    <div className="App__Page App__ResourcePage">
      <h1 className="App__Page__Head">Book Details</h1>
      {isLoading || !resource ? (
        <div className="mt-2 fs-1_5">Holy cow! Can't load that book!</div>
      ) : (
        <Book book={resource} />
      )}
    </div>
  );
}
