[72 hrs] Topcoder Community App: Submissions 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-submissions branch) and Topcoder-React-lib (feature-sort-submissions branch). 

Individual requirements

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

• Note: These changes are applicable for all kind of challenges - Design / Development / Data Science
• On Registrants Tab, we need to fix this:
  • In prev challenge, we use the lookup API for Country Flag, which wasn't returning countryFlag so we did a workaround to append countryCode to AWS specific URL. Now lookup API dev is ready for use and it returns the countryFlag, so we need to directly use the countryFlag url returned to fetch countryFlag image to show. So, we need to clean the code logic of doing string concat etc for this AWS url and countryCodes. We also added config for lookups api, we need to clean that too. If you find more, please feel to share in forums and get confirmation. 
  • In prev challenge, the requirement, where we don't get back countryFlag from Lookup APIs based on member countryCode, we requested to show countryName received from Lookup API in such cases, which was missed. We need to take care of it in this challenge. Note: we are going to do the same for countryFlag column for Submissions Tab too. 
  • In prev challenge, we missed this too - When registrants tab is opened, default sort is always Rating desc. We need to take care of it in this challenge. 
• On Submissions Tab, we add following new columns:
  • ���Country: We will show the country flag of the country the user belongs to (refer how we show it in Registrants tab, we need to follow same approach).
    • 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 - this was done as part of Registrants Tab Sort challenge, so we just consume the same Service call. 
    • For each member we have countryCode in registrants array which we currently use in Registrants Tab. We will re-use the same info on submissions tab for showing countryCode for handle. Note: we are not changing the behavior of rendering logic for Submissions Tab, but try to use information for additional columns here from registrants array of challenge details API response. 
    • Note: We may not get back image for countryflag for some of the countryCode from lookup API, 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 show this in Registrants Tab, we just need to show this new column on Submissions tab too - Add it between countryFlag and username columns - we will have same behavior, look and feel as Registrations tab, do note the bug fix above we are doing for Registrations Tab for this Rating. The fix should work similar for Submissions Tab too. 
  • Sorting: For all fields - the user clicks dropdown to sort on, Clicking on dropdown again, reverses the sort. The sorting for username will be alpa, see how we do it on Registrants tab. 
  • Marvel Design Link :  https://marvelapp.com/45d68j1/screen/62023482 
• Sorting Support: We add support for all columns of Submissions tab. All sorting needs to be on client side, no server side sorting. 
• Column Sequence - Refer to marvel app, in case of conflicts, please post in forums to get confirmation. But here is what we would follow for the same: Before Username, we add countryFlag and Rating columns for all type of challenges. 
• Make sure we don't break existing tests and all of them still pass. 
• Make sure no lint issues. 
• Do note since this challenge is specific to Sorting enhancement only, all requirements are MAJOR here. 
• In case of any doubts, do not hesitate to check via forums. 

Technology Stack

• Node.js

• JavaScript

• React.js

Code Access

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

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