Topcoder is in the process of rewriting the challenge listings page using React. The new version will be an overhaul, with a brand new look, feel, and user experience.
For this challenge, we'd like to clean up some of the current problems with the filtering on the page.
Our aim is to always have well-written React components with clean, functional ("black-box") JSX.
Right now, there are problems with (1) filtering on checkbox clicks, (2) the UI for filter dropdowns, (3) filter clearing, (4) filter deep-linking, (5) the lack of a connection to the saved filters backend, and (6) clicking on filter tags.
Below is a breakdown of requirements for each part.
Parts of the New Filter Functionalities
1. Filtering on checkbox clicks
When the user clicks on the subtrack checkboxes (i.e., data, design, develop), the filtering should be instantaneous, instead of making the user click on the magnifying glass.
2. UI for filter dropdowns
You'll notice there's a little transparent box over the "Select..." text. This should be removed.
3. Filter clearing
The data, design, and develop filters should be cleared in addition to all other filters.
4. Filter deep-linking
We need to be able to link to filters using the current URL. This means that each filter you apply should update the URL, and that the page should be able to load filters from the URL. To do this, you can build upon the filter string function that already exists, or build it from scratch.
5. Connect to saved filters backend
For this, you'll need to hit the filter saving endpoint in prod (unfortunately, the dev one has been down for some time). Look at the current challenge listings in prod to see how this endpoint works. For this, you'll need to authenticate a logged in user. To this end, you may want to use the auth service in topcoder-app. You can either try to quickly copy it over, or just run the new listings within topcoder-app (it's available at /listings).
6. Clicking on filter tags
Clicking on filter tags should filter on those tags.