Refactor UI, Add ability to remove suggestions

js/actions/SuggestionActions.js

@@ -33,6 +33,19 @@ function suggestionCreated(suggestion) {
 	}
 }
 
+function removeSuggestion() {
+	return {
+		type: SuggestionConstants.REMOVE_SUGGESTION
+	}
+}
+
+function suggestionRemoved(suggestionId) {
+	return {
+		type: SuggestionConstants.SUGGESTION_REMOVED,
+		suggestionId: suggestionId
+	}
+}
+
 function fetchPopularSuggestions() {
 	return {
 		type: SuggestionConstants.FETCH_POPULAR_SUGGESTIONS
@@ -129,8 +142,33 @@ function fetchPopular() {
 	};
 }
 
+function remove(suggestion) {
+	return function(dispatch) {
+		dispatch(removeSuggestion());
+
+		$.ajax({
+			type: "DELETE",
+			dataType: "json",
+			url: "suggestion/"+suggestion.SuggestionId+"/",
+			success: function(data, status, jqXHR) {
+				var e = new Error();
+				e.fromJSON(data);
+				if (e.isError()) {
+					ErrorActions.serverError(e);
+				} else {
+					dispatch(suggestionRemoved(suggestion.SuggestionId));
+				}
+			},
+			error: function(jqXHR, status, error) {
+				ErrorActions.ajaxError(e);
+			}
+		});
+	};
+}
+
 module.exports = {
 	fetchAll: fetchAll,
 	create: create,
+	remove: remove,
 	fetchPopular: fetchPopular
 };

js/components/NewSuggestion.js

@@ -4,6 +4,7 @@ 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;
 
@@ -102,31 +103,38 @@ module.exports = React.createClass({
 		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.unusedPopularSuggestions()}
-						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>
+			<Row>
+			<Col xs={4}>
+				<FormGroup controlId="newsuggestionrestaurantname">
+				<ControlLabel>Add Suggestion/Veto To:</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>Suggested By:</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>
 		);
 	}
 });

js/components/RecordLunch.js

@@ -6,6 +6,8 @@ var ControlLabel = ReactBootstrap.ControlLabel;
 var Grid = ReactBootstrap.Grid;
 var Row = ReactBootstrap.Row;
 var Col = ReactBootstrap.Col;
+var Panel = ReactBootstrap.Panel;
+var Button = ReactBootstrap.Button;
 
 var Multiselect = require('react-widgets').Multiselect;
 
@@ -55,22 +57,47 @@ module.exports = React.createClass({
 		var attendeeList = this.getAttendeeList();
 
 		var suggestionIds = Object.keys(this.props.suggestions);
-		suggestionIds.sort(function(a, b){return parseInt(a, 10) - parseInt(b, 10);});
+		suggestionIds.sort(function(a, b){return parseInt(b, 10) - parseInt(a, 10);});
 		var suggestions = [];
 		for (var i in suggestionIds) {
 			var suggestion = this.props.suggestions[suggestionIds[i]];
-			suggestions.push((
-				<Row key={suggestion.SuggestionId}>
-					<Col xs={4}>{this.props.attendees[suggestion.AttendeeId].Name}</Col>
-					<Col xs={1}></Col>
-					<Col xs={4}>{suggestion.RestaurantName}</Col>
-				</Row>
-			));
+			var suggestorName = "Unknown";
+			if (this.props.attendees.hasOwnProperty(suggestion.AttendeeId))
+					suggestorName = this.props.attendees[suggestion.AttendeeId].Name;
+
+			if (i == 0) {
+				var self = this;
+				var popFunction = function(){
+					return function(){self.props.removeSuggestion(suggestion);};
+				}();
+				suggestions.push((
+					<Row key={suggestion.SuggestionId}><Panel>
+						<Col xs={4}><ControlLabel>Current Suggestion:</ControlLabel></Col>
+						<Col xs={1}></Col>
+						<Col xs={4}>{suggestion.RestaurantName} (by {suggestorName})</Col>
+						<Col xs={1}></Col>
+						<Col xs={2}>
+							<Button bsStyle="danger" onClick={popFunction}>Pop</Button>
+						</Col>
+					</Panel></Row>
+				));
+			} else {
+				suggestions.push((
+					<Row key={suggestion.SuggestionId}>
+						<Col xs={4}><ControlLabel>{(suggestionIds.length - i).toString() + "."}</ControlLabel></Col>
+						<Col xs={1}></Col>
+						<Col xs={4}>{suggestion.RestaurantName} (by {suggestorName})</Col>
+						<Col xs={1}></Col>
+						<Col xs={2}>
+						</Col>
+					</Row>
+				));
+			}
 		}
 
 		return (
 			<div><form>
-				<Grid><Row><Col xs={12}>
+				<Grid fluid><Row><Col xs={12}>
 				<FormGroup controlId="attendees">
 				<ControlLabel>Attendees</ControlLabel>
 				<Multiselect
@@ -83,20 +110,13 @@ module.exports = React.createClass({
 					onCreate={this.onCreateAttendee} />
 				</FormGroup>
 				</Col></Row>
-				<Row>
-					<Col xs={4}><ControlLabel>Suggested By:</ControlLabel></Col>
-					<Col xs={1}></Col>
-					<Col xs={4}><ControlLabel>Restaurant Name:</ControlLabel></Col>
-				</Row>
-				{suggestions}
-				</Grid>
-				<FormGroup controlId="newsuggestion">
 				<NewSuggestion
 					createSuggestion={this.props.createSuggestion}
 					attendees={this.props.attendees}
 					suggestions={this.props.suggestions}
 					popularSuggestions={this.props.popularSuggestions} />
-				</FormGroup>
+				{suggestions}
+				</Grid>
 			</form></div>
 		);
 	}

js/constants/SuggestionConstants.js

@@ -5,6 +5,8 @@ module.exports = keyMirror({
 	SUGGESTIONS_FETCHED: null,
 	CREATE_SUGGESTION: null,
 	SUGGESTION_CREATED: null,
+	REMOVE_SUGGESTION: null,
+	SUGGESTION_REMOVED: null,
 	FETCH_POPULAR_SUGGESTIONS: null,
 	POPULAR_SUGGESTIONS_FETCHED: null,
 });

js/containers/RecordLunchContainer.js

@@ -19,7 +19,8 @@ function mapDispatchToProps(dispatch) {
 	return {
 		createAttendee: function(attendee) {dispatch(AttendeeActions.create(attendee))},
 		removeAttendee: function(attendee) {dispatch(AttendeeActions.remove(attendee))},
-		createSuggestion: function(suggestion) {dispatch(SuggestionActions.create(suggestion))}
+		createSuggestion: function(suggestion) {dispatch(SuggestionActions.create(suggestion))},
+		removeSuggestion: function(suggestion) {dispatch(SuggestionActions.remove(suggestion))}
 	}
 }
 

js/reducers/SuggestionReducer.js

@@ -18,6 +18,10 @@ module.exports = function(state = {}, action) {
 				[suggestion.SuggestionId]: suggestion
 			});
 			return suggestions;
+		case SuggestionConstants.SUGGESTION_REMOVED:
+			var suggestions = assign({}, state);
+			delete suggestions[action.suggestionId];
+			return suggestions;
 		case UserConstants.USER_LOGGEDOUT:
 			return {};
 		default: