Topcoder - Notifications Popup

• Implement the notification feature to new navigation based on provided design
• Call the API endpoint to get notifications
• Show alert when user have a new notification

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

In this challenge we need you help to implement the Notifications Popup.

Technology Stack

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

Code Access
The work is to be done in the navigation-component repo (notifications branch).

Individual requirements

1) Notification icon

• If no notifications (the dropdown is empty) then show gray color to the notification icon. (no-notifications.png)
• When a user receives a new notification it will show a pink dot on the right side of the notification icon. (new-notification.png)
• If a user already sees all notifications, the icon keeps active but without a pink dot. (all-seen.png)
• Add hover/active status to notification icon. (active-status.png)
• In mobile the notification icon will just show when open the user panel (https://marvelapp.com/89423f8/screen/65618954)
  • Will show the amount of notifications

2) Notification popup

• If no notification will show a message and Notification Settings button. On top right will show just Settings link, make both deadlink for now.
• Please check Marvelapp link to see complete layout of notification panel: https://marvelapp.com/89423f8/screen/65608885 (scroll down to see notification popup) 
• Mark All as Read - will remove all notifications
• All the notifications that have a pink dot are new notifications that have not been seen before (not seen means a user didn't open the popup)
• All notifications who have a gray dot are notifications that have been see (meaning the user opened the popup before) but have not been read (as in the user didn't click them)
• When a challenge is completed will show at bottom in Completed Challenges.
  • Notifications will be grouped, so just show challenge title
  • X button, if click will Dismiss respective notification and remove from panel.
• Mobile version, please check: https://marvelapp.com/89423f8/screen/65608870 

3) API / Backend Integration 

• To see more details and information about tc-notifications service, please check this repo
• You can use swagger to check the endpoints: https://github.com/topcoder-platform/tc-notifications/tree/dev/docs 
  • Use Swagger or Postman 

Important Notes

• You should follow the best practices established in the repository:
• We use this stand-alone library: 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 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 repo.
• Make sure to mention the exact commits so we can apply your patch file.
• The winner must create a PR against our repos.