Refactor UI, Add ability to remove suggestions

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>
 		);
 	}