wire up repl button

src/components/ReplButton.tsx

@@ -0,0 +1,39 @@
+import { connect } from 'react-redux';
+import { ThunkDispatch } from 'redux-thunk';
+import { AnyAction } from 'redux';
+import { RootState } from '../reducers';
+import { HubRuntimeState } from '../reducers/hub';
+import { startRepl } from '../actions/hub';
+import ActionButton, { ActionButtonProps } from './ActionButton';
+
+type Dispatch = ThunkDispatch<{}, {}, AnyAction>;
+
+type StateProps = Pick<ActionButtonProps, 'enabled' | 'context'>;
+type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
+type OwnProps = Pick<ActionButtonProps, 'id'>;
+
+const mapStateToProps = (state: RootState): StateProps => ({
+    enabled:
+        state.hub.runtime === HubRuntimeState.Idle ||
+        state.hub.runtime === HubRuntimeState.Error,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+    onAction: (): void => {
+        dispatch(startRepl());
+    },
+});
+
+const mergeProps = (
+    stateProps: StateProps,
+    dispatchProps: DispatchProps,
+    ownProps: OwnProps,
+): ActionButtonProps => ({
+    tooltip: 'Start REPL in terminal',
+    icon: 'repl.svg',
+    ...ownProps,
+    ...stateProps,
+    ...dispatchProps,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(ActionButton);

src/components/Toolbar.tsx

@@ -8,6 +8,7 @@ import ActionButton from './ActionButton';
 import BluetoothButton from './BluetoothButton';
 import RunButton from './RunButton';
 import StopButton from './StopButton';
+import ReplButton from './ReplButton';
 
 interface ToolbarState {
     bleState: BLEConnectionState;
@@ -39,12 +40,7 @@ class Toolbar extends React.Component<{}, ToolbarState> {
                             <StopButton id="stop" />
                         </ButtonGroup>
                         <ButtonGroup className="mr-2" size="lg">
-                            <ActionButton
-                                id="repl"
-                                tooltip="Start REPL in terminal"
-                                icon="repl.svg"
-                                onAction={this.onAction}
-                            />
+                            <ReplButton id="repl" />
                             <ActionButton
                                 id="flash"
                                 tooltip="Flash hub firmware"