In this episode, we focus on showing books on the homepage, grouped by their status – like "Want to Read", "Reading", and "Read". First, we set up some sample data by adding a few books with different statuses just to have something to work with in our UI.
Next, we update our controller to fetch all the user's books and group them by their status from the pivot table. We handle the case where the user might not be signed in, so everything works smoothly if they're not authenticated.
With our data ready, we then hop into the view and build out the UI sections to loop through each status and list the appropriate books under each heading. To keep things clean, we create a reusable book component for displaying each book, and style everything to look nice and tidy.
Once our homepage is displaying books grouped by status, we shift gears and dive into writing some tests. We set up three separate tests: one for "Want to Read", one for "Reading", and one for "Read" books, ensuring each status displays the correct books with the appropriate headers. Along the way, we improve our factories, use Pest's features, and discuss making our tests less repetitive, setting up for a refactor in the next episode.
By the end of this lesson, you’ll have a grouped book list on the homepage, tests confirming everything works, and a solid understanding of both the view and test side of this feature.