Hooked with React - Creating book details page using react router, Part 4

We have already created the books list page for our book search page. Now lets create another page for each book using react router.

You can check the app in action here,

Creating books detail page

First lets create the routes using react router in App.js and load two pages

• Index page which is our current search page which shows the books list
• Books detail page which will be identified through unique ID

Moving all our logic to index page. Create a new folder called pages and create a file called searchPage.js

import React, { useState } from 'react';
import axios from 'axios';

import BookSearchForm from '../components/bookSearchForm';
import Loader from '../components/loader';
import BooksList from '../components/booksList';

const SearchPage = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [books, setBooks] = useState({ items: [] });
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  let API_URL = `https://www.googleapis.com/books/v1/volumes`;

  const fetchBooks = async () => {
    setLoading(true);
    setError(false);
    try {
      const result = await axios.get(`${API_URL}?q=${searchTerm}`);
      setBooks(result.data);
    } catch (error) {
      setError(true);
    }
    setLoading(false);
  };

  const onInputChange = e => {
    setSearchTerm(e.target.value);
  };

  const onSubmitHandler = e => {
    e.preventDefault();
    fetchBooks();
  };

  return (
    <>
      <BookSearchForm
        onSubmitHandler={onSubmitHandler}
        onInputChange={onInputChange}
        searchTerm={searchTerm}
        error={error}
      />
      <Loader searchTerm={searchTerm} loading={loading} />
      <BooksList books={books} />
    </>
  );
};

export default SearchPage;

and refactor the App.js file

import React from 'react';

import SearchPage from './pages/searchPage.js';
import './App.css';

const App = () => {
  return (
    <>
      <SearchPage />
    </>
  );
};

export default App;

Add react-router-dom package and render the search page through routes

yarn add react-router-dom

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import SearchPage from './pages/searchPage.js';
import './App.css';

const NoMatchRoute = () => <div>404 Page</div>;const App = () => {
  return (
    <Router> <Switch> <Route path="/" exact component={SearchPage} /> <Route component={NoMatchRoute} /> </Switch> </Router> );
};

export default App;

Lets create the details page and route through our react router. Create a new file bookDetailPage.js in pages folder

import React from 'react';

const BookDetailPage = () => {
  return <div>Book details page</div>;
};

export default BookDetailPage;

Add the route to the App.js. Here the path will have the route params bookId to identify the book through its ID.

<Route path="/book/:bookId" exact component={BookDetailPage} />

Now get the book ID in BookDetailPage through props send by react-router. If you want to see details of how it works, refer my blog post about dynamic pages in react router.

Route params are send through a props called match.

import React from 'react';

const BookDetailPage = ({ match }) => {
  const {
    params: { bookId },
  } = match;

  return (
    <div>
      Book details page: <strong>{bookId}</strong>
    </div>
  );
};

export default BookDetailPage;

Link the details page from books list component

Add a link to go to details page in BooksList component.

import { Link } from "react-router-dom";

...

<Link to={`/book/${book.id}`}>Show details</Link>

Link is used because, it uses client side routing. HTML a tag will refresh the page and hit the server to load the new URL

Alright, we have done linking between the pages. Now we need to show details about the book in the details page. For that,

• we need to call the API with book ID and fetch the details and render the output. Lets do it.
• While calling the API, we need to set loading state.
• If API throws error, we need to set error state.
• If API returns content, then set the book state.

Here is the code for books detail page,

• It uses useEffect react hooks to call the book detail API only when the page mounts. To know more about useEffect hook, check this official docs here.

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

import BookDetail from '../components/bookDetail';

const BookDetailPage = ({ match }) => {
  const {
    params: { bookId },
  } = match;
  const [book, setBook] = useState(null);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const API_BASE_URL = `https://www.googleapis.com/books/v1/volumes`;
    const fetchBook = async () => {
      setLoading(true);
      setError(false);
      try {
        const result = await axios.get(`${API_BASE_URL}/${bookId}`);
        setBook(result.data);
      } catch (error) {
        setError(true);
      }
      setLoading(false);
    };
    // Call the API
    fetchBook();
  }, [bookId]);

  return (
    <>
      <Link to={`/`}>Go back to search books</Link>
      {loading && (
        <div style={{ color: `green` }}>
          loading book detail for book ID: <strong>{bookId}</strong>
        </div>
      )}
      {error && (
        <div style={{ color: `red` }}>
          some error occurred, while fetching api
        </div>
      )}
      {book && <BookDetail book={book} />}
    </>
  );
};

export default BookDetailPage;

It uses a new component BookDetail to render the books detail. bookDetail.js contains

import React from 'react';

import { bookAuthors } from '../utils';

const BookDetail = ({ book }) => {
  const createDescMarkup = description => {
    return { __html: description };
  };

  return (
    <section>
      <div>
        <img
          alt={`${book.volumeInfo.title} book`}
          src={`http://books.google.com/books/content?id=${book.id}&printsec=frontcover&img=1&zoom=1&source=gbs_api`}
        />
        <div>
          <h3>
            <strong>Title:</strong> {book.volumeInfo.title}
          </h3>
          <p>
            <strong>Authors:</strong> {bookAuthors(book.volumeInfo.authors)}
          </p>
          <p>
            <strong>Published Date:</strong> {book.volumeInfo.publishedDate}
          </p>
          <p>
            <strong>Publisher:</strong> {book.volumeInfo.publisher}
          </p>
          <p>
            <strong>Page Count:</strong> {book.volumeInfo.pageCount}
          </p>
          <div
            dangerouslySetInnerHTML={createDescMarkup(
              book.volumeInfo.description
            )}
          />
        </div>
      </div>
    </section>
  );
};

export default BookDetail;

Now we have successfully rendered the whole page. You can go back to search page and search for any books and check their details.

Try it out here,

Thats it folks, we can further extend these apps with styles and testing. I would either write it as continuation or as separate blog post soon 😎

Checkout the codebase for this part 4 here and the whole series codebase can be referred here.

Stay in touch!

If you enjoyed this post, you can find me on Twitter for updates, announcements, and news. 🐤

Comments

[syed]

hi Paramanantham,
thanks for your 4 parts tutorials.
Whats the difference between below 2 ways of rendering? I feel second option is more appropriate as its not going to load Loader component at all, if Loader = false. Or I miss something? please explain

  <Loader searchTerm={searchTerm} loading={loading} />

AND
Loader &&

Thanks
syed

[Paramanantham Harrison]

Yes, second option is conditional loading. If the condition is false, then it won’t load the component

[syed]

which way is more appropriate over other one is my confusion. I saw both the cases many places. It look conditional rendering is better for me, if I'm not wrong, since if condition is false, then no need for React to load Loader component , by this way we are optimizing the memory or whatever.