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

Web library from zotero.org

'use strict';

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

var React = require('react');

var LoadingSpinner = require('./LoadingSpinner.js');

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

	render: function render() {
		var reactInstance = this;
		var group = this.props.group;

		var userID = Zotero.config.loggedInUserID;
		var groupManageable = false;
		var memberCount = 1; //owner

		var members = group.get('members');
		var admins = group.get('admins');

		memberCount += members.length;
		memberCount += admins.length;

		if (userID && (userID == group.apiObj.data.owner || admins.indexOf(userID) != -1)) {
			groupManageable = true;
		}

		var groupImage = null;
		if (group.hasImage) {
			groupImage = React.createElement(
				'a',
				{ href: Zotero.url.groupViewUrl(group), className: 'group-image' },
				React.createElement('img', { src: Zotero.url.groupImageUrl(group), alt: '' })
			);
		}

		var manageLinks = null;
		if (groupManageable) {
			manageLinks = React.createElement(
				'nav',
				{ className: 'action-links' },
				React.createElement(
					'li',
					null,
					React.createElement(
						'a',
						{ href: Zotero.url.groupSettingsUrl(group) },
						'Manage Profile'
					)
				),
				React.createElement(
					'li',
					null,
					React.createElement(
						'a',
						{ href: Zotero.url.groupMemberSettingsUrl(group) },
						'Manage Members'
					)
				),
				React.createElement(
					'li',
					null,
					React.createElement(
						'a',
						{ href: Zotero.url.groupLibrarySettingsUrl(group) },
						'Manage Library'
					)
				)
			);
		}

		var groupDescription = null;
		if (group.apiObj.data.description) {
			var markup = { __html: group.apiObj.data.description };
			groupDescription = React.createElement(
				'tr',
				null,
				React.createElement(
					'th',
					{ scope: 'row' },
					'Description'
				),
				React.createElement('td', { dangerouslySetInnerHTML: markup })
			);
		}

		var libAccess = Zotero.Group.prototype.accessMap[group.apiObj.data.libraryReading][group.apiObj.data.libraryEditing];
		if (group.apiObj.data.type == 'Private' && group.apiObj.data.libraryReading == 'all') {
			libAccess = Zotero.Group.prototype.accessMap['members'][group.apiObj.data.libraryEditing];
		}

		return React.createElement(
			'div',
			{ key: group.groupID, className: 'nugget-group' },
			React.createElement(
				'div',
				{ className: 'nugget-full' },
				groupImage,
				React.createElement(
					'div',
					{ className: 'nugget-name' },
					React.createElement(
						'a',
						{ href: Zotero.url.groupViewUrl(group) },
						group.apiObj.data.name
					)
				),
				React.createElement(
					'nav',
					{ id: 'group-library-link-nav', className: 'action-links' },
					React.createElement(
						'ul',
						null,
						React.createElement(
							'li',
							null,
							React.createElement(
								'a',
								{ href: Zotero.url.groupLibraryUrl(group) },
								'Group Library'
							)
						)
					)
				),
				manageLinks,
				React.createElement(
					'table',
					{ className: 'nugget-profile table' },
					React.createElement(
						'tbody',
						null,
						React.createElement(
							'tr',
							null,
							React.createElement(
								'th',
								{ scope: 'row' },
								'Members'
							),
							React.createElement(
								'td',
								null,
								memberCount
							)
						),
						groupDescription,
						React.createElement(
							'tr',
							null,
							React.createElement(
								'th',
								{ scope: 'row' },
								'Group Type'
							),
							React.createElement(
								'td',
								null,
								Zotero.Group.prototype.typeMap[group.apiObj.data.type]
							)
						),
						React.createElement(
							'tr',
							null,
							React.createElement(
								'th',
								{ scope: 'row' },
								'Group Library'
							),
							React.createElement(
								'td',
								null,
								libAccess
							)
						)
					)
				)
			)
		);
	}
});

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

	componentWillMount: function componentWillMount() {
		var reactInstance = this;
		var groups = new Zotero.Groups();
		if (Zotero.config.loggedIn && 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
		};
	},
	render: function render() {
		var reactInstance = this;
		var groups = this.state.groups;

		var groupNuggets = groups.map(function (group) {
			return React.createElement(GroupNugget, { key: group.get('id'), group: group });
		});

		return React.createElement(
			'div',
			{ id: 'user-groups-div', className: 'user-groups' },
			groupNuggets,
			React.createElement(LoadingSpinner, { loading: reactInstance.state.loading })
		);
	}
});

module.exports = UserGroups;