Topcoder Community App: Marathon Match UI Enhancements - Part 1

Challenge Objectives:

In this challenge, we are looking to enhance the Topcode Community App, Registration and Submissions Tab of the challenges. Please note work is to be done in the Community App repo (feature-mm-submissions branch) and Topcoder-React-lib (feature-mm-submissions branch). 

Individual requirements

In this challenge, we target to do enhancements to Submissions for Marathon Match:

• We will add a new Tab called - "My Submissions (count of my submissions goes here)" like https://marvelapp.com/cch42ib/screen/61330571
  • The page will look exactly like the marvel shown here and shown only for Registered users of the challenge.
  • Clicking on "Add Submission" behaves same way as we do now for "Submit".
  • Add the "Add Submission" button on current Submissions Tab too like shown here - https://marvelapp.com/cch42ib/screen/62505462 (NOTE: We are not making any other changes shown on this marvel app, we only need you to add the button for current challenge). 
  • Make sure when we do submissions, after submissions "Back to Challenge" button should take us back to the screen from where we clicked Add Submission. 
• All submissions of the member are listed on this screen like shown here https://marvelapp.com/cch42ib/screen/61330572
  • Default Sorting is by Submission Id desc, like we see now on here https://www.topcoder.com/challenges/30092303?tab=submissions
  • Remove Language column for now as API doesn't supports it. 
  • Make sure we use same logic to show Provisional Score and Final Score here like we currently do for https://www.topcoder.com/challenges/30092303?tab=submissions
  • Status Column show icons like shown. Icon  is shown when Review has typeId as "df51ca7d-fb0a-4147-9569-992fcf5aae48" which signifies Provisional Scoring is completed else show which haven't got provisional scoring yet. 
  • Tooltip should be shown for Status column,  (show tooltip as Completed) and (show tooltip is Pending)
  • Sorting should be supported on all fields - for Status column, sort based on status. 
  • The download button will allow members to download their submission (use https://tc-submission-api-dev.herokuapp.com/docs/#/Submissions/downloadSubmission to download submission)
• Clicking on Submission Id takes us to https://marvelapp.com/cch42ib/screen/61330574 
  • For Review Type you use API https://api.topcoder.com/v5/reviewTypes (Make sure you load this on client side once and not keep sending new call for each Review - use best practices here)
  • For Reviewer, hardcode for time being as "TC System"
  • Sorting needs to be supported here for all column. 
  • When score is "-1", show value as  like we show on https://www.topcoder.com/challenges/30092303?tab=submissions screen. 
  • For Status  column, we see status as "completed" in response, we show else show  (Make sure we show tooltip value as found in response - completed / queued etc whatever value we see in response) 
• Note: In this challenge, we will only focus for role of Submitters. 
• Make sure you use current impl approach to show icons for columns.

 

Technology Stack

• Node.js

• JavaScript

• React.js

Code Access

The work is to be done in the Community App repo (feature-mm-submissions branch) and Topcoder-React-lib (feature-mm-submissions branch)

 

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.
   

Should you have any doubts, do not hesitate to ask for clarifications in the challenge forum!

 

 

Final Submission Guidelines

• 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.