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>
Linkis used because, it uses client side routing. HTMLatag 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
loadingstate. - If API throws error, we need to set
errorstate. - If API returns content, then set the
bookstate.
Here is the code for books detail page,
- It uses
useEffectreact 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. 🐤
Top comments (3)
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
AND
Loader &&
Thanks
syed
Yes, second option is conditional loading. If the condition is false, then it won’t load the component
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.