<commit_before>import React from 'react'
import Component from './component';
import _ from 'lodash';

import marked from 'react-marked';
import moment from 'moment-timezone';

import Team from './team';

import AppActions from '../action/app';

import SessionStore from '../store/session';
import TeamStore from '../store/team';

const dateFormat = 'Do MMM YYYY HH:mm:ss';
const scopes = ['solo', 'peer', 'group'];


export default class ProjectOverview extends Component {
	/**
	 *
	 */
	constructor () {
		super();

		this._bind(
			'renderProjectTitle',
			'renderProjectScope',
			'renderButtons',
			'renderDescription',
			'renderProjectSummary',
			'renderJoinProjectDialog',
			'renderTeams',
			'onNumberChange',
			'onNameChange',
			'onScopeClick',
			'toggleEditing',
			'onDescriptionChange',
			'onDeadlineChange',
			'onRequirementChange',
			'onExtensionChange',
			'onHelpChange',
			'onAddRequirementClick',
			'onAddExtensionClick',
			'onAddHelpClick',
			'onDeleteRequirementClick',
			'onDeleteExtensionClick',
			'onDeleteHelpClick',
			'onCreateTeamClick',
			'onSaveEditsClick',
			'onDeleteProjectClick',
			'onCancelEditClick',
			'onTeamStoreChange'
		);

		this.state = {
			editing: false,
		};
	}

	/**
	 *
	 */
	componentDidMount () {
		TeamStore.addChangeListener(this.onTeamStoreChange);
	}

	/**
	 *
	 */
	componentWillUnmount () {
		TeamStore.removeChangeListener(this.onTeamStoreChange);
	}

	/**
	 *
	 */
	getClassName () {
		return 'projectOverview' + (this.state.editing ? ' editing' : '');
	}

	/**
	 *
	 */
	render () {
		const editing = this.state.editing;
		const project = editing ? this.state.project : this.props.project;
		
		return (
			<div className={this.getClassName()}>
				{this.renderProjectTitle(editing, project)}

				{this.renderDescription(editing, project)}

				{this.renderProjectSummary(editing, project)}

				{this.renderTeams(editing, project)}
			</div>
		);
	}

	/**
	 *
	 */
	renderProjectTitle (editing, project) {
		const scope = this.renderProjectScope(editing, project);
		const buttons = this.renderButtons(editing, project);

		if (editing) {
			return (
				<div className='projectTitle'>
					<h2 className='title editing'>
						{'Project '}

						<input
							type='text'
							className='number textStyle'
							value={project.number}
							onChange={this.onNumberChange} />

						<span>{': '}</span>

						<input
							type='text'
							className='name textStyle'
							value={project.name}
							onChange={this.onNameChange} />
					</h2>
					{scope}
					{buttons}
				</div>
			);
		}

		return (
			<div className='projectTitle'>
				<h2 className='title'>
					{'Project ' + project.number + ': ' + project.name}
				</h2>
				{scope}
				{buttons}
			</div>
		);		
	}

	/**
	 *
	 */
	renderProjectScope (editing, project) {
		if (editing) {
			return (
				<span
					className='scope editing'
					onClick={this.onScopeClick}>
					{'(' + project.scope + ')'}
				</span>
			);
		}

		return (
			<span
				className='scope'>
				{'(' + project.scope + ')'}
			</span>
		);
	}

	/**
	 *
	 */
	renderButtons (editing, project) {
		if (!SessionStore.isAdmin()) return null;

		const buttons = [];
		const text = editing ? 'Cancel Edit' : 'Edit';
		const editButtonHandler = editing ? this.onCancelEditClick : this.toggleEditing;

		buttons.push(<button className='editBtn' onClick={editButtonHandler}>{text}</button>);

		if (editing) {
			buttons.push(<button onClick={this.onSaveEditsClick}>{'Save'}</button>);
			buttons.push(<button onClick={this.onDeleteProjectClick}>{'Delete Project'}</button>);
		}

		return buttons;
	}

