Refer to section by id in SectionChooser

client/components/RunSectionForm.tsx

@@ -15,18 +15,18 @@ export default class RunSectionForm extends React.Component<{
     uiStore: UiStore,
 }, {
     duration: Duration,
-    section: Section | undefined,
+    sectionId: number | undefined,
 }> {
     constructor(props: any, context?: any) {
         super(props, context);
         this.state = {
             duration: new Duration(0, 0),
-            section: undefined,
+            sectionId: undefined,
         };
     }
 
     render() {
-        const { section, duration } = this.state;
+        const { sectionId, duration } = this.state;
         return (
             <Segment>
                 <Header>Run Section</Header>
@@ -34,7 +34,7 @@ export default class RunSectionForm extends React.Component<{
                     <SectionChooser
                         label="Section"
                         sections={this.props.device.sections}
-                        value={section}
+                        sectionId={sectionId}
                         onChange={this.onSectionChange}
                     />
                     <DurationView
@@ -55,8 +55,8 @@ export default class RunSectionForm extends React.Component<{
         );
     }
 
-    private onSectionChange = (newSection: Section) => {
-        this.setState({ section: newSection });
+    private onSectionChange = (newSectionId: number) => {
+        this.setState({ sectionId: newSectionId });
     }
 
     private onDurationChange = (newDuration: Duration) => {
@@ -65,10 +65,11 @@ export default class RunSectionForm extends React.Component<{
 
     private run = (e: React.SyntheticEvent<HTMLElement>) => {
         e.preventDefault();
-        const { section, duration } = this.state;
-        if (!section) {
+        const { sectionId, duration } = this.state;
+        if (sectionId == null) {
             return;
         }
+        const section = this.props.device.sections[sectionId];
         section.run(duration.toSeconds())
             .then(this.onRunSuccess)
             .catch(this.onRunError);
@@ -91,6 +92,6 @@ export default class RunSectionForm extends React.Component<{
     }
 
     private get isValid(): boolean {
-        return this.state.section != null && this.state.duration.toSeconds() > 0;
+        return this.state.sectionId != null && this.state.duration.toSeconds() > 0;
     }
 }

client/components/SectionChooser.tsx

@@ -12,17 +12,16 @@ export default class SectionChooser extends React.Component<{
     label?: string,
     inline?: boolean,
     sections: Section[],
-    value?: Section,
-    onChange?: (section: Section) => void,
+    sectionId?: number,
+    onChange?: (sectionId: number) => void,
 }> {
     render() {
-        const { label, inline, sections, value, onChange } = this.props;
-        let section = (value == null) ? "" : sections.indexOf(value);
-        section = (section === -1) ? "" : section;
-        const onSectionChange = (onChange == null) ? undefined : this.onSectionChange;
+        const { label, inline, sections, sectionId, onChange } = this.props;
         if (onChange == null) {
-            return <React.Fragment>{label || ""} '{value ? value.toString() : ""}'</React.Fragment>;
+            const sectionStr = sectionId != null ? sections[sectionId].toString() : "";
+            return <React.Fragment>{label || ""} '{sectionStr}'</React.Fragment>;
         }
+        const section = (sectionId == null) ? "" : sectionId;
         return (
             <Form.Select
                 className="sectionChooser"
@@ -31,13 +30,13 @@ export default class SectionChooser extends React.Component<{
                 placeholder="Section"
                 options={this.sectionOptions}
                 value={section}
-                onChange={onSectionChange}
+                onChange={this.onSectionChange}
             />
         );
     }
 
     private onSectionChange = (e: React.SyntheticEvent<HTMLElement>, v: DropdownProps) => {
-        this.props.onChange!(this.props.sections[v.value as number]);
+        this.props.onChange!(this.props.sections[v.value as number].id);
     }
 
     @computed