schools/mit: allow adding and removing additional classes to your registration

Author: thatoddmailbox

app/schools/mit/MITSettings.jsx

@@ -15,6 +15,7 @@ export default class MITSettings extends Component {
 		super(props);
 
 		this.state = {
+			loading: false,
 			registration: props.currentSettings.registration,
 			peInfo: props.currentSettings.peInfo,
 			showPE: props.currentSettings.showPE
@@ -84,6 +85,81 @@ export default class MITSettings extends Component {
 		});
 	}
 
+	addCustomClass() {
+		const subjectNumber = prompt("What is the number of the class you want to add? (8.02, 18.01, etc.)");
+		if (!subjectNumber) {
+			return;
+		}
+
+		this.setState({
+			loading: true,
+			error: ""
+		}, () => {
+			api.post("schools/settings/callMethod", {
+				school: "mit",
+				methodName: "addCustomClass",
+				methodParams: JSON.stringify({
+					subjectNumber: subjectNumber
+				})
+			}, (data) => {
+				if (data.status == "ok") {
+					this.props.loadDetails(() => {
+						this.setState({
+							loading: false
+						});
+					});
+				} else if (data.error == "invalid_params") {
+					this.setState({
+						loading: false,
+						error: "We couldn't find the class with that subject number. Make sure it's spelled as it appears in the Course Catalog.\n\nFor help, email [email protected]."
+					});
+				} else if (data.error == "already_enrolled") {
+					this.setState({
+						loading: false,
+						error: "You already have that class in your registration."
+					});
+				} else {
+					this.setState({
+						loading: false,
+						error: errors.getFriendlyString(data.error)
+					});
+				}
+			});
+		});
+	}
+
+	removeCustomClass(registeredClass) {
+		if (!confirm("Remove " + registeredClass.subjectID + " " + registeredClass.title + "?")) {
+			return;
+		}
+
+		this.setState({
+			loading: true,
+			error: ""
+		}, () => {
+			api.post("schools/settings/callMethod", {
+				school: "mit",
+				methodName: "removeCustomClass",
+				methodParams: JSON.stringify({
+					subjectNumber: registeredClass.subjectID
+				})
+			}, (data) => {
+				if (data.status == "ok") {
+					this.props.loadDetails(() => {
+						this.setState({
+							loading: false
+						});
+					});
+				} else {
+					this.setState({
+						loading: false,
+						error: errors.getFriendlyString(data.error)
+					});
+				}
+			});
+		});
+	}
+
 	render(props, state) {
 		if (state.loading) {
 			return <div>
@@ -102,8 +178,16 @@ export default class MITSettings extends Component {
 					<p>If you believe you're receiving this message in error, please contact us at <a href="mailto:[email protected]">[email protected]</a>.</p>
 				</div>}
 				{state.registration.map((registeredClass) => {
-					return <MITClassSections registeredClass={registeredClass} setSectionForSubject={this.setSectionForSubject.bind(this)} />;
+					return <MITClassSections
+						registeredClass={registeredClass}
+						setSectionForSubject={this.setSectionForSubject.bind(this)}
+						isCustom={registeredClass.custom}
+						removeCustomClass={this.removeCustomClass.bind(this)}
+					/>;
 				})}
+				<button class="btn btn-default" onClick={this.addCustomClass.bind(this)}>
+					<i class="fa fa-fw fa-plus-circle" /> Add another class
+				</button>
 
 				<div>
 					<h4 class="mitSettingsInfoTitle">PE registration</h4>

app/schools/mit/settings/MITClassSections.jsx

@@ -7,6 +7,10 @@ export default class MITClassSections extends Component {
 		this.props.setSectionForSubject(subjectID, sectionCode);
 	}
 
+	remove() {
+		this.props.removeCustomClass(this.props.registeredClass);
+	}
+
 	render(props, state) {
 		var sectionGroups = {};
 
@@ -46,7 +50,12 @@ export default class MITClassSections extends Component {
 		}
 
 		return <div class="mitClassSections">
-			<h4 class="mitClassSectionsName">{props.registeredClass.subjectID} {props.registeredClass.title}</h4>
+			<h4 class="mitClassSectionsName">
+				{props.registeredClass.subjectID} {props.registeredClass.title}
+				{props.isCustom && <button class="btn btn-default btn-xs" onClick={this.remove.bind(this)}>
+					<i class="fa fa-fw fa-minus-circle" /> remove class
+				</button>}
+			</h4>
 			<div class="row">
 				{sectionGroupCodes.map((sectionGroupCode, i) => {
 					var codeToName = {

app/schools/mit/settings/MITClassSections.styl

@@ -2,6 +2,10 @@
 	.mitClassSectionsName
 		margin-bottom: 0.5rem
 
+		.btn
+			margin-top: -0.3rem
+			margin-left: 0.5rem
+
 	.mitClassSectionGroup
 		.mitClassSectionGroupTitle
 			font-size: 1.6rem