Feature : notifications

.circleci/config.yml

@@ -175,13 +175,15 @@ workflows:
             branches:
               only:
                 - develop
+                - feature-stats-history
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
           filters:
             branches:
               only:
-                - nav-hot-fix
+                - develop
+                - notifications
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global

__tests__/shared/components/Header/__snapshots__/index.jsx.snap

@@ -155,14 +155,15 @@ exports[`Default render 1`] = `
             },
           ]
         }
+        auth={null}
         authURLs={
           Object {
             "href": "https://accounts.topcoder-dev.com/member/registration?utm_source=community-app-main",
             "location": "https://accounts.topcoder-dev.com/member?retUrl=%S&utm_source=community-app-main",
           }
         }
         loggedIn={true}
-        notificationButtonState="none"
+        notificationButtonState="new"
         notifications={Array []}
         onMenuOpen={[Function]}
         onSwitch={[Function]}
@@ -174,7 +175,7 @@ exports[`Default render 1`] = `
             "photoURL": "https://d1aahxkjiobka8.cloudfront.net/avatar/https%3A%2F%2Ftopcoder-dev-media.s3.amazonaws.com%2Fmember%2Fprofile%2Fhuanner-1552562543506.png?size=32",
           }
         }
-        showNotification={false}
+        showNotification={true}
         switchText={
           Object {
             "href": "https://connect.topcoder-dev.com",

__tests__/shared/containers/__snapshots__/TopcoderHeader.jsx.snap

@@ -2,9 +2,20 @@
 
 exports[`Matches shallow snapshot 1`] = `
 <Header
+  auth={
+    Object {
+      "profile": Object {},
+    }
+  }
   closeMenu={[Function]}
   closeMobileMenu={[Function]}
   closeSearch={[Function]}
+  dismissChallengeNotifications={[Function]}
+  loadNotifications={[Function]}
+  markAllNotificationAsRead={[Function]}
+  markAllNotificationAsSeen={[Function]}
+  markNotificationAsRead={[Function]}
+  notifications={Array []}
   openMenu={[Function]}
   openMobileMenu={[Function]}
   openSearch={[Function]}

package.json

@@ -127,8 +127,8 @@
     "supertest": "^3.1.0",
     "tc-accounts": "git+https://github.com/appirio-tech/accounts-app.git#dev",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
+    "topcoder-react-lib": "0.13.0",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "0.12.0",
     "topcoder-react-ui-kit": "^1.0.11",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

src/shared/components/Header/index.jsx

@@ -16,7 +16,10 @@ try {
   // window is undefined
 }
 
-const Header = ({ profile }) => {
+const Header = ({
+  profile, auth, notifications, loadNotifications, markNotificationAsRead,
+  markAllNotificationAsRead, markAllNotificationAsSeen, dismissChallengeNotifications,
+}) => {
   const [activeLevel1Id, setActiveLevel1Id] = useState();
   const [path, setPath] = useState();
   const [openMore, setOpenMore] = useState(true);
@@ -48,6 +51,17 @@ const Header = ({ profile }) => {
   useEffect(() => {
     setPath(window.location.pathname);
   }, []);
+
+  /*
+   * Reload notificaitons if token was changed
+   * This prevent to use expired token in API call
+   */
+  if (auth) {
+    useEffect(() => {
+      loadNotifications(auth.tokenV3);
+    }, [auth.tokenV3]);
+  }
+
   if (TopNavRef) {
     return (
       <div>
@@ -56,13 +70,19 @@ const Header = ({ profile }) => {
           rightMenu={(
             <LoginNavRef
               loggedIn={!_.isEmpty(profile)}
-              notificationButtonState="none"
-              notifications={[]}
+              notificationButtonState="new"
+              notifications={notifications || []}
+              loadNotifications={loadNotifications}
+              markNotificationAsRead={markNotificationAsRead}
+              markAllNotificationAsRead={markAllNotificationAsRead}
+              markAllNotificationAsSeen={markAllNotificationAsSeen}
+              dismissChallengeNotifications={dismissChallengeNotifications}
               accountMenu={config.ACCOUNT_MENU}
               switchText={config.ACCOUNT_MENU_SWITCH_TEXT}
               onSwitch={handleSwitchMenu}
               onMenuOpen={handleCloseOpenMore}
-              showNotification={false}
+              showNotification
+              auth={auth}
               profile={normalizedProfile}
               authURLs={config.HEADER_AUTH_URLS}
             />
@@ -86,13 +106,21 @@ const Header = ({ profile }) => {
 
 Header.defaultProps = {
   profile: null,
+  auth: null,
 };
 
 Header.propTypes = {
   profile: PT.shape({
     photoURL: PT.string,
     handle: PT.string,
   }),
+  auth: PT.shape(),
+  notifications: PT.arrayOf(PT.object).isRequired,
+  loadNotifications: PT.func.isRequired,
+  markNotificationAsRead: PT.func.isRequired,
+  markAllNotificationAsRead: PT.func.isRequired,
+  markAllNotificationAsSeen: PT.func.isRequired,
+  dismissChallengeNotifications: PT.func.isRequired,
 };
 
 export default Header;

src/shared/components/Notifications/TabsPanel/index.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './style.scss';
+
+
+const TABS = {
+  COMPLETED: 'completed',
+  BROADCAST: 'broadcast',
+  ACTIVE: 'active',
+};
+
+export default class TabsPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tab: TABS.ACTIVE,
+    };
+  }
+
+
+  render() {
+    const { changeTab } = this.props;
+    const { tab } = this.state;
+    return (
+      <div className={styles.container}>
+        <div className={styles.lefts}>
+          <div
+            className={cn([styles.btn, tab === TABS.ACTIVE && styles.active])}
+            role="tab"
+            tabIndex="0"
+            onClick={
+              () => {
+                this.setState({ tab: TABS.ACTIVE });
+                changeTab(TABS.ACTIVE);
+              }
+            }
+            onKeyPress={
+              () => {
+                this.setState({ tab: TABS.ACTIVE });
+                changeTab(TABS.ACTIVE);
+              }
+            }
+          >CHALLENGES
+          </div>
+          <div
+            className={cn([styles.btn, tab === TABS.BROADCAST && styles.active])}
+            role="tab"
+            tabIndex="0"
+            onClick={
+              () => {
+                this.setState({ tab: TABS.BROADCAST });
+                changeTab(TABS.BROADCAST);
+              }
+            }
+            onKeyPress={
+              () => {
+                this.setState({ tab: TABS.BROADCAST });
+                changeTab(TABS.BROADCAST);
+              }
+            }
+          >NOTIFICATIONS
+          </div>
+          {/*
+            * Disabled until Backend updated (add flag completed in notifications)
+            *
+          <div
+            className={cn([styles.btn, tab === TABS.COMPLETED && styles.active])}
+            role="tab"
+            tabIndex="0"
+            onClick={
+              () => {
+                this.setState({ tab: TABS.COMPLETED });
+                changeTab(TABS.COMPLETED);
+              }
+            }
+            onKeyPress={
+              () => {
+                this.setState({ tab: TABS.COMPLETED });
+                changeTab(TABS.COMPLETED);
+              }
+            }
+          >COMPLETED CHALLENGES
+          </div>
+          */}
+        </div>
+        {/*
+          * Disabled until Settings page is ready
+          *
+        <div className={styles.rights}>
+          <div className={styles['notification-setting']}>Notification Settings</div>
+        </div>
+        */}
+      </div>
+    );
+  }
+}
+
+
+TabsPanel.propTypes = {
+  changeTab: PropTypes.func.isRequired,
+};

src/shared/components/Notifications/TabsPanel/style.scss

@@ -0,0 +1,62 @@
+@import "~styles/mixins";
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 30px;
+  margin-top: 50px;
+  margin-bottom: 20px;
+
+  .lefts {
+    display: flex;
+    justify-content: space-between;
+
+    .btn {
+      @include roboto-bold;
+
+      color: #2a2a2a;
+      background-color: $tc-white;
+      font-size: 12px;
+      font-weight: 400;
+      text-transform: uppercase;
+      line-height: 30px;
+      text-align: center;
+      height: 30px;
+      padding: 0 15px;
+      cursor: pointer;
+
+      &:not(:first-of-type) {
+        margin-left: 5px;
+      }
+    }
+
+    .active {
+      color: #fff;
+      background-color: #7f7f7f;
+      box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
+      border-radius: 15px;
+    }
+  }
+
+  .rights {
+    .notification-setting {
+      color: #0d61bf;
+
+      @include roboto-bold;
+
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      text-align: left;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+}
+
+@media (max-width: $screen-sm + 1px) {
+  .container {
+    margin: 15px 0;
+  }
+}