openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.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 ReactDOM from 'react-dom';
import classnames from 'classnames';
import i18n from 'nfvo-utils/i18n/i18n.js';
import { notificationType } from './UserNotificationsConstants.js';
import ShowMore from 'react-show-more';

const Notification = ({
    notification,
    users,
    onActionClicked,
    getNotificationTypeDesc
}) => {
    const { eventType, read, eventAttributes, dateTime } = notification;
    const {
        itemName,
        userId,
        description,
        versionName,
        permission,
        granted
    } = eventAttributes;
    const { fullName: userName } = users.find(user => user.userId === userId);
    return (
        <div className={classnames('notification', { unread: !read })}>
            <div className="notification-data">
                <div className="item-name">
                    {itemName}
                    {versionName && (
                        <span>&nbsp;&nbsp;&nbsp;v{versionName}</span>
                    )}
                    {!read && <div className="unread-circle-icon" />}
                </div>
                <div className="flex-items">
                    <div className="type">
                        {getNotificationTypeDesc(
                            eventType,
                            permission,
                            granted
                        )}
                    </div>
                    <div className="separator" />
                    <div className="user-name">{`${i18n(
                        'By'
                    )} ${userName}`}</div>
                </div>
                {(description || versionName) && (
                    <div className="description">
                        {description && (
                            <ShowMore
                                anchorClass="more-less"
                                lines={2}
                                more={i18n('More')}
                                less={i18n('Less')}>
                                {description}
                            </ShowMore>
                        )}
                        {eventType === notificationType.ITEM_CHANGED.SUBMIT && (
                            <div>
                                <div>
                                    {i18n(
                                        'Version {versionName} was submitted.',
                                        { versionName: versionName }
                                    )}
                                </div>
                            </div>
                        )}
                    </div>
                )}
                <div className="date">{dateTime}</div>
            </div>
            <div className="notification-action">
                <div
                    className={classnames('action-button', { hidden: read })}
                    onClick={() => onActionClicked(notification)}>
                    {eventType === notificationType.PERMISSION_CHANGED ||
                    eventType === notificationType.ITEM_DELETED ||
                    eventType === notificationType.ITEM_ARCHIVED ||
                    eventType === notificationType.ITEM_RESTORED
                        ? i18n('OK')
                        : i18n('Sync')}
                </div>
            </div>
        </div>
    );
};

function getNotificationTypeDesc(eventType, permission, granted) {
    switch (eventType) {
        case notificationType.PERMISSION_CHANGED:
            const grantedStr = granted ? i18n('Granted') : i18n('Taken');
            return `${i18n('Permission')} ${grantedStr}: ${permission}`;
        case notificationType.ITEM_CHANGED.COMMIT:
            return i18n('Your Copy Is Out Of Sync');
        case notificationType.ITEM_CHANGED.SUBMIT:
            return i18n('Version Submitted');
        case notificationType.ITEM_DELETED:
            return i18n('Item was deleted');
        case notificationType.ITEM_ARCHIVED:
            return i18n('Item was archived');
        case notificationType.ITEM_RESTORED:
            return i18n('Item was restored from archive');
    }
}

class UserNotifications extends React.Component {
    static propTypes = {
        currentScreen: PropTypes.object,
        notificationsList: PropTypes.array,
        usersList: PropTypes.array,
        lastScanned: PropTypes.string,
        endOfPage: PropTypes.string,
        onLoadPrevNotifications: PropTypes.func,
        onSync: PropTypes.func,
        updateNotification: PropTypes.func,
        onLoadItemsLists: PropTypes.func
    };

    render() {
        const {
            notificationsList = [],
            usersList,
            lastScanned,
            endOfPage
        } = this.props;

        return (
            <div className="user-notifications">
                <div className="notifications-title">
                    {i18n('Notifications')}
                </div>
                <div
                    className="notifications-list"
                    ref="notificationList"
                    onScroll={() =>
                        this.loadPrevNotifications(lastScanned, endOfPage)
                    }>
                    {notificationsList.map(notification => (
                        <Notification
                            key={notification.eventId}
                            notification={notification}
                            users={usersList}
                            onActionClicked={notification =>
                                this.onActionClicked(notification)
                            }
                            getNotificationTypeDesc={getNotificationTypeDesc}
                        />
                    ))}
                </div>
            </div>
        );
    }

    onActionClicked(notification) {
        const {
            onSync,
            updateNotification,
            currentScreen,
            onLoadItemsLists
        } = this.props;
        const {
            eventType,
            eventAttributes: { itemId, itemName, versionId, versionName }
        } = notification;
        if (
            eventType !== notificationType.PERMISSION_CHANGED &&
            eventType !== notificationType.ITEM_DELETED &&
            eventType !== notificationType.ITEM_ARCHIVED &&
            eventType !== notificationType.ITEM_RESTORED
        ) {
            onSync({ itemId, itemName, versionId, versionName, currentScreen });
        } else {
            onLoadItemsLists();
        }
        updateNotification(notification);
    }

    loadPrevNotifications(lastScanned, endOfPage) {
        if (endOfPage && lastScanned) {
            let element = ReactDOM.findDOMNode(this.refs['notificationList']);
            const { onLoadPrevNotifications } = this.props;

            if (
                element &&
                element.clientHeight + element.scrollTop ===
                    element.scrollHeight
            ) {
                onLoadPrevNotifications(lastScanned, endOfPage);
            }
        }
    }
}

export default UserNotifications;