Challenge Objectives

• As part of this very simple challenge, you need to update the implementation of the countries settings in the profile settings page to read countries from a lookup endpoint.

Project Background

We are in the process of migrating many of the legacy pages of our platform to the new Community App repo based on a newer technology stack and improve the overall user experience.

In this series of challenges, we are targeting to the public profile page and the profile settings page based on our new design (attached on the challenge forum, available on registration).

Technology Stack

• Node.js

• JavaScript

• React.js

Code Access

The work is to be done in the Community App repo and the Topcoder React lib repo, out of the latest commit in develop branch (on both repos).

Individual requirements

1. Use Lookup Endpoint

You need to create the required actions/service methods to fetch the countries from the following lookup endpoint:

{{BASE_API_URL}}/v3/members/lookup/countries

 

The countries returned from the lookup endpoint will have the { country, countryCode } format.

2. Update the Community-App

Update the Community-App to use the newly created action to fetch the countries from the lookup endpoint and remove the hardcoded ones we are currently using.

 

When a user selects a country from the member profile settings page, you need to update the following properties:

• competitionCountryCode: use the countryCode property from the selected object.

• homeCountryCode: use the countryCode property from the selected object.

• country: use the country property from the selected object.

You need to ensure that the app won't crash if there is any error while fetching the data from the lookup endpoint.

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 need to modify 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!

Submission deliverables

- Submit a git patch for the latest commit in the develop branch of 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.

Final Submission Guidelines

Please read above