	/**
	 *
	 */
	renderDescription (editing, project) {
		const content = [(
			<div className='description'>
				{marked(project.description)}
			</div>
		)];

		if (editing) {
			content.push(
				<textarea
					ref='descriptionMarkdown'
					className={'markdown editing'}
					value={project.description}
					onChange={this.onDescriptionChange} />
			);
		}

		return content;
	}

	/**
	 *
	 */
	renderProjectSummary (editing, project) {
		let deadline;
		let requirements;
		let extensions;
		let help;

		if (editing) {
			deadline = (
				<input type='text' value={project.deadline} onChange={this.onDeadlineChange} />
			);

			requirements = project.requirements.map((requirement, i) => {
				return (
					<li>
						<input type='text' value={requirement} onChange={this.onRequirementChange(i)} />
						<span className='delete' onClick={this.onDeleteRequirementClick(i)}>{'-'}</span>
					</li>
				);
			});
			extensions = project.extensions.map((extension, i) => {
				return (
					<li>
						<input type='text' value={extension} onChange={this.onExtensionChange(i)} />
						<span className='delete' onClick={this.onDeleteExtensionClick(i)}>{'-'}</span>
					</li>
				);
			});
			help = project.help.map((help, i) => {
				return (
					<li>
						<input type='text' value={help} onChange={this.onHelpChange(i)} />
						<span className='delete' onClick={this.onDeleteHelpClick(i)}>{'-'}</span>
					</li>
				);
			});
		}
		else {
			deadline = (
				<span>{moment(project.deadline).tz('utc').format(dateFormat)}</span>
			);

			requirements = project.requirements.map((requirement, i) => {
				return (
					<li>
						<span>{requirement}</span>
					</li>
				);
			});
			extensions = project.extensions.map((extension, i) => {
				return (
					<li>
						<span>{extension}</span>
					</li>
				);
			});
			help = project.help.map((help, i) => {
				return (
					<li>
						<span>{help}</span>
					</li>
				);
			});
		}

		return (
			<table className='keyvalue'>
				<tbody>
					<tr>
						<th>{'Due'}</th>
						<td>{deadline}</td>
					</tr><tr>
						<th>
							{'Base Requirements'}
							<span className='addNew' onClick={this.onAddRequirementClick}>{'+'}</span>	
						</th>
						<td>
							<ol>{requirements}</ol>
						</td>
					</tr><tr>
						<th>
							{'Extra Credit Extensions'}
							<span className='addNew' onClick={this.onAddExtensionClick}>{'+'}</span>
						</th>
						<td>
							<ol start={requirements.length}>{extensions}</ol>
						</td>
					</tr><tr>
						<th>
							{'Helpful Links'}
							<span className='addNew' onClick={this.onAddHelpClick}>{'+'}</span>
						</th>
						<td>
							<ul>{help}</ul>
						</td>
					</tr>
				</tbody>
			</table>
		);
	}

	/**
	 *
	 */
	renderJoinProjectDialog (editing, project) {
		if (!this.props.userTeam || SessionStore.isAdmin()) {
			return (
				<div className='join'>
					<span>{'To get onboard with this project, either create a new Team or join an existing one!'}</span>
					<br />
					<input type='text' ref='teamName' name='teamName' placeholder='Team Name' />
					<br />
					<button onClick={this.onCreateTeamClick}>{'Create New Team'}</button>
				</div>
			);
		}
	}

	/**
	 *
	 */
	renderTeams (editing, project) {
		let teams = TeamStore.getByProjectId(project.id);
		teams = teams.map(team => <Team team={team} canJoin={!this.props.userTeam} canLeave={team === this.props.userTeam} />);

		const joinProjectDialog = this.renderJoinProjectDialog(editing, project);

		return [
			<h3 key='teamTitle'>{'Teams'}</h3>,
			{joinProjectDialog},
			<div key='teams' className='teams'>
				{teams}
			</div>
		];
	}

