Topcoder - Notifications Listings Page

Challenge Objectives
In this challenge we looking for your help to implement Notification Listing page as per new design see:
Active Challenges: https://marvelapp.com/89423f8/screen/65608868
Completed Challenges: https://marvelapp.com/89423f8/screen/65608869 

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 the community-app and topcoder-react-lib repo (notifications branch).

Individual requirements
We already implemented the Notifications Popup in the previous challenge, so please reuse already created function/calls when possible:

• Notification actions can be found in topcoder-react-lib ‘src/arctions/notifications.js’:
  • getNotifications
  • markNotificationAsRead
  • markAllNotificationAsRead
  • markAllNotificaitonAsSeen
  • dismissChallengeNotifications
• Notification reducers can be found in topcoder-react-lib repo in path ‘/src/reducers/notifications.js’
• The API is not ready yet, so we are using mock data for now.
  • Please reuse existing mock data from topcoder-react-lib repo, here ‘/src/services/notifications.js’

1) General

• In this challenge we looking for your help to implement Notification Listing page as per new design see:
  • Active Challenges: https://marvelapp.com/89423f8/screen/65608868
  • Completed Challenges: https://marvelapp.com/89423f8/screen/65608869 
• Members can access this page when open notification popup and click in the “View All Notifications” at the bottom. (view-all-notifications.png)
• Update the link in Popup to go Notifications Listings (please use /notifications)
• Member need able to navigation between two tabs Active and Completed Challenges (see more details below)
• Notification Settings - Link on the top right is deadlink for now (settings-link.png)

2) Active Challenges
https://marvelapp.com/89423f8/screen/65608868 

• To get all notifications, please use getNotifications action, like already implemented in Notifications Popup
• All the notifications that have a pink mark are new notifications that have not been seen before (not seen means a user didn't visit the listing page or popup notification)
  • Note: The pink mark is not present in the notification listing page design, please ref. the existing Notification Popup flow.
  • When member visite Notifications page will change the pink mark to grey mark, please use the markAllNotificationAsSeen action like already implemented when opening the Notification Popup
• All notifications who have a gray dot are notifications that have been seen (meaning the user opened the popup or visited the notification page before) but have not been read (as in the user didn't click them)
  • When member click in a Notification item will call the markNotificationAsRead action

3) Completed Challenges
https://marvelapp.com/89423f8/screen/65608869 

• When a challenge is completed, it will be moved to this tab.
• Click in Arrow Icon will expand or collapse the challenge notifications
• X button, if click will Dismiss respective notification and remove from the panel, call dismissChallengeNotifications action, like exiting in Popup Notifications.

4) API / Backend Integration 

• To see more details and information about tc-notifications service, please check this repo: https://github.com/topcoder-platform/tc-notifications
• Important: API is not ready yet with notifications settings, so it’s okay to use mock data for now.

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