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 create clean, easily reusable React components to replace the existing challenge filters.
For this first iteration of the component, we want to see well-written React components and minimal styling. A follow-up challenge will deal with styling the components. You can see the challenge filters in the attached spec files; a very rough approximation that captures the general look of the spec will suffice for this challenge. You will be scored on the quality of your JSX, not your CSS.
The filter component we're building for this challenge consists of the search bar at the top, the challenge type switches to the side, and the keyword, subtrack, and date filters that drop down under it (this does NOT include the filters in the sidebar). Since these components are keeping track of user input, they will need to be stateful. But whenever it makes sense to do so, you should create small, functional ("black box") reusable components.
The state you keep track of should be expressed as an object, which can then be used to create query strings or to filter the challenges that have already been loaded.
Parts of the Challenge Filters
1. Search bar
The purpose of the search bar is to search the text fields of challenges. Namely, this search looks at the "challengeName", "platforms", and "technologies" fields.
2. Subtrack switches
For current purposes, these can be simple checkboxes. These are an "or" filter of design, develop, and data science challenges.
3. "Filter" switch
When this switch is off, the filter dropdown should be hidden (items 1 & 2 should be the only filters visible).
4. Keyword filter
This can be built using react-select. For this, make up a list of example keywords to search with (you should only be able to select an existing keyword!). This should be a second "text" search that looks at the same fields as #1.
5. Subtrack filter
This is an "or" filter on "challengeType".
6. Date filter
This can be built using the airbnb date component. Allow the user to select a date range. The start of the range should filter on "submissionEndDate", and the end of it should filter on "postingDate".
7. Clear and save filter buttons
For now, we don't need a save filter button. The clear filter button should revert everything back to the default state.
8. Simple list
So that we can view the filters in action, please create a simple listing of the challenges that the current query returns. You can just show some challenge information (name, start date, etc.) as plain text.
How to filter
When the user clicks the magnifying search button, the filters should be converted into a query string and searched against the v2 API. Please refer to our Apiary doc for details on filtering using the API. You should generate the filter string from the state object using a helper function.
Please try to make components as reusable as possible!