CodingNic

Build Movie Discovery

Connect Movie Sorting

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.

tsx
<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.

typescript
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.