	/**<commit_msg>A Team component needs to know whether or not the currently logged in user is a member of that team or not for more reasons than just showing a "Leave Team" button.  Updating "canLeave" -> "isMyTeam".<commit_after>import React from 'react'
import Component from './component';
import _ from 'lodash';

import marked from 'react-marked';
import moment from 'moment-timezone';

import Team from './team';

import AppActions from '../action/app';

import SessionStore from '../store/session';
import TeamStore from '../store/team';

const dateFormat = 'Do MMM YYYY HH:mm:ss';
const scopes = ['solo', 'peer', 'group'];


export default class ProjectOverview extends Component {
	/**
	 *
	 */
	constructor () {
		super();

		this._bind(
			'renderProjectTitle',
			'renderProjectScope',
			'renderButtons',
			'renderDescription',
			'renderProjectSummary',
			'renderJoinProjectDialog',
			'renderTeams',
			'onNumberChange',
			'onNameChange',
			'onScopeClick',
			'toggleEditing',
			'onDescriptionChange',
			'onDeadlineChange',
			'onRequirementChange',
			'onExtensionChange',
			'onHelpChange',
			'onAddRequirementClick',
			'onAddExtensionClick',
			'onAddHelpClick',
			'onDeleteRequirementClick',
			'onDeleteExtensionClick',
			'onDeleteHelpClick',
			'onCreateTeamClick',
			'onSaveEditsClick',
			'onDeleteProjectClick',
			'onCancelEditClick',
			'onTeamStoreChange'
		);

		this.state = {
			editing: false,
		};
	}

	/**
	 *
	 */
	componentDidMount () {
		TeamStore.addChangeListener(this.onTeamStoreChange);
	}

	/**
	 *
	 */
	componentWillUnmount () {
		TeamStore.removeChangeListener(this.onTeamStoreChange);
	}

	/**
	 *
	 */
	getClassName () {
		return 'projectOverview' + (this.state.editing ? ' editing' : '');
	}

	/**
	 *
	 */
	render () {
		const editing = this.state.editing;
		const project = editing ? this.state.project : this.props.project;
		
		return (
			<div className={this.getClassName()}>
				{this.renderProjectTitle(editing, project)}

				{this.renderDescription(editing, project)}

				{this.renderProjectSummary(editing, project)}

				{this.renderTeams(editing, project)}
			</div>
		);
	}

	/**
	 *
	 */
	renderProjectTitle (editing, project) {
		const scope = this.renderProjectScope(editing, project);
		const buttons = this.renderButtons(editing, project);

		if (editing) {
			return (
				<div className='projectTitle'>
					<h2 className='title editing'>
						{'Project '}

						<input
							type='text'
							className='number textStyle'
							value={project.number}
							onChange={this.onNumberChange} />

						<span>{': '}</span>

						<input
							type='text'
							className='name textStyle'
							value={project.name}
							onChange={this.onNameChange} />
					</h2>
					{scope}
					{buttons}
				</div>
			);
		}

		return (
			<div className='projectTitle'>
				<h2 className='title'>
					{'Project ' + project.number + ': ' + project.name}
				</h2>
				{scope}
				{buttons}
			</div>
		);		
	}

	/**
	 *
	 */
	renderProjectScope (editing, project) {
		if (editing) {
			return (
				<span
					className='scope editing'
					onClick={this.onScopeClick}>
					{'(' + project.scope + ')'}
				</span>
			);
		}

		return (
			<span
				className='scope'>
				{'(' + project.scope + ')'}
			</span>
		);
	}

	/**
	 *
	 */
	renderButtons (editing, project) {
		if (!SessionStore.isAdmin()) return null;

		const buttons = [];
		const text = editing ? 'Cancel Edit' : 'Edit';
		const editButtonHandler = editing ? this.onCancelEditClick : this.toggleEditing;

		buttons.push(<button className='editBtn' onClick={editButtonHandler}>{text}</button>);

		if (editing) {
			buttons.push(<button onClick={this.onSaveEditsClick}>{'Save'}</button>);
			buttons.push(<button onClick={this.onDeleteProjectClick}>{'Delete Project'}</button>);
		}

		return buttons;
	}

	/**
	 *
	 */
	renderDescription (editing, project) {
		const content = [(
			<div className='description'>
				{marked(project.description)}
			</div>
		)];

		if (editing) {
			content.push(
				<textarea
					ref='descriptionMarkdown'
					className={'markdown editing'}
					value={project.description}
					onChange={this.onDescriptionChange} />
			);
		}

		return content;
	}

