Merge pull request #48 from andela/ft-view-notification-166816074

#166816074 user notification view

src/actionTypes/index.js

@@ -59,3 +59,6 @@ export const FOLLOW_AUTHOR = 'FOLLOW_AUTHOR';
 export const GET_USER_FOLLOWERS = 'GET_USER_FOLLOWERS';
 export const CLEAN_UP_FOLLOW = 'CLEAN_UP_FOLLOW';
 export const REQUEST_PASSWORD_RESET = 'REQUEST_PASSWORD_RESET';
+
+export const GET_NOTIFICATION_SUCCESS = 'GET_NOTIFICATION_SUCCESS';
+export const GET_NOTIFICATION_START = 'GET_NOTIFICATION_START';

src/components/Header/Header.scss

@@ -95,6 +95,11 @@
   position: relative;
   top: 2px;
 }
+.notification {
+  font-size: 24px;
+  padding: 0px 10px;
+  cursor: pointer;
+}
 
 .navbar-toggler > div {
   width: 25px;
@@ -108,6 +113,38 @@
   }
 }
 
+.notification-badge {
+  border-radius: 100%;
+  font-size: 7px;
+  padding: 4px;
+  position: relative;
+  top: -14px;
+  left: -16px;
+}
+
+.tray {
+  overflow: scroll;
+  max-height: 400px;
+  width: 230px;
+}
+
+.tray-details a:hover {
+  background: #f3f3f3;
+  cursor: pointer;
+}
+
+.dark-theme > .tray-details a:hover {
+  background: rgba(243, 243, 243, 0.07);
+}
+.unread {
+  background: #f6f7f9;
+}
+
+.notify-title {
+  background: #ececec;
+  cursor: inherit;
+}
+
 .navbar-light .navbar-toggler {
   border-color: rgba(0, 0, 0, 0);
   color: transparent;
@@ -118,6 +155,17 @@ button .navbar-light .navbar-toggler {
   color: transparent;
 }
 
+.notification-tray-item {
+  border-bottom: 1px solid rgba(33, 33, 33, 0.03);
+  p {
+    margin-bottom: 0px;
+    font-size: 12px;
+  }
+  span {
+    font-size: 8px;
+  }
+}
+
 @media (max-width: 991px) {
   .m-all {
     margin: 15px 5px;

src/components/Header/index.jsx

@@ -7,6 +7,11 @@ import { logout } from '../../views/Auth/auth.action';
 import Toggle from '../../components/Toggle/index.jsx';
 import './Header.scss';
 import IconComponent from '../IconComponent/index.jsx';
+import Notification from '../Notifications/index.jsx';
+import {
+  getAllNotifications,
+  updateNotification
+} from '../Notifications/notification.action';
 
 export class Header extends Component {
   constructor() {
@@ -15,14 +20,19 @@ export class Header extends Component {
       toggle: 'switch',
       theme: 'light-theme',
       auth: {},
-      openNav: 'hidden'
+      openNav: 'hidden',
+      notifyId: ''
     };
     this.handleClick = this.handleClick.bind(this);
     this.handleHamburger = this.handleHamburger.bind(this);
+    this.countNotify = this.countNotify.bind(this);
+    this.markNotificationRead = this.markNotificationRead.bind(this);
     this.app_theme = localStorage.getItem('app_theme');
   }
 
   componentWillMount() {
+    //dispatch the action
+    this.props.getAllNotifications();
     if (this.app_theme === null) {
       // dispatch an action
       this.props.themeToggler('dark-theme');
@@ -38,6 +48,19 @@ export class Header extends Component {
     }
   }
 
+  countNotify() {
+    const { notifications } = this.props.Notifications;
+    if (notifications) {
+      let initialCount = notifications.filter(item => item.isRead === false);
+      return initialCount.length;
+    }
+  }
+
+  markNotificationRead(e, id) {
+    // update notification
+    this.props.updateNotification(id);
+  }
+
   handleLogOut(e) {
     e.preventDefault();
     this.props.logout(this.props.history);
@@ -64,9 +87,11 @@ export class Header extends Component {
 
   render() {
     const { toggle } = this.state;
+    const { notifications } = this.props.Notifications;
     const { theme } = this.props.theme;
     const { isAuthenticated, user } = this.props.auth;
     const { image } = user;
+    const notifyCount = this.countNotify();
     const { openNav } = this.state;
     return (
       <React.Fragment>
@@ -150,6 +175,24 @@ export class Header extends Component {
                   </React.Fragment>
                 ) : (
                   <React.Fragment>
+                    <div className="notification dropdown">
+                      <i className="ion-ios-bell-outline pr-2"></i>
+
+                      {notifyCount !== 0 ? (
+                        <span className="badge notification-badge badge-danger">
+                          {' '}
+                          {notifyCount}{' '}
+                        </span>
+                      ) : (
+                        ''
+                      )}
+                      <div className={`${theme} drop dropdown-fill tray`}>
+                        <Notification
+                          notification={notifications}
+                          handleIsread={this.markNotificationRead}
+                        />
+                      </div>
+                    </div>
                     <Link
                       to="/compose"
                       className="button compose-btn  navbtn_signup button-normal border-0 pr-3 pl-3  pb-1 mr-4 m-all"
@@ -206,15 +249,19 @@ Header.propTypes = {
   theme: PropTypes.object,
   auth: PropTypes.object,
   logout: PropTypes.func,
-  history: PropTypes.object
+  history: PropTypes.object,
+  Notifications: PropTypes.object,
+  getAllNotifications: PropTypes.func,
+  updateNotification: PropTypes.func
 };
 
 const mapStateToProps = state => ({
   theme: state.theme,
-  auth: state.auth
+  auth: state.auth,
+  Notifications: state.notifications
 });
 
 export default connect(
   mapStateToProps,
-  { themeToggler, logout }
+  { themeToggler, logout, getAllNotifications, updateNotification }
 )(Header);

src/components/Header/index.spec.js

@@ -16,6 +16,10 @@ const defaultProps = {
       image: '',
       firstName: ''
     }
+  },
+  getAllNotifications: jest.fn(),
+  Notifications: {
+    notifications: [{}]
   }
 };
 
@@ -84,6 +88,10 @@ describe('Render component', () => {
                 image: '',
                 firstName: ''
               }
+            },
+            getAllNotifications: jest.fn(),
+            Notifications: {
+              notifications: [{}]
             }
           }}
         />
@@ -109,6 +117,11 @@ describe('Render component', () => {
                 image: '',
                 firstName: ''
               }
+            },
+
+            getAllNotifications: jest.fn(),
+            Notifications: {
+              notifications: [{}]
             }
           }}
         />
@@ -137,6 +150,11 @@ describe('Render component', () => {
                 image: 'sam.jpg',
                 firstName: ''
               }
+            },
+
+            getAllNotifications: jest.fn(),
+            Notifications: {
+              notifications: [{}]
             }
           }}
         />
@@ -165,6 +183,10 @@ describe('Render component', () => {
                 image: 'sam.jpg',
                 firstName: ''
               }
+            },
+            getAllNotifications: jest.fn(),
+            Notifications: {
+              notifications: [{}]
             }
           }}
         />

src/components/Notifications/__snapshots__/index.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Notificationcomponent correctly 1`] = `ShallowWrapper {}`;

src/components/Notifications/index.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+
+export const Notification = props => {
+  const { notification, handleIsread } = props;
+  return (
+    <div className="tray-details">
+      <p className="text-center font-weight-bolder text-dark pt-2 pb-2 mb-0 notify-title">
+        {' '}
+        Notifications{' '}
+      </p>
+      {notification
+        ? notification.map((item, i) => {
+            return (
+              <Link
+                to={item.link}
+                onClick={e => handleIsread(e, item.id)}
+                key={i}
+                className={`notification-tray-item ${
+                  item.isRead ? '' : 'unread'
+                }`}
+              >
+                <p>{item.notificationMessage}</p>
+                <span>{moment(item.createdAt).fromNow()}</span>
+              </Link>
+            );
+          })
+        : ''}
+    </div>
+  );
+};
+
+Notification.propTypes = {
+  notification: PropTypes.array,
+  handleIsread: PropTypes.func
+};
+
+export default Notification;