import React from 'react';
import PropTypes from 'prop-types';
import autobind from 'core-decorators/es/autobind';
import { Link } from 'react-router-dom';
import { graphql } from 'react-apollo';
import { getTeam } from '../../../../graphql/team';


const QueryGetTeamOptions = {
	name: 'QueryGetTeam', 
	options: (props) => {
		return { 
			fetchPolicy: 'cache-and-network',
			variables: { teamId: props.response.teamId } 
		}
	}
}

@graphql(getTeam('_id teamName'), QueryGetTeamOptions)
@autobind
class ResponseCard extends React.Component {
	static propTypes = {
		response: PropTypes.shape({
			_id: PropTypes.string.isRequired,
			challengeKey: PropTypes.string.isRequired,
			itemKey: PropTypes.string.isRequired,
			teamId: PropTypes.string.isRequired,
			checked: PropTypes.bool,
			checkedBy: PropTypes.string,
			responseValid: PropTypes.bool,
			retry: PropTypes.bool
		})
	}

	render() {
		const { challengeKey, itemKey, checked, checkedBy, responseValid, retry } = this.props.response;
		const { getTeam } = this.props.QueryGetTeam;
		let iconName = 'upload';
		let className = 'new';
		let checkedByName = 'Not checked';

		if (checked) {
			checkedByName = `Checked by ${checkedBy}`;
			if (responseValid) {
				iconName = 'tick-circle';
				className = 'valid';
			}
			else {
				className = 'error';
				if (retry) iconName = 'error';
				else iconName = 'delete'
			}
		}

		return (
			<Link to={`/admin/dashboard/responses/${this.props.response._id}`} style={{textDecoration:'none'}}>
				<div className={`pt-card pt-elevation-0 pt-interactive response-card ${className}`}>
					<h5>
						<span className={`pt-icon pt-icon-${iconName}`}></span>&nbsp;
						<b>{`[${challengeKey}]`}</b> {itemKey}
					</h5>
					<div className='pt-text-muted'>
						{`${getTeam?`From ${getTeam.teamName}`:'Getting team name...'}`}<br/>
						{`${checkedByName}`}
					</div>
				</div>
			</Link>
		);
	}}


export default ResponseCard;

import React from 'react';
import PropTypes from 'prop-types';
import autobind from 'core-decorators/es/autobind';
import { Link } from 'react-router-dom';
import { graphql } from 'react-apollo';
import { getTeam } from '../../../../graphql/team';


const QueryGetTeamOptions = {
	name: 'QueryGetTeam', 
	options: (props) => {
		return { 
			fetchPolicy: 'cache-and-network',
			variables: { teamId: props.response.teamId } 
		}
	}
}

@graphql(getTeam('_id teamName'), QueryGetTeamOptions)
@autobind
class ResponseCard extends React.Component {
	static propTypes = {
		response: PropTypes.shape({
			_id: PropTypes.string.isRequired,
			challengeKey: PropTypes.string.isRequired,
			itemKey: PropTypes.string.isRequired,
			teamId: PropTypes.string.isRequired,
			checked: PropTypes.bool,
			checkedBy: PropTypes.string,
			responseValid: PropTypes.bool,
			retry: PropTypes.bool
		})
	}

	render() {
		const { challengeKey, itemKey, checked, checkedBy, responseValid, retry } = this.props.response;
		const { getTeam } = this.props.QueryGetTeam;
		let iconName = 'upload';
		let className = 'new';
		let checkedByName = 'Not checked';

		if (checked) {
			checkedByName = `Checked by ${checkedBy}`;
			if (responseValid) {
				className = 'valid';
				if (retry) iconName = 'tick';
				else iconName = 'tick-circle';
			}
			else {
				className = 'error';
				if (retry) iconName = 'cross';
				else iconName = 'delete'
			}
		}

		return (
			<Link to={`/admin/dashboard/responses/${this.props.response._id}`} style={{textDecoration:'none'}}>
				<div className={`pt-card pt-elevation-0 pt-interactive response-card ${className}`}>
					<h5>
						<span className={`pt-icon pt-icon-${iconName}`}></span>&nbsp;
						<b>{`[${challengeKey}]`}</b> {itemKey}
					</h5>
					<div className='pt-text-muted'>
						{`${getTeam?`From ${getTeam.teamName}`:'Getting team name...'}`}<br/>
						{`${checkedByName}`}
					</div>
				</div>
			</Link>
		);
	}}


export default ResponseCard;

Update response card icons