lunch/js/components/NewSuggestion.js

var React = require('react');

var ReactBootstrap = require('react-bootstrap');
var Grid = ReactBootstrap.Grid;
var Row = ReactBootstrap.Row;
var Col = ReactBootstrap.Col;
var FormGroup = ReactBootstrap.FormGroup;
var ControlLabel = ReactBootstrap.ControlLabel;
var Button = ReactBootstrap.Button;

var Combobox = require('react-widgets').Combobox;

var models = require('../models');
var Suggestion = models.Suggestion;

module.exports = React.createClass({
	displayName: "NewSuggestion",
	getInitialState: function() {
		return {
			attendee: null,
			suggestion: null
		};
	},
	componentWillMount: function() {
		this.setState({
			attendee: null,
			suggestion: null
		});
		this.pickNewAttendee(this.props);
	},
	componentWillReceiveProps: function(newProps) {
		this.pickNewAttendee(newProps);
	},
	pickNewAttendee: function(props) {
		// Pick a new attendee if the current one can't be valid *and* we have
		// a list of valid possibilities
		if (this.state.attendee == null ||
				!props.attendees.hasOwnProperty(this.state.attendee.AttendeeId)) {
			if (Object.keys(props.attendees).length >= 1) {
				this.setState({
					attendee: props.attendees[Object.keys(props.attendees)[0]]
				});
			} else {
				this.setState({
					attendee: null
				});
			}
		}
	},
	getAttendeeList: function() {
		var attendeeList = [];
		for (var attendeeId in this.props.attendees) {
			attendeeList.push(this.props.attendees[attendeeId]);
		}
		return attendeeList;
	},
	getLastSuggestion: function() {
		var lastSuggestion = -1;
		for (var suggestionId in this.props.suggestions) {
			if (suggestionId > lastSuggestion)
				lastSuggestion = suggestionId;
		}
		return lastSuggestion;
	},
	onChangeAttendee: function(attendee) {
		if (attendee.hasOwnProperty("AttendeeId")) {
			this.setState({
				attendee: attendee
			});
		}
	},
	onChangeSuggestion: function(suggestion) {
		var suggestionString = suggestion;
		if (suggestion.hasOwnProperty('RestaurantName'))
			suggestionString = suggestion.RestaurantName;
		this.setState({
			suggestion: suggestionString
		});
	},
	onAddSuggestion: function() {
		var suggestion = new Suggestion();
		suggestion.AttendeeId = this.state.attendee.AttendeeId;
		suggestion.RestaurantName = this.state.suggestion;
		suggestion.VetoingId = this.getLastSuggestion();
		this.props.createSuggestion(suggestion);
		this.setState({
			attendee: null,
			suggestion: null
		});
	},
	unusedPopularSuggestions: function() {
		var props = this.props;
		return props.popularSuggestions.filter(
			function(suggestion){
				for (var suggestionId in props.suggestions) {
					if (props.suggestions[suggestionId].RestaurantName == suggestion.RestaurantName)
						return false;
				}
				return true;
		});
	},
	render: function() {
		var attendeeList = this.getAttendeeList();
		var buttonDisabled = this.state.attendee == null || !this.state.suggestion;
		var suggestionLabel = "Add Suggestion To:";
		var byLabel = "Suggested By:"
		if (Object.keys(this.props.suggestions).length > 0) {
			suggestionLabel = "Veto With:";
			byLabel = "Vetoed By:"
		}
		return (
			<Row>
			<Col xs={4}>
				<FormGroup controlId="newsuggestionrestaurantname">
				<ControlLabel>{suggestionLabel}</ControlLabel>
				<Combobox
					value={this.state.suggestion}
					data={this.unusedPopularSuggestions()}
					valueField='RestaurantName'
					textField='RestaurantName'
					onChange={this.onChangeSuggestion} />
				</FormGroup>
			</Col>
			<Col xs={1}></Col>
			<Col xs={4}>
				<FormGroup controlId="newsuggestionby">
				<ControlLabel>{byLabel}</ControlLabel>
				<Combobox
					value={this.state.attendee}
					data={attendeeList}
					valueField='AttendeeId'
					textField='Name'
					onChange={this.onChangeAttendee} />
				</FormGroup>
			</Col>
			<Col xs={1}></Col>
			<Col xs={2}>
				<FormGroup controlId="addnewsuggestionbutton">
				<ControlLabel><br /></ControlLabel>
				<Button bsStyle="success" disabled={buttonDisabled} onClick={this.onAddSuggestion}>Add</Button>
				</FormGroup>
			</Col>
			</Row>
		);
	}
});