hub: convert StopButton to function

src/hub/StopButton.tsx

@@ -1,7 +1,8 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020 The Pybricks Authors
+// 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,29 +10,23 @@ import { stop } from './actions';
 import { HubRuntimeState } from './reducers';
 import stopIcon from './stop.svg';
 
-type StateProps = Pick<ActionButtonProps, 'enabled'>;
-type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'> &
+type StopButtonProps = Pick<ActionButtonProps, 'id'> &
     Pick<ActionButtonProps, 'keyboardShortcut'>;
 
-const mapStateToProps = (state: RootState): StateProps => ({
-    enabled: state.hub.runtime === HubRuntimeState.Running,
-});
+const StopButton: React.FunctionComponent<StopButtonProps> = (props) => {
+    const runtime = useSelector((state: RootState) => state.hub.runtime);
 
-const mapDispatchToProps: DispatchProps = {
-    onAction: stop,
+    const dispatch = useDispatch();
+
+    return (
+        <ActionButton
+            tooltip={TooltipId.Stop}
+            icon={stopIcon}
+            enabled={runtime === HubRuntimeState.Running}
+            onAction={() => dispatch(stop())}
+            {...props}
+        />
+    );
 };
 
-const mergeProps = (
-    stateProps: StateProps,
-    dispatchProps: DispatchProps,
-    ownProps: OwnProps,
-): ActionButtonProps => ({
-    tooltip: TooltipId.Stop,
-    icon: stopIcon,
-    ...ownProps,
-    ...stateProps,
-    ...dispatchProps,
-});
-
-export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(ActionButton);
+export default StopButton;