feat: Display books list with pagination on front-end #1
Conversation
Ensures all books are shown and users see the total available.
Refactors JS into modular functions (loadPage, renderTable, renderPagination).
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new user-facing front-end to display the list of books, built with GOV.UK Frontend styles. It establishes the front-end build pipeline and creates a new web page that fetches and displays paginated data from the existing /books API endpoint. The changes also standardize the project's Python version using pyenv to ensure a consistent development environment for all contributors.
- Adds a complete GOV.UK Frontend component library for styling
- Creates a new
/show-booksroute with JavaScript-powered pagination - Standardizes Python version management using pyenv
Reviewed Changes
Copilot reviewed 84 out of 2399 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| app/templates/govuk/ | Complete GOV.UK Frontend component library including accordion, breadcrumbs, buttons, etc. |
| app/templates/books.html | New front-end page displaying books in a table with pagination |
| app/routes/web_routes.py | New Flask blueprint for web routes serving the books page |
| app/scss/main.scss | SCSS entry point importing GOV.UK Frontend styles |
| .python-version | Specifies Python 3.12.0 for consistent development environment |
| README.md | Updated setup instructions to include pyenv usage |
| Makefile | Enhanced to work with pyenv virtual environment creation |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| }) | ||
| .catch(error => { | ||
| console.error('Error fetching books: ', error); | ||
| container.innerHTML = '<div class="govuk-error-message">...</div>'; |
There was a problem hiding this comment.
The error message displayed to users is not informative. Replace the placeholder "..." with a proper error message like "Unable to load books. Please try again later."
| container.innerHTML = '<div class="govuk-error-message">...</div>'; | |
| container.innerHTML = '<div class="govuk-error-message">Unable to load books. Please try again later.</div>'; |
| // Good practice to separate the rendering logic from the fetching logic | ||
| function renderTable(data) { | ||
|
|
||
| const totalCount = data.total_count || 0 |
There was a problem hiding this comment.
Missing semicolon at the end of the line. JavaScript should consistently use semicolons for statement termination to follow best practices and maintain consistency with the rest of the codebase.
| const totalCount = data.total_count || 0 | |
| const totalCount = data.total_count || 0; |
| // --- MAIN FUNCTION: Fetches and displays a page of books | ||
| function loadPage(pageNumber) { | ||
|
|
||
| currentPage = pageNumber; //Update the global state |
There was a problem hiding this comment.
[nitpick] Comment style is inconsistent. Use consistent spacing with either // Update the global state or follow the established comment style in the file.
| currentPage = pageNumber; //Update the global state | |
| currentPage = pageNumber; // Update the global state |
Description
This PR introduces a new user-facing front-end to display the list of books, built with GOV.UK Frontend styles. It establishes the front-end build pipeline and creates a new web page that fetches and displays paginated data from the existing
/booksAPI endpoint.This work also standardizes the project's Python version using
pyenvto ensure a consistent development environment for all contributors.Fixes # (issue number if applicable)
Type of change
Please delete options that are not relevant.
How Has This Been Tested?
make run) and navigating to/show-books. Verified that:tests/routes/test_web_routes.py) that verify the Flask route renders the correct template with a200 OKstatus. Test coverage forweb_routes.pyis now 100%.make test).Please describe how to test the changes.
Checklist: