Topcoder Community App: Registrations Tab Sorting Enhancements

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-sort-registrations branch) and Topcoder-React-lib (feature-sort-registrations branch). 

Individual requirements

In this challenge, we target to add new columns for Registrations tab and add sorting feature for all columns:

• Note: These changes are applicable for all kind of challenges - Design / Development / Data Science
• On Registration Page, we add following new columns:
  • ���Country: We will show the country flag of the country the user belongs to.
    • We have lookup API defined, so we will make one GET https://api.topcoder-dev.com/v5/lookups/countries and use it in front-end.
    • For each member we have homeCountryCode and competitionCountryCode in their profile - so we will use competitionCountryCode when homeCountryCode is null. 
    • We have S3 location for country flag (`http://countries.topcoder-dev.com.s3.amazonaws.com/countryCode.svg`).
    • So we use the countryCode found in member profile to lookup country from the lookup API
    • Note: We may not get back image for countryflag for some of the countryCode, so in such case show the countryName when countryFlag is not found or not an image. For the case where we do get back countryFlag, show countryFlag as per marvel and countryName as tooltip of the flag (https://marvelapp.com/45d68j1/screen/62070033) . 
  • Rating: We already get this info, we just need to show this in new column as per marvel - Add it between country and username columns label as Rating (Note: This will be default sort as part of this challenge outcome - so you need to add logic to have this in place - page reloads should set it back to default sort ). Also make sure we use the `colorStyle` to color their  ratings - check how usernames are done, we use the same approach. 
  • Sorting: For all fields - the user clicks dropdown to sort on, Clicking on dropdown again, reverses the sort. 
  • Marvel Design Link :  https://marvelapp.com/45d68j1/screen/62022115 
• Sorting Support: We add support for all columns of Registrations tab. All sorting needs to be on client side, no server side sorting. 
• Make sure we don't break existing tests and all of them still pass. 
• Make sure no lint issues. 

Technology Stack

• Node.js

• JavaScript

• React.js

Code Access

The work is to be done in the Community App repo (feature-sort-registrations branch) and Topcoder-React-lib (feature-sort-registrations 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.

• Etc.;

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.