Feed index into options

src/client/lazy-app/Compress/Options/index.tsx

@@ -19,13 +19,14 @@ import { Options as QuantOptionsComponent } from 'features/processors/quantize/c
 import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
 
 interface Props {
+  index: 0 | 1;
   mobileView: boolean;
   source?: SourceImage;
   encoderState?: EncoderState;
   processorState: ProcessorState;
-  onEncoderTypeChange(newType: OutputType): void;
-  onEncoderOptionsChange(newOptions: EncoderOptions): void;
-  onProcessorOptionsChange(newOptions: ProcessorState): void;
+  onEncoderTypeChange(index: 0 | 1, newType: OutputType): void;
+  onEncoderOptionsChange(index: 0 | 1, newOptions: EncoderOptions): void;
+  onProcessorOptionsChange(index: 0 | 1, newOptions: ProcessorState): void;
 }
 
 interface State {
@@ -73,7 +74,7 @@ export default class Options extends Component<Props, State> {
     // The select element only has values matching encoder types,
     // so 'as' is safe here.
     const type = el.value as OutputType;
-    this.props.onEncoderTypeChange(type);
+    this.props.onEncoderTypeChange(this.props.index, type);
   };
 
   private onProcessorEnabledChange = (event: Event) => {
@@ -81,24 +82,31 @@ export default class Options extends Component<Props, State> {
     const processor = el.name.split('.')[0] as keyof ProcessorState;
 
     this.props.onProcessorOptionsChange(
+      this.props.index,
       cleanSet(this.props.processorState, `${processor}.enabled`, el.checked),
     );
   };
 
   private onQuantizerOptionsChange = (opts: ProcessorOptions['quantize']) => {
     this.props.onProcessorOptionsChange(
+      this.props.index,
       cleanMerge(this.props.processorState, 'quantize', opts),
     );
   };
 
   private onResizeOptionsChange = (opts: ProcessorOptions['resize']) => {
     this.props.onProcessorOptionsChange(
+      this.props.index,
       cleanMerge(this.props.processorState, 'resize', opts),
     );
   };
 
+  private onEncoderOptionsChange = (newOptions: EncoderOptions) => {
+    this.props.onEncoderOptionsChange(this.props.index, newOptions);
+  };
+
   render(
-    { source, encoderState, processorState, onEncoderOptionsChange }: Props,
+    { source, encoderState, processorState }: Props,
     { supportedEncoderMap }: State,
   ) {
     const encoder = encoderState && encoderMap[encoderState.type];
@@ -180,7 +188,7 @@ export default class Options extends Component<Props, State> {
                 // the correct type, but typescript isn't smart enough.
                 encoderState!.options as any
               }
-              onChange={onEncoderOptionsChange}
+              onChange={this.onEncoderOptionsChange}
             />
           )}
         </Expander>

src/client/lazy-app/Compress/index.tsx

@@ -319,7 +319,7 @@ export default class Compress extends Component<Props, State> {
     this.setState({ mobileView: this.widthQuery.matches });
   };
 
-  private onEncoderTypeChange(index: 0 | 1, newType: OutputType): void {
+  private onEncoderTypeChange = (index: 0 | 1, newType: OutputType): void => {
     this.setState({
       sides: cleanSet(
         this.state.sides,
@@ -332,12 +332,12 @@ export default class Compress extends Component<Props, State> {
             },
       ),
     });
-  }
+  };
 
-  private onProcessorOptionsChange(
+  private onProcessorOptionsChange = (
     index: 0 | 1,
     options: ProcessorState,
-  ): void {
+  ): void => {
     this.setState({
       sides: cleanSet(
         this.state.sides,
@@ -345,9 +345,12 @@ export default class Compress extends Component<Props, State> {
         options,
       ),
     });
-  }
+  };
 
-  private onEncoderOptionsChange(index: 0 | 1, options: EncoderOptions): void {
+  private onEncoderOptionsChange = (
+    index: 0 | 1,
+    options: EncoderOptions,
+  ): void => {
     this.setState({
       sides: cleanSet(
         this.state.sides,
@@ -355,7 +358,7 @@ export default class Compress extends Component<Props, State> {
         options,
       ),
     });
-  }
+  };
 
   componentWillReceiveProps(nextProps: Props): void {
     if (nextProps.file !== this.props.file) {
@@ -794,22 +797,14 @@ export default class Compress extends Component<Props, State> {
 
     const options = sides.map((side, index) => (
       <Options
+        index={index as 0 | 1}
         source={source}
         mobileView={mobileView}
         processorState={side.latestSettings.processorState}
         encoderState={side.latestSettings.encoderState}
-        onEncoderTypeChange={this.onEncoderTypeChange.bind(
-          this,
-          index as 0 | 1,
-        )}
-        onEncoderOptionsChange={this.onEncoderOptionsChange.bind(
-          this,
-          index as 0 | 1,
-        )}
-        onProcessorOptionsChange={this.onProcessorOptionsChange.bind(
-          this,
-          index as 0 | 1,
-        )}
+        onEncoderTypeChange={this.onEncoderTypeChange}
+        onEncoderOptionsChange={this.onEncoderOptionsChange}
+        onProcessorOptionsChange={this.onProcessorOptionsChange}
       />
     ));