Added Notifications Popup

Challenge: 30114259
Submission: 348696

Author: luizrrodrigues

dist/dev/index.js

@@ -17,7 +17,10 @@ const LoginNav = ({
   onMenuOpen,
   showNotification,
   profile,
-  authURLs
+  authURLs,
+  markNotificationAsRead,
+  markAllNotificationAsRead,
+  markAllNotificationAsSeen
 }) => {
   const [openNotifications, setOpenNotifications] = useState()
   const [openAccountMenu, setOpenAccountMenu] = useState()
@@ -39,8 +42,7 @@ const LoginNav = ({
     if (showNotification) {
       return ([
         <NotificationButton
-          className={styles.notificationButton}
-          state={notificationButtonState}
+          notifications={notifications || []}
           notificationsPopupOpen={openNotifications}
           onClick={handleClickNotifications}
           key='notification-button'
@@ -83,7 +85,12 @@ const LoginNav = ({
       <NotificationsPopup
         open={openNotifications}
         notifications={notifications}
-        onClose={() => setOpenNotifications(false)}
+        onClose={() => {
+          setOpenNotifications(false)
+          markAllNotificationAsSeen()
+        }}
+        markNotificationAsRead={markNotificationAsRead}
+        markAllNotificationAsRead={markAllNotificationAsRead}
       />
       <AccountMenu
         profile={profile}
@@ -112,7 +119,10 @@ LoginNav.propTypes = {
   showNotification: PropTypes.bool,
   profile: PropTypes.shape(),
   switchText: PropTypes.shape(),
-  authURLs: PropTypes.shape()
+  authURLs: PropTypes.shape(),
+  markNotificationAsRead: PropTypes.func.isRequired,
+  markAllNotificationAsRead: PropTypes.func.isRequired,
+  markAllNotificationAsSeen: PropTypes.func.isRequired
 }
 
 export default LoginNav

dist/prod/index.js

@@ -1,23 +1,45 @@
 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) => {
+  console.log('got')
+  console.log(_.countBy(notifications || [], n => !n.seen))
+  if (notifications && _.countBy(notifications || [], n => !n.isSeen).true > 0) {
+    console.log('returing : new')
+
+    return 'new'
+  }
+  if (notifications.length === 0) {
+    console.log('returing : none')
+
+    return 'none'
+  } else {
+    console.log('returing : seen')
+
+    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

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

@@ -2,7 +2,10 @@
 
 .notificationButton {
   position: relative;
-  padding: 10px;
+  width: 30px;
+  height: 30px;
+  padding-top: 3px;
+  padding-left: 7px;
 
   img {
     display: block;
@@ -13,12 +16,9 @@
   }
 
   &.new {
-    line-height: 36px;
-  
-    &:hover {
-      background-color: $gray-hover-profile-icon;
-      border-radius: 50%;
-    }
+    padding: 5px;
+    width: 36px;
+    height: 36px;
   }
 
   &.new::after {
@@ -33,7 +33,8 @@
     display: block;
   }
 
-  &.new.isNotificationsPopupOpen {
+  &:hover, &.isNotificationsPopupOpen
+   {
     background-color: $gray-hover-profile-icon;
     border-radius: 50%;
   }  

src/assets/images/icon-checkmark.svg

@@ -23,7 +23,7 @@ const EmptyNotifications = ({ onClose, emptyTitle, emptyText }) => (
       <div className={cn(styles.txt, styles['center-txt'])}>{emptyText}</div>
     </div>
     <div className={styles['noti-footer']}>
-      <span className={cn(styles.btn, styles['btn-blue'])} role='button'>
+      <span className={cn(styles['btn-empty-noti'])} role='button'>
         Notification Settings
       </span>
     </div>