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

/*!
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

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 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 OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';

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)
    };
};

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
    };

    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>
        );
    }

    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 });
        }
    }

    onCloseOverlay() {
        const {
            notifications: { numOfNotSeenNotifications, lastScanned },
            resetNewNotifications,
            toggleOverlay
        } = this.props;
        if (numOfNotSeenNotifications) {
            resetNewNotifications(lastScanned);
        }
        toggleOverlay({ showNotificationsOverlay: false });
    }
}

export default connect(mapStateToProps, mapActionToProps)(
    enhanceWithClickOutside(NotificationsView)
);