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 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);
	},
	render: function() {
		var attendeeList = this.getAttendeeList();
		var buttonDisabled = this.state.attendee == null || !this.state.suggestion;
		return (
			<Grid><Row>
				<Col xs={4}>
					<Combobox
						value={this.state.attendee}
						data={attendeeList}
						valueField='AttendeeId'
						textField='Name'
						onChange={this.onChangeAttendee} />
				</Col>
				<Col xs={1}>
				</Col>
				<Col xs={4}>
					<Combobox
						value={this.state.suggestion}
						data={this.props.popularSuggestions}
						valueField='RestaurantName'
						textField='RestaurantName'
						onChange={this.onChangeSuggestion} />
				</Col>
				<Col xs={1}>
				</Col>
				<Col xs={2}>
					<Button bsStyle="success" disabled={buttonDisabled} onClick={this.onAddSuggestion}>Add Suggestion/Veto</Button>
				</Col>
			</Row></Grid>
		);
	}
});