Register
Submit a solution
The challenge is finished.

Challenge Overview

Challenge Objectives

Update user settings pages and user avatar source for Topcoder Connect web-application.

Project Background

Topcoder Connect is client facing application of Topcoder. Customers use Topcoder connect to input requirements of their projects, then managers and copilots take it from there.

Technology Stack

  • ReactJs

  • Redux

  • CSS Modules

Code access

Repository https://github.com/appirio-tech/connect-app, dev branch commit 2694b46a2d80d0d398c0de4f66475ae60cf20e6e.

Individual requirements

To work on this challenge, use your own user on dev environment. Please, don’t use any user which is usually provided to work on the Connect app to avoid collisions as we would work with user profiles and update them.
The best if you create a new user using registration form https://accounts.topcoder-dev.com/connect/registration. In this case, your user will already have `connect_info` trait which could help you to work on the tasks below.
Hint. If your email is already in use in dev environment, you can use email with `+suffix`. For example, if you have email  username@email.com you can add any suffix like this username+topcoderdev@email.com. So it would be different email for the system, but you will get a confirmation email to your main inbox.

1. Implement My Profile settings page (major)

2. Implement Account and security settings page (major)

3. Add sidebar to the Notifications settings page

  • Notifications settings page is already implemented. And no changes to be done there. Only add the sidebar with the navigation menu.

  • It’s also already adapted for mobile devices, so we only need to add navigation on top for mobile devices on this page https://marvelapp.com/7908ihg/screen/48999286

  • URL of the page “/settings/notifications”

4. Update user drop-down menu at the top right corner

  • Refer to https://marvelapp.com/7908ihg/screen/48327043 (Don’t change the existent design just use item names from provided design and menu structure).

  • Add/rename three items which lead to the setting pages.

  • Add a line after these three items before “Help” item.

5. Update users avatars source (major)

We have to update place from where users avatars come from everywhere in the Connect app. Currently, users avatars come from the basic user profile which is common for all Topcoder sites. For Connect App it has to come from a trait with id `connect_info` property `PhotoUrl` everywhere where we show any user avatar:

  1. Top toolbar (right top corner)
    Basic user profile endpoint doesn’t return user traits, so you will have to retrieve a trait additionally. Please make it work in a background, so initially, user avatar would be displayed as initials. And as soon as a trait is loaded, user avatar would be replaced with an image (if have).

  2. Project team members (open any project, on the left sidebar there is a list of users)
    Project team members are retrieved using a batch request which doesn’t return traits. So we will need to retrieve trait for each member of the project separately.
    Note, project members list has to be displayed immediately after we got the batch of users as it’s done now. So instead of avatars initials will be displayed initially while trait with avatar information has to be loaded in the background. And when trait for a particular user is loaded, his initials have to be replaced with avatar (if a user has an avatar).

  3. In the same place “Project team members” we also have the ability to add members with suggestion functionality. The endpoint which provides suggestions doesn’t return trait with use avatars. For this case, we won’t load traits per user. So for suggested users avatars wouldn’t be provided and only user initials will be shown instead of avatars.

  4. Topics/comments avatars. As everywhere else avatars here should come from the trait. I think it would work automatically after implementing this for project team members (item 2 above).
    + Still make sure that avatars are displayed properly for topics/comments for users which created topic/comment and left the project after, so they are not in project member list anymore.

General requirements

  • Important Make sure that all changes above work for users which have `connect_info` trait and for users which don’t have it. You can use https://github.com/topcoder-platform/topcoder-react-lib/blob/master/src/services/user-traits.js#L85 endpoint to delete trait for testing.

  • Pages “My Profile settings page” and “Account and security settings page” were previously implemented with mocked API calls. Reimplement it using a new design. Rename actions, constants, API methods and so on accordingly to the new changes and clear related code which is not in use anymore.

  • Use best practices of code organizing as we use React + Redux. Put API methods, actions, constants, reducers, helpers according to the current structure of the project.

  • For the Forms implementation use components from appirio-tech-react-components/components/Formsy. As it’s done now. But follow provided designs.

  • For the new components, you implement/reimplement in “/connect-app/src/routes/settings/routes/profile” and “/connect-app/src/routes/settings/routes/system” use CSS Modules properly instead of making all styles :global as it’s done now there. So try to avoid using :global in styles for these components. You can still use :global if you need to update styles for some third-party components from appirio-tech-react-components or other. Also inside components code, use styleName instead of className whenever possible.

  • Use SCSS variables from https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_variables.scss, don’t hardcode colors values.

  • For example, see https://github.com/appirio-tech/connect-app/blob/dev/src/projects/detail/components/PhaseCard/EditStageForm.scss how it uses CSS Modules but sill rewrites some third-party styles using :global where needed. It also uses SCSS variables and font mixins.

  • On successful form save show success notification popup as it’s done for “/settings/notifications” page now. On error show error notification popup.

  • Lint should be passed.

  • Tests should be passed but no need to implement any new tests.



Final Submission Guidelines

  • Submit a git patch for updated code.

  • Submit screenshots for three settings pages for both desktop and mobile resolutions. In total at least 6 screenshots.

ELIGIBLE EVENTS:

Topcoder Open 2019

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30072639