Make Search Page #4
Description
The search results can be rendered in a server component. I'll need to hook up TMDB api. The initial results are rendered on the server and as the user clicks to load more results they are loaded from the client.
I need to make sure the user can't submit a search if the query is an empty string.
I will use zustand to communicate the filter between the filter button and the search bar. When the search input is submitted, the user will be pushed to the search page with movie as the default filter. If they are already on the search page, I will need to know what filter is selected. I could do this by replacing the query in the url or I could use zustand for the filter as well as the query. If the user click on a filter button, the filter component will have a reference to the zustand hook for the search query and will send the user to the url with the correct query and filter.
The filter component can be part of the layout so when a user goes between different search pages, the filter won't rerender.
The layout will have two sections that are side by side on large screens and stacked on smaller screens. The filter component will be rendered in the smaller section on the layout. The search results section will be rendered as children of the layout. That way the filter won't rerender as the a user navigates between different search pages but the search results will.
The filter component will need to keep state of the currently selected filter so the right button will be highlighted. It will also track the query using zustand so it knows what the query is when it changes from the search bar. I could possibly also use zustand for the filter so that if a user searches from the search bar, it will remember the last filter they were on.
Start adding more data to search results. Display a loading spinning in place of the load more results button when the the results are loading. Don't display button if there are no more results. If the length of the last page retrieved is less than or equal to the amount of data retrieved on each query, don't display. Copy the footer from v1 and add padding to the bottom the body so other page content doesn't run into the footer.