Challenge Overview
Challenge Overview
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.
High-Level Requirements
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.
Before the listings components, we hadn't done much development in this repo, so please ignore all the Coffeescript components you see.
Your code should match the Airbnb React Styleguide. Use ES6 syntax and build functional components.
If you want to pull in outside components or other JS libraries, GET THEM APPROVED!
Submissions should be a git patch. Make sure the patch has a user email so that we don't have to add it manually. Please provide a short deployment guide, and an accompanying video that shows a) your components in action and b) a brief code walkthrough.
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.
High-Level Requirements
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.
Final Submission Guidelines
We want you to build this component in our react-components repo. Create a branch that forks off of the challenge-listings branch, and using the V2 API (i.e., don't use the v3 API), build a sidebar component that nests within the existing filters component (so they can share state). Modify the existing component when you need to, but try to make your changes as "black boxed" as possible.Before the listings components, we hadn't done much development in this repo, so please ignore all the Coffeescript components you see.
Your code should match the Airbnb React Styleguide. Use ES6 syntax and build functional components.
If you want to pull in outside components or other JS libraries, GET THEM APPROVED!
Submissions should be a git patch. Make sure the patch has a user email so that we don't have to add it manually. Please provide a short deployment guide, and an accompanying video that shows a) your components in action and b) a brief code walkthrough.