[48 hrs] Topcoder Member Profile UI Fixes and Enhancements - Part 2

************ Note: The challenge has 48 hrs submission / 24 hrs review / 12 hrs Appeals Phase ************


Challenge Objectives:

Recently we added Work / Education and Languages tab to Member Profile on www.topcoder.com  

In this challenge, we are looking to enhance the behavior of several tabs of Member Profile screen, including new tabs enabled.

Please note work is to be done in the Community App repo (feature-profile-enhancements branch) and the Topcoder - Member Service repo (profile_enhancements branch) for this challenge, so you will have front-end and back-end running locally for this challenge.

Individual requirements

• Fixes from Part 1
  • Add/Fix Delete implementation in Skills 
  • Add/Fix Delete implementation in Work
  • There is an issue on all tabs that if backend fails, we still add the new values to the cards shown. Best way to test this scenario is run community-app locally in PROD mode (use npm start). First add some data to these tabs from PROD site (www.topcoder.com), then come and add new values via your local setup, fill only required fields, the backend would fail but front-end adds the new values to the data table. We should do this based on SUCCESS response from API call - if it fails, we shouldn't add the values to cards shown. 
  • Update backend POSTMAN to add samples with non-required fields. 
• UI Changes and Validations
  • Delete Confirmation: Please refer to forum for how the Delete Confirmation should look like. 
  • Education: For Education, we need to have below logic in place: 
    • Remove Type - Note: we will need backend support for this. 
    • Rename From to `Start Date`.
    • Rename To to `End Date (or expected)`.
    • If the user selects, Graduated checkbox, 
      • Start Date and End Date (or expected) are optional
      • Start Date and End Date (or expected) should be in past or current, if user provides input.
      • Start Date should be before End Date (or expected)
    • If the user unchecks Graduated checkbox
      • ���Start Date and End Date (or expected) are optional
      • Start Date should be in past or current and End Date (or expected) can be in future, if user provides input.
      • Start Date should be before End Date (or expected)
  • Work: For Work, we need to have below logic in place:
    • Add new checkbox just like Graduated in Education,  we call it I am currently working in this role
    • If the user checks I am currently working in this role
      • ���Start Date is optional and End Date is disabled. 
      • Start Date should be current or in past. 
    • If the user unchecks I am currently working in this role, 
      • Start Date and End Date becomes optional.������ 
      • Start Date should be before End Date
      • End Date should be current or in past.
  • ������������Show the validation errors of all tabs Work/Language/Education/Hobby/Skills Screen just below the fields with error message specific to the field - currently either they are shown at start of the page or towards end of Page before Add button. Refer to forum for design on how error messages should be shown. 
    • We will need to change on all tabs to make it consistent - Basic Info, Language, Work, Education, Skills, Hobbies, Devices, Software, Service Providers, Subscriptions and Account. Note: You may need to make backend changes in Topcoder Member Profile to make this work right. All these changes in backend are in scope of this challenge and you should submit PR for the backend too, if changes needed.

Technology Stack

• Node.js

• JavaScript

• React.js

Code Access

The work is to be done in the Community App repo (feature-profile-enhancements branch) and the Topcoder - Member Service repo (profile_enhancements 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.
• Verification video is required.