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