From 6f54b5aeab16facb5d4b4c0b0974c93e8c488e06 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 20 Aug 2019 07:42:54 -0700
Subject: [PATCH] Use react-redux hooks in a few more places

---
 js/components/MainWindow/Eject.tsx          | 21 +++------
 js/components/MainWindow/EqToggleButton.tsx | 48 ++++++++-------------
 2 files changed, 22 insertions(+), 47 deletions(-)

diff --git a/js/components/MainWindow/Eject.tsx b/js/components/MainWindow/Eject.tsx
index a3c86e77..ce7a59a6 100644
--- a/js/components/MainWindow/Eject.tsx
+++ b/js/components/MainWindow/Eject.tsx
@@ -1,22 +1,11 @@
 import React from "react";
-import { connect } from "react-redux";
 
 import * as Actions from "../../actionCreators";
-import { Dispatch } from "../../types";
+import { useActionCreator } from "../../hooks";
 
-interface DispatchProps {
-  openMediaFileDialog(): void;
-}
-
-const Eject = (props: DispatchProps) => (
-  <div id="eject" onClick={props.openMediaFileDialog} title="Open File(s)" />
-);
-
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
-  openMediaFileDialog: () => dispatch(Actions.openMediaFileDialog()),
+const Eject = React.memo(() => {
+  const openMediaFileDialog = useActionCreator(Actions.openMediaFileDialog);
+  return <div id="eject" onClick={openMediaFileDialog} title="Open File(s)" />;
 });
 
-export default connect(
-  null,
-  mapDispatchToProps
-)(Eject);
+export default Eject;
diff --git a/js/components/MainWindow/EqToggleButton.tsx b/js/components/MainWindow/EqToggleButton.tsx
index ff94e6b4..0894d0c7 100644
--- a/js/components/MainWindow/EqToggleButton.tsx
+++ b/js/components/MainWindow/EqToggleButton.tsx
@@ -1,39 +1,25 @@
 import React from "react";
-import { connect } from "react-redux";
 import classnames from "classnames";
 
-import { getWindowOpen } from "../../selectors";
-import { toggleWindow } from "../../actionCreators";
-import { AppState } from "../../types";
+import * as Selectors from "../../selectors";
+import * as Actions from "../../actionCreators";
+import { useActionCreator, useTypedSelector } from "../../hooks";
 
-interface StateProps {
-  windowOpen: boolean;
+function toggleEqualizer() {
+  return Actions.toggleWindow("equalizer");
 }
 
-interface DispatchProps {
-  handleClick(e: React.MouseEvent<HTMLDivElement>): void;
-}
-
-type Props = StateProps & DispatchProps;
-
-const EqToggleButton = (props: Props) => (
-  <div
-    id="equalizer-button"
-    className={classnames({ selected: props.windowOpen })}
-    onClick={props.handleClick}
-    title="Toggle Graphical Equalizer"
-  />
-);
-
-const mapStateToProps = (state: AppState): StateProps => ({
-  windowOpen: getWindowOpen(state)("equalizer"),
+const EqToggleButton = React.memo(() => {
+  const handleClick = useActionCreator(toggleEqualizer);
+  const windowOpen = useTypedSelector(Selectors.getWindowOpen)("equalizer");
+  return (
+    <div
+      id="equalizer-button"
+      className={classnames({ selected: windowOpen })}
+      onClick={handleClick}
+      title="Toggle Graphical Equalizer"
+    />
+  );
 });
 
-const mapDispatchToProps = {
-  handleClick: () => toggleWindow("equalizer"),
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(EqToggleButton);
+export default EqToggleButton;