import React, { Component } from 'react';
import { CLASSES } from './classes';
import { TotalCredits } from './credits';
interface ClassPickerProps {
quarter: string;
onBack: () => any;
}
interface ClassPickerState {
classes: Array<string>;
}
export class ClassPicker extends Component<ClassPickerProps, ClassPickerState> {
constructor(props: ClassPickerProps) {
super(props);
this.state = {classes: []};
}
render() {
const allClasses = CLASSES.get(this.props.quarter)!;
let choices : any[] = [];
for (let i = 0; i < allClasses.length; i++) {
const name = allClasses[i];
const checked = this.state.classes.indexOf(name) >= 0;
choices.push(
<div className="form-check">
<input className="form-check-input" type="checkbox"
value={allClasses[i]} checked={checked}
onChange={evt => this.onChange(evt)} />
<label className="form-check-label">{name}</label>
</div>);
}
return (
<div>
<div>
<button type="button" className="btn btn-link"
onClick={() => this.props.onBack()}>
Back
</button>
</div>
<p>Choose your classes:</p>
<div className="choices">
{choices}
</div>
<p>Total of {TotalCredits(this.state.classes)} credits.</p>
</div>);
}
onChange(evt: any) {
const cls = evt.target.value as string;
const index = this.state.classes.indexOf(cls);
if (evt.target.checked) {
if (index < 0) {
this.setState({classes: this.state.classes.concat(cls)});
}
} else {
if (index >= 0) {
const before = this.state.classes.slice(0, index);
const after = this.state.classes.slice(index+1);
this.setState({classes: before.concat(after)});
}
}
}
}