From ecbcb09846e8ced0086eff198bb5bcd217b1c92e Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Sat, 12 Mar 2022 16:18:38 -0600
Subject: [PATCH] hub/ReplButton: convert to function component

---
 src/hub/ReplButton.tsx | 48 ++++++++++++++++++++----------------------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/hub/ReplButton.tsx b/src/hub/ReplButton.tsx
index b4e3ff17..8e233307 100644
--- a/src/hub/ReplButton.tsx
+++ b/src/hub/ReplButton.tsx
@@ -1,37 +1,35 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020 The Pybricks Authors
+// Copyright (c) 2020-2022 The Pybricks Authors
 
-import { connect } from 'react-redux';
-import { RootState } from '../reducers';
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useSelector } from '../reducers';
 import ActionButton, { ActionButtonProps } from '../toolbar/ActionButton';
 import { TooltipId } from '../toolbar/i18n';
 import { repl } from './actions';
 import { HubRuntimeState } from './reducers';
 import replIcon from './repl.svg';
 
-type StateProps = Pick<ActionButtonProps, 'enabled'>;
-type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'> &
-    Pick<ActionButtonProps, 'keyboardShortcut'>;
+type ReplButtonProps = Pick<ActionButtonProps, 'id' | 'keyboardShortcut'>;
 
-const mapStateToProps = (state: RootState): StateProps => ({
-    enabled: state.hub.runtime === HubRuntimeState.Idle,
-});
+const ReplButton: React.VoidFunctionComponent<ReplButtonProps> = ({
+    id,
+    keyboardShortcut,
+}) => {
+    const enabled = useSelector((s) => s.hub.runtime === HubRuntimeState.Idle);
+    const dispatch = useDispatch();
+    const action = useCallback(() => dispatch(repl()), [dispatch]);
 
-const mapDispatchToProps: DispatchProps = {
-    onAction: repl,
+    return (
+        <ActionButton
+            id={id}
+            keyboardShortcut={keyboardShortcut}
+            tooltip={TooltipId.Repl}
+            icon={replIcon}
+            enabled={enabled}
+            onAction={action}
+        />
+    );
 };
 
-const mergeProps = (
-    stateProps: StateProps,
-    dispatchProps: DispatchProps,
-    ownProps: OwnProps,
-): ActionButtonProps => ({
-    tooltip: TooltipId.Repl,
-    icon: replIcon,
-    ...ownProps,
-    ...stateProps,
-    ...dispatchProps,
-});
-
-export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(ActionButton);
+export default ReplButton;