Topcoder - Notifications Settings

Challenge Objectives

• Implement the notification settings page based on provided design
• Call the API endpoint to get and set notifications settings

Project Background
Currently, we deployed new navigation to the TopCoder site, as part of the new navigation design we have Community Notifications. This will show notifications to members from admins, events and challenges progression. 

Technology Stack

• Node.js
• JavaScript
• React.js
• Kafka

Code Access
The work is to be done in repositories related bellow: (please use the notifications-settings branch to all repositories)

• community-app
• navigation-component
• topcoder-react-lib

Individual requirements

1) Notification Settings

• We are going to implement Notification Settings page as per the next design: https://marvelapp.com/89423f8/screen/65608871 
• Notification Settings need be added to the existing Settings page: https://www.topcoder.com/settings/preferences 
• The new tab “Notifications” needs to be added following the same existing structure, please check Preferences/index.jsx file.
• Members need able to enable or disable receive notifications via Notification Popup (Website) or Email
• Mobile version: https://marvelapp.com/89423f8/screen/65608872 

2) API / Backend Integration 

• You can check how was implementation in Connect App
• Settings items (like shown in design “My Registered Challenges” and “General”) need to be loaded from API and not hardcoded. Check NotificationSettingsForm.jsx from the Connect app to see how to represent the notification topics.
• Check getNotificationSettings and saveNotificationSettings function from services/settings.js from Connect App repo.
• To see more details and information about tc-notifications service, please check this repo: https://github.com/topcoder-platform/tc-notifications

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-theme 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 repository.
• Make sure to mention the exact commits so we can apply your patch file.
• The winner must create a PR against our repositories.