Merge pull request #167 from topcoder-platform/notifications

Notifications

Author: sushilshinde

dist/dev/index.js

@@ -31,6 +31,7 @@ $green-light: #B5E9DB;
 $green-dark: #229174;
 $blue: #0596dc;
 $blue-btn: #50ADE8;
+$blue-link: #0d61bf;
 
 $font-path: "../../assets/fonts";
 $img-path: "../../assets/images";

dist/prod/index.js

@@ -1,11 +1,14 @@
 import _ from 'lodash'
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 import { Link } from 'topcoder-react-utils'
 import IconAvatar from '../../assets/images/ico-user-default.svg'
 import IconCloseDark from '../../assets/images/icon-close-dark.svg'
 import IconSwitchBusiness from '../../assets/images/icon-switch-business.svg'
+import IconNotificationsRed from '../../assets/images/icon-bell-red.svg'
+import IconNotificationsGrey from '../../assets/images/icon-bell-grey.svg'
+import IconRightArrow from '../../assets/images/right-arrow.svg'
 import styles from './styles.module.scss'
 import moment from 'moment'
 
@@ -43,7 +46,7 @@ class AccountMenu extends React.Component {
 
   render () {
     const {
-      onClose, open, menu, switchText, onSwitch, profile, domRef
+      onClose, open, menu, switchText, onSwitch, profile, domRef, numNotifications, onClickNotifications
     } = this.props
 
     return (
@@ -90,6 +93,34 @@ class AccountMenu extends React.Component {
             </div>
           )
         }
+        {
+          !_.isEmpty(profile) && (
+            <Fragment>
+              <div
+                role='button'
+                className={styles['notifications-mobile']}
+                onClick={onClickNotifications}
+              >
+                <div className={styles['noti-left']}>
+                  {numNotifications > 0
+                    ? <IconNotificationsRed className={styles['bell-icon']} />
+                    : <IconNotificationsGrey className={styles['bell-icon']} />
+                  }
+                  <div>
+                    <span className={styles['notifications-title']}>Notifications</span>
+                    {numNotifications > 0 &&
+                      <span className={styles['red-number']}>{'(' + numNotifications + ')'}</span>
+                    }
+                  </div>
+                </div>
+                <span role='button' className={styles['icon-open-noti']}>
+                  <IconRightArrow />
+                </span>
+              </div>
+              <span className={styles['noti-separator']} />
+            </Fragment>
+          )
+        }
 
         <div className={styles.menu}>
 
@@ -100,13 +131,13 @@ class AccountMenu extends React.Component {
           ))}
 
         </div>
-      </div>
+      </div >
     )
   }
 }
 
 AccountMenu.defaultProps = {
-  numNotifications: 35
+  numNotifications: 0
 }
 
 AccountMenu.propTypes = {
@@ -116,7 +147,9 @@ AccountMenu.propTypes = {
   switchText: PropTypes.shape(),
   onSwitch: PropTypes.func,
   profile: PropTypes.shape(),
-  domRef: PropTypes.shape()
+  domRef: PropTypes.shape(),
+  numNotifications: PropTypes.number,
+  onClickNotifications: PropTypes.func.isRequired
 }
 
 export default AccountMenu

src/assets/images/icon-bell-grey.svg

@@ -79,14 +79,15 @@
     }
   }
 
+  .notifications-mobile {
+    @include mobile-only;
+  }
+
   .menu {
     @include not-mobile {
       padding: 15px 0 25px 0;
     }
 
-    .notification-mobile {
-      @include mobile-only;
-    }
 
     a {
       height: 50px;
@@ -186,6 +187,50 @@
       }
     }
 
+    .notifications-mobile {
+      height: 75px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      
+      .noti-left {
+
+        display: flex;
+        align-items: center;
+        margin-bottom: 2px;
+    
+        .bell-icon {
+          margin: 0 10px 0 22px;
+        }
+
+        .red-number {
+          color: $red;
+          margin: 0 10px;
+        }
+      }
+
+      .icon-open-noti {
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+  
+      a {
+        color: $white;
+        font-size: 14px;
+        line-height: 30px;
+      }
+    }
+    .noti-separator {
+      background: $gray-05;
+      width: calc(100% - 46px);
+      height: 1px;
+      align-self: center;
+      padding: 0 $base-unit * 4;
+    }
+
     .menu {
       display: flex;
       flex-direction: column;
@@ -200,8 +245,7 @@
         padding: 0 $base-unit * 4;
       }
 
-      a,
-      .notification-mobile {
+      a {
         color: $gray-90;
         height: 40px;
         display: flex;
@@ -237,7 +281,6 @@
           }
         }
       }
-
     }
   }
 }

src/assets/images/icon-checkmark.svg

@@ -6,18 +6,23 @@ import NotificationButton from '../NotificationButton'
 import NotificationsPopup from '../NotificationsPopup'
 import UserInfo from '../UserInfo'
 import AccountMenu from '../AccountMenu'
