Build Movie Discovery
8 min read
Connect Movie Sorting
Connect Movie Sorting
Use the existing sort select to update the sort parameter and let the server request the correct TMDB ordering.
Step 1 — Map the select value to the shared type
Keep the select controlled by the sort prop. On change, treat the new string as a SortOption and send it through pushParams.
<select
className="select"
value={sort}
onChange={(e) => pushParams({ sort: e.target.value as SortOption })}
>
Step 2 — Keep the default out of the URL
pushParams already skips rating when it is the default. That means / remains the clean URL for the normal browse order while year and title are only added when selected.
Step 3 — Let the data layer translate the value
In discoverMovies, confirm that the selected sort is converted through SORT_MAP before it is sent to TMDB.
sort_by: SORT_MAP[sort],
Checkpoint
Switch between rating, newest, and title. The URL should only add sort when the value is not the default, and the visible movie order should change accordingly.