aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx202
1 files changed, 134 insertions, 68 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
index de105d23a7..7f5b334586 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
@@ -18,89 +18,155 @@ import React from 'react';
import PropTypes from 'prop-types';
import enhanceWithClickOutside from 'react-click-outside';
import classnames from 'classnames';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Overlay from 'nfvo-components/overlay/Overlay.jsx';
import UserNotifications from 'sdc-app/onboarding/userNotifications/UserNotifications.jsx';
import UserNotificationsActionHelper from 'sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js';
-import {actionTypes} from './UserNotificationsConstants.js';
+import { actionTypes } from './UserNotificationsConstants.js';
import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
-const mapStateToProps = ({currentScreen, notifications, users: {usersList}}) => {
- return {currentScreen, notifications, usersList};
+const mapStateToProps = ({
+ currentScreen,
+ notifications,
+ users: { usersList }
+}) => {
+ return { currentScreen, notifications, usersList };
};
-const mapActionToProps = (dispatch) => {
- return {
- resetNewNotifications: notificationId => UserNotificationsActionHelper.updateLastSeenNotification(dispatch, {notificationId}),
- toggleOverlay: ({showNotificationsOverlay}) => dispatch({type: actionTypes.TOGGLE_OVERLAY, showNotificationsOverlay}),
- onLoadPrevNotifications: (lastScanned, endOfPage) => UserNotificationsActionHelper.loadPreviousNotifications(dispatch, {lastScanned, endOfPage}),
- onSync: ({itemId, itemName, versionId, versionName, currentScreen}) => UserNotificationsActionHelper.syncItem(dispatch, {itemId, itemName, versionId, versionName, currentScreen}),
- updateNotification: notificationForUpdate => UserNotificationsActionHelper.updateNotification(dispatch, {notificationForUpdate}),
- onLoadItemsLists: () => OnboardingActionHelper.loadItemsLists(dispatch)
- };
+const mapActionToProps = dispatch => {
+ return {
+ resetNewNotifications: notificationId =>
+ UserNotificationsActionHelper.updateLastSeenNotification(dispatch, {
+ notificationId
+ }),
+ toggleOverlay: ({ showNotificationsOverlay }) =>
+ dispatch({
+ type: actionTypes.TOGGLE_OVERLAY,
+ showNotificationsOverlay
+ }),
+ onLoadPrevNotifications: (lastScanned, endOfPage) =>
+ UserNotificationsActionHelper.loadPreviousNotifications(dispatch, {
+ lastScanned,
+ endOfPage
+ }),
+ onSync: ({ itemId, itemName, versionId, versionName, currentScreen }) =>
+ UserNotificationsActionHelper.syncItem(dispatch, {
+ itemId,
+ itemName,
+ versionId,
+ versionName,
+ currentScreen
+ }),
+ updateNotification: notificationForUpdate =>
+ UserNotificationsActionHelper.updateNotification(dispatch, {
+ notificationForUpdate
+ }),
+ onLoadItemsLists: () => OnboardingActionHelper.loadItemsLists(dispatch)
+ };
};
-
class NotificationsView extends React.Component {
+ static propTypes = {
+ currentScreen: PropTypes.object,
+ notifications: PropTypes.object,
+ resetNewNotifications: PropTypes.func,
+ toggleOverlay: PropTypes.func,
+ onLoadPrevNotifications: PropTypes.func,
+ onSync: PropTypes.func,
+ updateNotification: PropTypes.func,
+ onLoadItemsLists: PropTypes.func
+ };
- static propTypes = {
- currentScreen: PropTypes.object,
- notifications: PropTypes.object,
- resetNewNotifications: PropTypes.func,
- toggleOverlay: PropTypes.func,
- onLoadPrevNotifications: PropTypes.func,
- onSync: PropTypes.func,
- updateNotification: PropTypes.func,
- onLoadItemsLists: PropTypes.func
- };
-
- render() {
- const {usersList, notifications, onLoadPrevNotifications, onSync, updateNotification, onLoadItemsLists, currentScreen} = this.props;
- const {notificationsList, numOfNotSeenNotifications, showNotificationsOverlay, lastScanned, endOfPage} = notifications;
+ render() {
+ const {
+ usersList,
+ notifications,
+ onLoadPrevNotifications,
+ onSync,
+ updateNotification,
+ onLoadItemsLists,
+ currentScreen
+ } = this.props;
+ const {
+ notificationsList,
+ numOfNotSeenNotifications,
+ showNotificationsOverlay,
+ lastScanned,
+ endOfPage
+ } = notifications;
- return (
- <div className='onboarding-notifications'>
- <div className='notifications-icon' onClick={() => this.onNotificationIconClick()}>
- <SVGIcon name={numOfNotSeenNotifications > 0 ? 'notificationFullBell' : 'notificationBell'} color={numOfNotSeenNotifications > 0 ? 'primary' : ''}/>
- <div className={classnames('notifications-count', {'hidden-count': numOfNotSeenNotifications === 0})}>
- {numOfNotSeenNotifications}
- </div>
- </div>
- {showNotificationsOverlay &&
- <Overlay>
- <UserNotifications notificationsList={notificationsList} usersList={usersList} lastScanned={lastScanned} endOfPage={endOfPage}
- onLoadPrevNotifications={onLoadPrevNotifications} onSync={onSync} updateNotification={updateNotification} onLoadItemsLists={onLoadItemsLists}
- currentScreen={currentScreen}/>
- </Overlay>
- }
- </div>
- );
- }
+ return (
+ <div className="onboarding-notifications">
+ <div
+ className="notifications-icon"
+ onClick={() => this.onNotificationIconClick()}>
+ <SVGIcon
+ name={
+ numOfNotSeenNotifications > 0
+ ? 'notificationFullBell'
+ : 'notificationBell'
+ }
+ color={numOfNotSeenNotifications > 0 ? 'primary' : ''}
+ />
+ <div
+ className={classnames('notifications-count', {
+ 'hidden-count': numOfNotSeenNotifications === 0
+ })}>
+ {numOfNotSeenNotifications}
+ </div>
+ </div>
+ {showNotificationsOverlay && (
+ <Overlay>
+ <UserNotifications
+ notificationsList={notificationsList}
+ usersList={usersList}
+ lastScanned={lastScanned}
+ endOfPage={endOfPage}
+ onLoadPrevNotifications={onLoadPrevNotifications}
+ onSync={onSync}
+ updateNotification={updateNotification}
+ onLoadItemsLists={onLoadItemsLists}
+ currentScreen={currentScreen}
+ />
+ </Overlay>
+ )}
+ </div>
+ );
+ }
- handleClickOutside() {
- const {notifications: {showNotificationsOverlay}} = this.props;
- if(showNotificationsOverlay) {
- this.onCloseOverlay();
- }
- }
+ handleClickOutside() {
+ const { notifications: { showNotificationsOverlay } } = this.props;
+ if (showNotificationsOverlay) {
+ this.onCloseOverlay();
+ }
+ }
- onNotificationIconClick() {
- const {notifications: {showNotificationsOverlay}, toggleOverlay} = this.props;
- if (showNotificationsOverlay) {
- this.onCloseOverlay();
- } else {
- toggleOverlay({showNotificationsOverlay: true});
- }
- }
+ onNotificationIconClick() {
+ const {
+ notifications: { showNotificationsOverlay },
+ toggleOverlay
+ } = this.props;
+ if (showNotificationsOverlay) {
+ this.onCloseOverlay();
+ } else {
+ toggleOverlay({ showNotificationsOverlay: true });
+ }
+ }
- onCloseOverlay() {
- const {notifications: {numOfNotSeenNotifications, lastScanned}, resetNewNotifications, toggleOverlay} = this.props;
- if (numOfNotSeenNotifications) {
- resetNewNotifications(lastScanned);
- }
- toggleOverlay({showNotificationsOverlay: false});
- }
+ onCloseOverlay() {
+ const {
+ notifications: { numOfNotSeenNotifications, lastScanned },
+ resetNewNotifications,
+ toggleOverlay
+ } = this.props;
+ if (numOfNotSeenNotifications) {
+ resetNewNotifications(lastScanned);
+ }
+ toggleOverlay({ showNotificationsOverlay: false });
+ }
}
-export default connect(mapStateToProps, mapActionToProps)(enhanceWithClickOutside(NotificationsView));
+export default connect(mapStateToProps, mapActionToProps)(
+ enhanceWithClickOutside(NotificationsView)
+);