openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16
  17 import React from 'react';
  18 import PropTypes from 'prop-types';
  19 import enhanceWithClickOutside from 'react-click-outside';
  20 import classnames from 'classnames';
  21 import {connect} from 'react-redux';
  22 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  23 import Overlay from 'nfvo-components/overlay/Overlay.jsx';
  24 import UserNotifications from 'sdc-app/onboarding/userNotifications/UserNotifications.jsx';
  25 import UserNotificationsActionHelper from 'sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js';
  26 import {actionTypes} from './UserNotificationsConstants.js';
  27 import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
  28
  29 const mapStateToProps = ({currentScreen, notifications, users: {usersList}}) => {
  30         return {currentScreen, notifications, usersList};
  31 };
  32
  33 const mapActionToProps = (dispatch) => {
  34         return {
  35                 resetNewNotifications: notificationId => UserNotificationsActionHelper.updateLastSeenNotification(dispatch, {notificationId}),
  36                 toggleOverlay: ({showNotificationsOverlay}) => dispatch({type: actionTypes.TOGGLE_OVERLAY, showNotificationsOverlay}),
  37                 onLoadPrevNotifications: (lastScanned, endOfPage) => UserNotificationsActionHelper.loadPreviousNotifications(dispatch, {lastScanned, endOfPage}),
  38                 onSync: ({itemId, itemName, versionId, versionName, currentScreen}) =>  UserNotificationsActionHelper.syncItem(dispatch, {itemId, itemName, versionId, versionName, currentScreen}),
  39                 updateNotification: notificationForUpdate => UserNotificationsActionHelper.updateNotification(dispatch, {notificationForUpdate}),
  40                 onLoadItemsLists: () => OnboardingActionHelper.loadItemsLists(dispatch)
  41         };
  42 };
  43
  44
  45 class NotificationsView extends React.Component {
  46
  47         static propTypes = {
  48                 currentScreen: PropTypes.object,
  49                 notifications: PropTypes.object,
  50                 resetNewNotifications: PropTypes.func,
  51                 toggleOverlay: PropTypes.func,
  52                 onLoadPrevNotifications: PropTypes.func,
  53                 onSync: PropTypes.func,
  54                 updateNotification: PropTypes.func,
  55                 onLoadItemsLists: PropTypes.func
  56         };
  57
  58         render() {
  59                 const {usersList, notifications, onLoadPrevNotifications, onSync, updateNotification, onLoadItemsLists, currentScreen} = this.props;
  60                 const {notificationsList, numOfNotSeenNotifications, showNotificationsOverlay, lastScanned, endOfPage} = notifications;
  61
  62                 return (
  63                         <div className='onboarding-notifications'>
  64                                 <div className='notifications-icon' onClick={() => this.onNotificationIconClick()}>
  65                                         <SVGIcon name={numOfNotSeenNotifications > 0 ? 'notificationFullBell' : 'notificationBell'} color={numOfNotSeenNotifications > 0 ? 'primary' : ''}/>
  66                                         <div className={classnames('notifications-count', {'hidden-count': numOfNotSeenNotifications === 0})}>
  67                                                         {numOfNotSeenNotifications}
  68                                         </div>
  69                                 </div>
  70                                 {showNotificationsOverlay &&
  71                                         <Overlay>
  72                                                 <UserNotifications notificationsList={notificationsList} usersList={usersList} lastScanned={lastScanned} endOfPage={endOfPage}
  73                                                         onLoadPrevNotifications={onLoadPrevNotifications} onSync={onSync} updateNotification={updateNotification} onLoadItemsLists={onLoadItemsLists}
  74                                                         currentScreen={currentScreen}/>
  75                                         </Overlay>
  76                                 }
  77                         </div>
  78                 );
  79         }
  80
  81         handleClickOutside() {
  82                 const {notifications: {showNotificationsOverlay}} = this.props;
  83                 if(showNotificationsOverlay) {
  84                         this.onCloseOverlay();
  85                 }
  86         }
  87
  88         onNotificationIconClick() {
  89                 const {notifications: {showNotificationsOverlay}, toggleOverlay} = this.props;
  90                 if (showNotificationsOverlay) {
  91                         this.onCloseOverlay();
  92                 } else {
  93                         toggleOverlay({showNotificationsOverlay: true});
  94                 }
  95         }
  96
  97         onCloseOverlay() {
  98                 const {notifications: {numOfNotSeenNotifications, lastScanned}, resetNewNotifications, toggleOverlay} = this.props;
  99                 if (numOfNotSeenNotifications) {
 100                         resetNewNotifications(lastScanned);
 101                 }
 102                 toggleOverlay({showNotificationsOverlay: false});
 103         }
 104 }
 105
 106 export default connect(mapStateToProps, mapActionToProps)(enhanceWithClickOutside(NotificationsView));