TC Community App - Leaderboard Update

Challenge Objectives

• Implement modal view component that displays challenge history with points earned on each challenge used to calculate the user’s TCO score.

 

Project Background

We are using a unified component to represent leaderboards on TCO19, TC community, and other pages. Currently, this component does not support “drill into each user” and see their challenge history with points earned on each challenge. We need to change that in this challenge and implement the desired functionality.

 

Technology Stack

NodeJS, Javascript, ReactJS

 

Code access

Please base your work on latest commit from develop branch in our Community App repository.

 

Requirements

• Implement modal component (major)

• based/wrapped by on the Modal module from topcoder-react-ui-kit
• apply/re-use default TC styling. Means Buttons, PrimaryButtons and etc, and have its own theme file called “styles.scss” that is loaded by the component. It should look and feel like “Apply Reviewer Positions” modal but with updated content.
• The title should be: “Completed Challenges History”
• On top, there should be a “PodiumSpot” component embedded that will display the users’s avatar, name, # of challenges and score. This is already implemented and should be re-used.
• Bellow, there should be a table with the challenge history list. It should have 3 columns: “Challenge Name” | “Placement” | “TCO Points”. The “Challenge Name” should be a link to the actual challenge page that opens in a new browser tab.
• Data structure should have the following model. See this paste. This is the structure of the challenges array.
• The component should be wrapped by a container component placed in containers folder. It should test input properties for provided “challenges” array which will have all data needed to render the table.  If “challenges” is null and “dataUrl” is set then the component should implement and apply “GET_TCO_HISTORY_CHALLENGES” action that will fetch the data needed from the provided to the component url. During the fetch, the modal component should display the app’s LoadingIndicator and replace it with the actually rendered component when ready.
• There should be a “Close” button at the bottom of the modal. It and click outside the modal should close it.
• The modal component should trigger/open when there is a click on some username from the leaderboard table and/or podium spot. Both should support a boolean flag (default to true) if it has challenge details modal. We need this flag/functionality to be able to skip history for some tracks.
• The component should be responsive and render properly on all devices. Use app’s mixins to implement breakpoints. The table itself should have max-height set to some logical value to prevent breaking the modal when there are many challenges to render.
• Tip: see “ApplyModal” for reference and similar implementation.

• ���`npm test` should remain working  (major)

Final Submission Guidelines

Submit git patch file with your work.

Submit deployment and verification documents. Two separate files named README.md and Validation.md should be submitted. Validation.md should show/demo the steps needed to test the implementation.