Don't continue until user selects courses - or none

webclient/src/App.js

@@ -33,6 +33,7 @@ class App extends Component {
 			connected: false,
 			network: true,
 			selectedCourses: null,
+			selectedNone: false,
 		};
 	}
 
@@ -63,7 +64,7 @@ class App extends Component {
 				if (response.ok) {
 					response.json().then(data => this.setState({
 						toolData: data,
-						selectedCourses: data.courses.map(() => false),
+						selectedCourses: data.courses.map(x => false),
 					}));
 				} else {
 					this.noNetwork();
@@ -161,7 +162,12 @@ class App extends Component {
 	toggleCourse = (i, data) => {
 		let selectedCourses = this.state.selectedCourses;
 		selectedCourses[i] = data.checked;
-		this.setState({ selectedCourses: selectedCourses });
+		this.setState({ selectedCourses: selectedCourses, selectedNone: false });
+	}
+
+	selectNone = (data) => {
+		let selectedCourses = this.state.selectedCourses.map(x => false);
+		this.setState({ selectedCourses: selectedCourses, selectedNone: data.checked });
 	}
 
 	submitCourses = () => {
@@ -194,6 +200,7 @@ class App extends Component {
 		const connected = this.state.connected;
 		const network = this.state.network;
 		const selectedCourses = this.state.selectedCourses;
+		const selectedNone = this.state.selectedNone;
 
 		console.log(this.state);
 
@@ -256,8 +263,13 @@ class App extends Component {
 														key={i}
 													/>
 												)}
+												<Form.Checkbox
+													checked={selectedNone}
+													onChange={(e, data) => this.selectNone(data)}
+													label='None'
+												/>
 												<br />
-												<Button type='submit'>Submit</Button>
+												<Button type='submit' disabled={!selectedCourses.some(x => x) && !selectedNone}>Submit</Button>
 											</Form>
 											<br />Note: your selection will be reviewed by a lockout admin
 										</div>