Challenge Overview
We want to move the legacy Review Opportunities page to community-app.
In this challenge, we will focus on adding the available review opportunities to the challenge listings page https://www.topcoder.com/challenges.
You need to work out of the latest commit in develop branch.
You should follow the best practices established in the repository:
-
Properly use Redux. Properly split code into reusable, self-contained React components, conveniently grouped inside folder structure.
-
Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS.
-
Properly use babel-plugin-react-css-modules and / or react-css-themr for styling.
-
Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts etc.
-
Do not break existing unit tests.
-
etc.
Should you have any doubts, do not hesitate to ask for clarifications in the challenge forum!
API Endpoint
For now, you will use a mock server that returns some sample review opportunities.
The endpoint you need to call is https://review-opportunities-mock-api.herokuapp.com/v3/reviewOpportunities.
The endpoint accepts the following pagination parameters:
- limit (defaults to 10)
- offset (defaults to 0)
You will also find the mock server attached to the challenge forum just in case you want to use it from an instance running locally.
Detailed requirements
1. Create a new "bucket" to show the available review opportunities as cards (the same way challenge are currently shown).
This bucket will be shown when you select the "Open for review" option from the sidebar filters.
2. The data you need to display on each card is:
-
Track icon http://take.ms/GQs95
-
Challenge Title (with link to the challenge details)
-
Technologies
-
Review start date. Let's show this as a button with the "{time} to apply" text. Similar to the "{time} to register" button in the challenge cards. This will be the link to the legacy "Review opportunity details" page (https://www.topcoder.com/tc?module=ReviewAuctionDetails&aid={REVIEW_OPPORTUNITY_ID}).
-
Submissions (you can use the same icon from the challenge card)
-
Reviewer payment
-
Review type (review, spec review or iterative review)
-
Open positions (For now, reuse the icon from the registrants from the challenge cards. We'll change it later.)
3. Fetch and show 10 opportunities by default but you need to lazy load more opportunities when scrolling at the bottom of the page. This should be already implemented. You’ll just have to reuse the same functionality.
We don't have a design for the review opportunities cards but we want you to follow the same design/theme as the challenge cards.
Filtering the results is NOT in scope. We'll handle filtering in another challenge.