hub: convert RunButton to function

src/hub/RunButton.tsx

@@ -1,7 +1,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020-2021 The Pybricks Authors
 
-import { connect } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../reducers';
 import ActionButton, { ActionButtonProps } from '../toolbar/ActionButton';
 import { TooltipId } from '../toolbar/i18n';
@@ -9,34 +10,30 @@ import { downloadAndRun } from './actions';
 import { HubRuntimeState } from './reducers';
 import runIcon from './run.svg';
 
-type StateProps = Pick<ActionButtonProps, 'enabled' | 'showProgress' | 'progress'>;
-type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'> &
+type RunButtonProps = Pick<ActionButtonProps, 'id'> &
     Pick<ActionButtonProps, 'keyboardShortcut'>;
 
-const mapStateToProps = (state: RootState): StateProps => ({
-    enabled:
-        state.editor.current !== null && state.hub.runtime === HubRuntimeState.Idle,
-    showProgress: state.hub.runtime === HubRuntimeState.Loading,
-    progress:
-        state.hub.downloadProgress === null ? undefined : state.hub.downloadProgress,
-});
+const RunButton: React.FunctionComponent<RunButtonProps> = (props) => {
+    const editor = useSelector((state: RootState) => state.editor.current);
+    const downloadProgress = useSelector(
+        (state: RootState) => state.hub.downloadProgress,
+    );
+    const runtime = useSelector((state: RootState) => state.hub.runtime);
 
-const mapDispatchToProps: DispatchProps = {
-    onAction: downloadAndRun,
+    const dispatch = useDispatch();
+
+    return (
+        <ActionButton
+            tooltip={TooltipId.Run}
+            progressTooltip={TooltipId.RunProgress}
+            icon={runIcon}
+            enabled={editor !== null && runtime === HubRuntimeState.Idle}
+            showProgress={runtime === HubRuntimeState.Loading}
+            progress={downloadProgress === null ? undefined : downloadProgress}
+            onAction={() => dispatch(downloadAndRun())}
+            {...props}
+        />
+    );
 };
 
-const mergeProps = (
-    stateProps: StateProps,
-    dispatchProps: DispatchProps,
-    ownProps: OwnProps,
-): ActionButtonProps => ({
-    tooltip: TooltipId.Run,
-    progressTooltip: TooltipId.RunProgress,
-    icon: runIcon,
-    ...ownProps,
-    ...stateProps,
-    ...dispatchProps,
-});
-
-export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(ActionButton);
+export default RunButton;