+import _ from 'lodash'
 
 const LoginNav = ({
   loggedIn,
-  notificationButtonState,
   notifications,
   accountMenu,
   switchText,
   onSwitch,
   onMenuOpen,
   showNotification,
   profile,
-  authURLs
+  authURLs,
+  auth,
+  markNotificationAsRead,
+  markAllNotificationAsRead,
+  markAllNotificationAsSeen,
+  dismissChallengeNotifications
 }) => {
   const [openNotifications, setOpenNotifications] = useState()
   const [openAccountMenu, setOpenAccountMenu] = useState()
@@ -66,19 +71,26 @@ const LoginNav = ({
     setOpenAccountMenu(x => !x)
   }
 
+  // process seenNotifications
+  const seenNotifications = _.filter((notifications || []), t => !t.isSeen && !t.isRead)
+    .map(opt => opt.id)
+    .join('-')
+
+  // process unReadNotifications
+  const unReadNotifications = _.filter((notifications || []), t => !t.isRead).length > 0
+
   const renderLoginPanel = () => {
     if (showNotification) {
       return ([
         <NotificationButton
-          className={styles.notificationButton}
-          state={notificationButtonState}
+          notifications={notifications || []}
           notificationsPopupOpen={openNotifications}
           onClick={handleClickNotifications}
           key='notification-button'
         />,
         <UserInfo
           profile={profile}
-          newNotifications={notificationButtonState === 'new'}
+          newNotifications={!!seenNotifications}
           onClick={handleClickUserInfo}
           open={openAccountMenu}
           key='user-info'
@@ -90,7 +102,7 @@ const LoginNav = ({
     return (
       <UserInfo
         profile={profile}
-        newNotifications={notificationButtonState === 'new'}
+        newNotifications={!!seenNotifications}
         onClick={handleClickUserInfo}
         open={openAccountMenu}
         key='user-info'
@@ -117,14 +129,23 @@ const LoginNav = ({
       <NotificationsPopup
         open={openNotifications}
         notifications={notifications}
-        onClose={() => setOpenNotifications(false)}
+        onClose={() => {
+          seenNotifications &&
+            markAllNotificationAsSeen(seenNotifications, auth.tokenV3)
+          setOpenNotifications(false)
+        }}
+        auth={auth}
+        unReadNotifications={unReadNotifications}
+        markNotificationAsRead={markNotificationAsRead}
+        markAllNotificationAsRead={markAllNotificationAsRead}
+        dismissChallengeNotifications={dismissChallengeNotifications}
       />
       <AccountMenu
         profile={profile}
         open={openAccountMenu}
         menu={accountMenu}
         switchText={switchText}
-        numNotifications={(notifications || []).length}
+        numNotifications={_.filter((notifications || []), n => !n.isSeen && !n.isRead).length}
         onClickNotifications={handleClickNotifications}
         onSwitch={onSwitch}
         onClose={() => {
@@ -139,15 +160,19 @@ const LoginNav = ({
 
 LoginNav.propTypes = {
   loggedIn: PropTypes.bool,
-  notificationButtonState: PropTypes.string,
   notifications: PropTypes.array,
   accountMenu: PropTypes.array,
   onSwitch: PropTypes.func,
   onMenuOpen: PropTypes.func,
   showNotification: PropTypes.bool,
   profile: PropTypes.shape(),
+  auth: PropTypes.shape(),
   switchText: PropTypes.shape(),
-  authURLs: PropTypes.shape()
+  authURLs: PropTypes.shape(),
+  markNotificationAsRead: PropTypes.func.isRequired,
+  markAllNotificationAsRead: PropTypes.func.isRequired,
+  markAllNotificationAsSeen: PropTypes.func.isRequired,
+  dismissChallengeNotifications: PropTypes.func.isRequired
 }
 
 export default LoginNav

src/assets/sass/_global/_variables.scss

@@ -1,23 +1,37 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
+import IconBellEmpty from '../../assets/images/icon-bell-grey.svg'
 import IconBell from '../../assets/images/icon-bell.svg'
 import styles from './styles.module.scss'
+import _ from 'lodash'
 
-const NotificationButton = ({ className, state, onClick, notificationsPopupOpen }) => (
+const getNotificationButtonState = (notifications) => {
+  if (notifications && _.countBy(notifications || [], n => !n.isSeen && !n.isRead).true > 0) {
+    return 'new'
+  }
+  if (notifications.length === 0) {
+    return 'none'
+  } else {
+    return 'seen'
+  }
+}
+
+const NotificationButton = ({ onClick, notificationsPopupOpen, notifications }) => (
   <div
-    className={cn(styles.notificationButton, styles[state], notificationsPopupOpen && styles.isNotificationsPopupOpen, className)}
+    className={cn([styles.notificationButton,
+      notificationsPopupOpen && styles.isNotificationsPopupOpen,
+      styles[getNotificationButtonState(notifications)]])}
     onClick={onClick}
   >
-    <IconBell />
+    {(!_.isEmpty(notifications || []) ? <IconBell /> : <IconBellEmpty />)}
   </div>
 )
 
 NotificationButton.propTypes = {
-  className: PropTypes.string,
-  state: PropTypes.oneOf(['none', 'new', 'seen']),
   onClick: PropTypes.func,
-  notificationsPopupOpen: PropTypes.bool
+  notificationsPopupOpen: PropTypes.bool,
+  notifications: PropTypes.array
 }
 
 export default NotificationButton