hub: convert StopButton to function

This commit is contained in:
David Lechner
2021-12-27 12:38:50 -06:00
parent f57bbdf8e2
commit c9894de95e
+18 -23
View File
@@ -1,7 +1,8 @@
// SPDX-License-Identifier: MIT // 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 { RootState } from '../reducers';
import ActionButton, { ActionButtonProps } from '../toolbar/ActionButton'; import ActionButton, { ActionButtonProps } from '../toolbar/ActionButton';
import { TooltipId } from '../toolbar/i18n'; import { TooltipId } from '../toolbar/i18n';
@@ -9,29 +10,23 @@ import { stop } from './actions';
import { HubRuntimeState } from './reducers'; import { HubRuntimeState } from './reducers';
import stopIcon from './stop.svg'; import stopIcon from './stop.svg';
type StateProps = Pick<ActionButtonProps, 'enabled'>; type StopButtonProps = Pick<ActionButtonProps, 'id'> &
type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
type OwnProps = Pick<ActionButtonProps, 'id'> &
Pick<ActionButtonProps, 'keyboardShortcut'>; Pick<ActionButtonProps, 'keyboardShortcut'>;
const mapStateToProps = (state: RootState): StateProps => ({ const StopButton: React.FunctionComponent<StopButtonProps> = (props) => {
enabled: state.hub.runtime === HubRuntimeState.Running, const runtime = useSelector((state: RootState) => state.hub.runtime);
});
const mapDispatchToProps: DispatchProps = { const dispatch = useDispatch();
onAction: stop,
return (
<ActionButton
tooltip={TooltipId.Stop}
icon={stopIcon}
enabled={runtime === HubRuntimeState.Running}
onAction={() => dispatch(stop())}
{...props}
/>
);
}; };
const mergeProps = ( export default StopButton;
stateProps: StateProps,
dispatchProps: DispatchProps,
ownProps: OwnProps,
): ActionButtonProps => ({
tooltip: TooltipId.Stop,
icon: stopIcon,
...ownProps,
...stateProps,
...dispatchProps,
});
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(ActionButton);