Challenge Overview
Attention! This is a fast challenge. All phases are a bit shorter so make sure you don’t miss any deadline.
Challenge Objectives
-
As part of this challenge, you need to update the leaderboard for MM (Marathon Match) challenges based on the provided design so we can show detailed results from submission reviews.
Technology Stack
-
Node.js
-
JavaScript
-
React.js
Code Access
The work is to be done in the Community App repo (master branch) and the new topcoder-react-lib (create a branch from the latest release tag https://github.com/topcoder-platform/topcoder-react-lib/tree/v0.7.11-4).
Individual requirements
Recently, we updated the submission V5 API to return enhanced data for the given submission ID.
We have also updated the community-app and the topcoder-react-lib to read the leaderboard data from the v5 API.
As part of this challenge, you need to make the following changes:
-
On the expanded view of the submission history, add a “View Details” link right after the submission time.
-
Clicking that link will open a popup.
-
Call the https://api.topcoder.com/v5/submissions/:id where :id is the submission ID to fetch information about that submission.
-
While the data is loading, show a loading indicator. We already have a component for this. You just need to reuse it.
-
After the data is loaded, you need to show the information from the submission as shown in the provided design.
-
Based on the testcases array, populate the content of the popup.
-
The objects in the testcases array are dynamic which means we don’t know the exact schema.
-
Each object represents a different “Test case”. For each property in the object, you need to populate the table as follows:
| Object.key | Object.value | -
Clicking outside of the popup or on the Dismiss button will close the popup.
You will find the design for the popup attached on the challenge forum.
The above changes only apply to MM (Marathon Match) challenges.
Important Notes
-
You should follow the best practices established in the repository:
-
We use this stand-alone library: https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services of current ReactJS based app.
-
As part of this challenge submission, you also might need to improve https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services updates
-
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 clarification in the challenge forum!
Submission deliverables
- Submit a git patch for each repo.
- Make sure to mention the exact commits so we can apply your patch file.
- The winner must create a PR against our repos.