refactor(app): Use generic actions in /calibration API module

app/src/components/CalibrateDeck/ConfirmPosition.js

@@ -13,11 +13,7 @@ export default function ConfirmPosition (props: Props) {
   return (
     <div>
       <Instructions {...props} />
-      <JogControls
-        jog={props.jog}
-        step={props.jogStep}
-        onStepSelect={props.onJogStepSelect}
-      />
+      <JogControls jog={props.jog} />
       <PrimaryButton onClick={props.proceed}>
         Save Calibration and Continue
       </PrimaryButton>

app/src/components/CalibrateDeck/index.js

@@ -15,8 +15,6 @@ import {
   home,
   startDeckCalibration,
   deckCalibrationCommand,
-  setCalibrationJogStep,
-  getCalibrationJogStep,
   makeGetDeckCalibrationCommandState,
   makeGetDeckCalibrationStartState
 } from '../../http-api-client'
@@ -127,11 +125,11 @@ function CalibrateDeck (props: CalibrateDeckProps) {
   )
 }
 
-function makeMapStateToProps () {
+function makeMapStateToProps (): (state: State, ownProps: OP) => SP {
   const getDeckCalCommand = makeGetDeckCalibrationCommandState()
   const getDeckCalStartState = makeGetDeckCalibrationStartState()
 
-  return (state: State, ownProps: OP): SP => {
+  return (state, ownProps) => {
     const {robot} = ownProps
     const startRequest = getDeckCalStartState(state, robot)
     const pipetteInfo = startRequest.response && startRequest.response.pipette
@@ -146,8 +144,7 @@ function makeMapStateToProps () {
     return {
       startRequest,
       pipetteProps,
-      commandRequest: getDeckCalCommand(state, robot),
-      jogStep: getCalibrationJogStep(state)
+      commandRequest: getDeckCalCommand(state, robot)
     }
   }
 }
@@ -159,10 +156,6 @@ function mapDispatchToProps (dispatch: Dispatch, ownProps: OP): DP {
     jog: (axis, direction, step) => dispatch(
       deckCalibrationCommand(robot, {command: 'jog', axis, direction, step})
     ),
-    onJogStepSelect: (event) => {
-      const step = Number(event.target.value)
-      dispatch(setCalibrationJogStep(step))
-    },
     forceStart: () => dispatch(startDeckCalibration(robot, true)),
     // exit button click in title bar, opens exit alert modal, confirm exit click
     exit: () => dispatch(chainActions(

app/src/components/CalibrateDeck/types.js

@@ -3,7 +3,7 @@ import type {Match} from 'react-router'
 import type {PipetteConfig} from '@opentrons/shared-data'
 import type {RobotService, Mount} from '../../robot'
 import type {DeckCalCommandState, DeckCalStartState} from '../../http-api-client'
-import type {JogControlsProps} from '../JogControls'
+import type {Jog} from '../JogControls'
 
 export type CalibrationStep = '1' | '2' | '3' | '4' | '5' | '6'
 
@@ -16,7 +16,6 @@ export type OP = {
 export type SP = {
   startRequest: DeckCalStartState,
   commandRequest: DeckCalCommandState,
-  jogStep: $PropertyType<JogControlsProps, 'step'>,
   pipetteProps: ?{
     mount: Mount,
     pipette: ?PipetteConfig,
@@ -25,8 +24,7 @@ export type SP = {
 
 export type DP = {
   forceStart: () => mixed,
-  jog: $PropertyType<JogControlsProps, 'jog'>,
-  onJogStepSelect: $PropertyType<JogControlsProps, 'onStepSelect'>,
+  jog: Jog,
   exit: () => mixed,
   back: () => mixed
 }

app/src/components/CalibrateLabware/ConfirmPositionContents.js

@@ -3,31 +3,26 @@
 import * as React from 'react'
 import {connect} from 'react-redux'
 
-import type {State, Dispatch} from '../../types'
+import type {Dispatch} from '../../types'
 import type {Instrument, Labware} from '../../robot'
 
-import {selectors as robotSelectors, actions as robotActions} from '../../robot'
+import {actions as robotActions} from '../../robot'
 import {PrimaryButton} from '@opentrons/components'
 import ConfirmPositionDiagram from './ConfirmPositionDiagram'
-import JogControls, {type JogControlsProps} from '../JogControls'
-
-type SP = {
-  step: $PropertyType<JogControlsProps, 'step'>,
-}
+import JogControls, {type Jog} from '../JogControls'
 
 type DP = {
-  onConfirmClick: () => void,
-  jog: $PropertyType<JogControlsProps, 'jog'>,
-  onStepSelect: $PropertyType<JogControlsProps, 'onStepSelect'>,
+  onConfirmClick: () => mixed,
+  jog: Jog,
 }
 
 type OP = Labware & {
   calibrator: Instrument
 }
 
-type Props = SP & DP & OP
+type Props = DP & OP
 
-export default connect(mapStateToProps, mapDispatchToProps)(ConfirmPositionContents)
+export default connect(null, mapDispatchToProps)(ConfirmPositionContents)
 
 function ConfirmPositionContents (props: Props) {
   const {isTiprack, onConfirmClick, calibrator: {channels}} = props
@@ -46,26 +41,16 @@ function ConfirmPositionContents (props: Props) {
   )
 }
 
-function mapStateToProps (state: State): SP {
-  return {
-    step: robotSelectors.getJogDistance(state)
-  }
-}
-
 function mapDispatchToProps (dispatch: Dispatch, ownProps: OP): DP {
   const {slot, isTiprack, calibrator: {mount}} = ownProps
   const onConfirmAction = isTiprack
     ? robotActions.pickupAndHome(mount, slot)
     : robotActions.updateOffset(mount, slot)
 
   return {
-    jog: (axis, direction) => {
-      dispatch(robotActions.jog(mount, axis, direction))
-    },
-    onStepSelect: (event) => {
-      const step = Number(event.target.value)
-      dispatch(robotActions.setJogDistance(step))
+    jog: (axis, direction, step) => {
+      dispatch(robotActions.jog(mount, axis, direction, step))
     },
-    onConfirmClick: () => { dispatch(onConfirmAction) }
+    onConfirmClick: () => dispatch(onConfirmAction)
   }
 }

app/src/components/JogControls/index.js

@@ -15,19 +15,17 @@ import {
 
 import styles from './styles.css'
 
-type Jog = (axis: JogAxis, direction: JogDirection, step: JogStep) => mixed
+export type Jog = (axis: JogAxis, direction: JogDirection, step: JogStep) => mixed
 
 type JogButtonProps = {
   name: string,
   icon: IconName,
   onClick: () => mixed,
 }
 
-export type JogControlsProps = {
-  jog: Jog,
-  step: JogStep,
-  onStepSelect: (event: SyntheticInputEvent<*>) => mixed,
-}
+type Props = {jog: Jog}
+
+type State = {step: JogStep}
 
 const JOG_BUTTON_NAMES = ['left', 'right', 'back', 'forward', 'up', 'down']
 
@@ -49,28 +47,32 @@ const JOG_PARAMS_BY_NAME = {
   down: ['z', -1]
 }
 
-const STEPS = [0.1, 1, 10]
+const STEPS: Array<JogStep> = [0.1, 1, 10]
 const STEP_OPTIONS = STEPS.map(s => ({name: `${s} mm`, value: `${s}`}))
 
-export default class JogControls extends React.Component<JogControlsProps> {
+export default class JogControls extends React.Component<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {step: STEPS[0]}
+  }
+
   increaseStepSize = () => {
-    const current = STEPS.indexOf(this.props.step)
-    if (current < STEPS.length - 1) {
-      // $FlowFixMe: (mc, 2018-06-26) refactor so event trickery isn't needed
-      this.props.onStepSelect({target: {value: `${STEPS[current + 1]}`}})
-    }
+    const i = STEPS.indexOf(this.state.step)
+    if (i < STEPS.length - 1) this.setState({step: STEPS[i + 1]})
   }
 
   decreaseStepSize = () => {
-    const current = STEPS.indexOf(this.props.step)
-    if (current > 0) {
-      // $FlowFixMe: (mc, 2018-06-26) refactor so event trickery isn't needed
-      this.props.onStepSelect({target: {value: `${STEPS[current - 1]}`}})
-    }
+    const i = STEPS.indexOf(this.state.step)
+    if (i > 0) this.setState({step: STEPS[i - 1]})
+  }
+
+  handleStepSelect = (event: SyntheticInputEvent<*>) => {
+    this.setState({step: Number(event.target.value)})
   }
 
   getJogHandlers () {
-    const {jog, step} = this.props
+    const {jog} = this.props
+    const {step} = this.state
 
     return JOG_BUTTON_NAMES.reduce((result, name) => ({
       ...result,
@@ -79,8 +81,8 @@ export default class JogControls extends React.Component<JogControlsProps> {
   }
 
   renderJogControls () {
+    const {step} = this.state
     const jogHandlers = this.getJogHandlers()
-    const {step, onStepSelect} = this.props
 
     return (
       <HandleKeypress
@@ -111,7 +113,7 @@ export default class JogControls extends React.Component<JogControlsProps> {
             className={styles.increment_item}
             value={`${step}`}
             options={STEP_OPTIONS}
-            onChange={onStepSelect}
+            onChange={this.handleStepSelect}
             disableKeypress
           />
         </span>