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 for the sticky sidebar that will allow users to do default filtering on challenges, as well as use, save, and edit custom filters.
For this first iteration of the component, we want to see well-written React components with clean, functional ("black-box") JSX. For styling, it's enough that these components resemble the specs. We're running a separate challenge right now to generate HTML and SCSS, so the only important thing is that this component can be modified to fit with someone else's templating and styling.
The sidebar component will have several options that users can select: "All Challenges", "My Challenges", "Open for registration", "Ongoing challenges", "Past challenges", and then the "My Filters" section. These are all broken down in more detail below, but in short: the first five options will apply a filter, and the last option will be for using and modifying user-created filters.
Since this component will be dealing with filtering, it should probably be a child on the larger "filters" component. Certainly, it will share state with it: for example, when "Open for registration" is selected, a filter on the challenge's "registrationOpen" property will need to be applied; and when a new filter is created, it will be created from the current state of challenge filtering. The mechanics of this will be explained in more detail below.
In terms of style, the one thing that will definitely need to be implemented is stickiness. For this purpose, we've chosen to use Yahoo's react-stickynode component. Implementing stickiness for the sidebar using this component is a requirement for the challenge. Note that you will need to set "enableTransforms" to false to disable the use of CSS3 transforms when using this component.
For a visual overview of the components (filter editing may be implemented as a separate component that uses the same visual container), consult the attached live specs. The 5th artboard in the UI_Kit.zip live spec shows the overall layout for the sidebar. Filters.zip shows this again, and breaks down the flow for deleting a filter.
Below is a breakdown of requirements for each part.
Parts of the New Filter Functionalities
1. "All Challenges" -- This should show all active challenges (like the /challenges page does by default).
2. "My Challenges" -- This should fetch the user's challenges from the "My Challenges" API endpoint (see API spec) and put them into the current view, with all current filters applied.
3. "Open for registration" -- This should show all active challenges with an additional filter on all challenges currently in scope on the "registrationOpen" field. This will require modifying the existing "Filters" component.
4. "Ongoing Challenges" -- This should show all active challenges for which registration is not open. Logic is basically the inverse of (3).
5. "Past challenges" -- This should work kind of like the "Past Challenges" option in the current challenge listings works; i.e., it should switch from showing active challenges (/v2/challenges/active) to past ones (/v2/challenges/past) with all current filters applied (except for the ones about being open for registration, since these don't apply).
6. "My Filters" -- This component has multiple parts, which I'll label a, b, and c. All of them will interact with the member settings service, but right now, we don't have a working instance of this service in dev. Because of this, you'll need to mock out the CRUD/backend parts of this service into some simple storage on the frontend. The UI and basic logic will be the same, and the page should show a new filter when you save it, but you won't be hitting an API or anything.
a) "My Filters" list in main sidebar view
This is what is seen in UI Kit artboard 5: a list of the user's filters, and the option to edit. Editing will take you to part 2:
b) Edit view for "My Filters"
This is what's shown in the 3rd, 4th and 5th parts of the Filters artboard. Users should be able to delete filters they've saved.
c) Add filter
In the UI Kit's 5th artboard, you can see a "Save as tab" in the filters dropdown. This is currently mocked out in the UI, but doesn't do anything. Modify it so that it saves the new filter. This will require modifying existing challenge filters code.