	/**
	 *
	 */
	renderProjectSummary (editing, project) {
		let deadline;
		let requirements;
		let extensions;
		let help;

		if (editing) {
			deadline = (
				<input type='text' value={project.deadline} onChange={this.onDeadlineChange} />
			);

			requirements = project.requirements.map((requirement, i) => {
				return (
					<li>
						<input type='text' value={requirement} onChange={this.onRequirementChange(i)} />
						<span className='delete' onClick={this.onDeleteRequirementClick(i)}>{'-'}</span>
					</li>
				);
			});
			extensions = project.extensions.map((extension, i) => {
				return (
					<li>
						<input type='text' value={extension} onChange={this.onExtensionChange(i)} />
						<span className='delete' onClick={this.onDeleteExtensionClick(i)}>{'-'}</span>
					</li>
				);
			});
			help = project.help.map((help, i) => {
				return (
					<li>
						<input type='text' value={help} onChange={this.onHelpChange(i)} />
						<span className='delete' onClick={this.onDeleteHelpClick(i)}>{'-'}</span>
					</li>
				);
			});
		}
		else {
			deadline = (
				<span>{moment(project.deadline).tz('utc').format(dateFormat)}</span>
			);

			requirements = project.requirements.map((requirement, i) => {
				return (
					<li>
						<span>{requirement}</span>
					</li>
				);
			});
			extensions = project.extensions.map((extension, i) => {
				return (
					<li>
						<span>{extension}</span>
					</li>
				);
			});
			help = project.help.map((help, i) => {
				return (
					<li>
						<span>{help}</span>
					</li>
				);
			});
		}

		return (
			<table className='keyvalue'>
				<tbody>
					<tr>
						<th>{'Due'}</th>
						<td>{deadline}</td>
					</tr><tr>
						<th>
							{'Base Requirements'}
							<span className='addNew' onClick={this.onAddRequirementClick}>{'+'}</span>	
						</th>
						<td>
							<ol>{requirements}</ol>
						</td>
					</tr><tr>
						<th>
							{'Extra Credit Extensions'}
							<span className='addNew' onClick={this.onAddExtensionClick}>{'+'}</span>
						</th>
						<td>
							<ol start={requirements.length}>{extensions}</ol>
						</td>
					</tr><tr>
						<th>
							{'Helpful Links'}
							<span className='addNew' onClick={this.onAddHelpClick}>{'+'}</span>
						</th>
						<td>
							<ul>{help}</ul>
						</td>
					</tr>
				</tbody>
			</table>
		);
	}

	/**
	 *
	 */
	renderJoinProjectDialog (editing, project) {
		if (!this.props.userTeam || SessionStore.isAdmin()) {
			return (
				<div className='join'>
					<span>{'To get onboard with this project, either create a new Team or join an existing one!'}</span>
					<br />
					<input type='text' ref='teamName' name='teamName' placeholder='Team Name' />
					<br />
					<button onClick={this.onCreateTeamClick}>{'Create New Team'}</button>
				</div>
			);
		}
	}

	/**
	 *
	 */
	renderTeams (editing, project) {
		let teams = TeamStore.getByProjectId(project.id);
		teams = teams.map(team => <Team team={team} canJoin={!this.props.userTeam} isMyTeam={team === this.props.userTeam} />);

		const joinProjectDialog = this.renderJoinProjectDialog(editing, project);

		return [
			<h3 key='teamTitle'>{'Teams'}</h3>,
			{joinProjectDialog},
			<div key='teams' className='teams'>
				{teams}
			</div>
		];
	}

	/**
{'fraction_non_alphanumeric': 0.1732475448696241, 'fraction_numerical': 0.0008127328140873687, 'mean_word_length': 2.9608369098712446, 'pattern_counts': {'":': 0, '<': 225, '<?xml version=': 0, '>': 240, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5188870', 'n_tokens_mistral': 6299, 'n_tokens_neox': 4836, 'n_words': 882}