zotero-web-library/lib/libraryUi/widgets/InviteToGroup.js

Web library from zotero.org

'use strict';

var log = require('libzotero/lib/Log').Logger('zotero-web-library:inviteToGroup');

var React = require('react');
var BootstrapModalWrapper = require('./BootstrapModalWrapper.js');

var InviteButton = React.createClass({
	displayName: 'InviteButton',

	handleClick: function handleClick(evt) {
		var invDialog = ReactDOM.render(React.createElement(InviteDialog, null), document.getElementById('invite-to-group-dialog'));
		invDialog.openDialog();
	},
	render: function render() {
		var reactInstance = this;
		if (!Zotero.config.loggedIn) {
			return null;
		}
		if (zoteroData.profileUserID == Zotero.config.loggedInUserID) {
			return null;
		}
		return React.createElement(
			'button',
			{ className: 'btn btn-primary', onClick: reactInstance.handleClick },
			'Invite to group'
		);
	}
});

var InviteDialog = React.createClass({
	displayName: 'InviteDialog',

	componentWillMount: function componentWillMount() {
		var reactInstance = this;
		var groups = new Zotero.Groups();
		if (Zotero.config.loggedIn && Zotero.config.loggedInUserID && zoteroData.profileUserID != Zotero.config.loggedInUserID) {
			reactInstance.setState({ loading: true });
			var groupsPromise = groups.fetchUserGroups(Zotero.config.loggedInUserID).then(function (response) {
				var groups = response.fetchedGroups;
				reactInstance.setState({ groups: groups, loading: false });
			}).catch(Zotero.catchPromiseError);
		}
	},
	getInitialState: function getInitialState() {
		return {
			groups: [],
			loading: false
		};
	},
	openDialog: function openDialog() {
		//this.setState({open:true});
		this.refs.modal.open();
	},
	closeDialog: function closeDialog(evt) {
		//this.setState({open:false});
		this.refs.modal.close();
	},
	inviteToGroup: function inviteToGroup(evt) {
		var reactInstance = this;
		log.debug(evt);
		var groupID = parseInt(evt.currentTarget.getAttribute('data-groupid'), 10);

		J.ajax({
			'type': 'POST',
			'url': '/groups/inviteuser',
			'data': {
				'groupID': groupID,
				'userID': zoteroData.profileUserID
			},
			'processData': true
		}).then(function (data) {
			log.debug('got response from inviteuser');
			if (data == 'true') {
				Zotero.ui.jsNotificationMessage('User has been invited', 'success');
			}
		});
	},
	render: function render() {
		var reactInstance = this;
		var invitedGroupIDs = zoteroData.invitedGroupIDs;

		var groupNodes = reactInstance.state.groups.map(function (group) {
			if (invitedGroupIDs.indexOf(group.get('id').toString()) != -1) {
				return React.createElement(
					'li',
					{ key: group.get('id') },
					'Invitation pending to \'',
					group.get('name'),
					'\''
				);
			} else {
				return React.createElement(
					'li',
					{ key: group.get('id') },
					React.createElement(
						'button',
						{ className: 'btn btn-default', onClick: reactInstance.inviteToGroup, 'data-groupid': group.get('id') },
						group.get('name')
					)
				);
			}
		});

		return React.createElement(
			BootstrapModalWrapper,
			{ ref: 'modal' },
			React.createElement(
				'div',
				{ id: 'invite-user-dialog', className: 'invite-user-dialog', role: 'dialog', title: 'Invite User', 'data-keyboard': 'true' },
				React.createElement(
					'div',
					{ className: 'modal-dialog' },
					React.createElement(
						'div',
						{ className: 'modal-content' },
						React.createElement(
							'div',
							{ className: 'modal-header' },
							React.createElement(
								'button',
								{ type: 'button', className: 'close', 'data-dismiss': 'modal', 'aria-hidden': 'true' },
								'×'
							),
							React.createElement(
								'h3',
								null,
								'Invite User'
							)
						),
						React.createElement(
							'div',
							{ className: 'modal-body', 'data-role': 'content' },
							React.createElement(
								'ul',
								null,
								groupNodes
							)
						)
					)
				)
			)
		);
	}
});

module.exports = InviteButton;