From cc0e1aa5ee8a177262f7a5716ca8c675a408474c 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 Shade

---
 js/components/MainWindow/Shade.tsx | 39 +++++++++++-------------------
 1 file changed, 14 insertions(+), 25 deletions(-)

diff --git a/js/components/MainWindow/Shade.tsx b/js/components/MainWindow/Shade.tsx
index 6da4055e..e07761fc 100644
--- a/js/components/MainWindow/Shade.tsx
+++ b/js/components/MainWindow/Shade.tsx
@@ -1,30 +1,19 @@
 import React from "react";
-import { connect } from "react-redux";
 import ClickedDiv from "../ClickedDiv";
 
-import { toggleMainWindowShadeMode } from "../../actionCreators";
-import { Dispatch } from "../../types";
+import * as Actions from "../../actionCreators";
+import { useActionCreator } from "../../hooks";
 
-interface DispatchProps {
-  handleClick(): void;
-}
+const Shade = React.memo(() => {
+  const handleClick = useActionCreator(Actions.toggleMainWindowShadeMode);
+  return (
+    <ClickedDiv
+      id="shade"
+      onMouseDown={handleClick}
+      onDoubleClick={e => e.stopPropagation()}
+      title="Toggle Windowshade Mode"
+    />
+  );
+});
 
-const Shade = (props: DispatchProps) => (
-  <ClickedDiv
-    id="shade"
-    onMouseDown={props.handleClick}
-    onDoubleClick={e => e.stopPropagation()}
-    title="Toggle Windowshade Mode"
-  />
-);
-
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
-  return {
-    handleClick: () => dispatch(toggleMainWindowShadeMode()),
-  };
-};
-
-export default connect(
-  null,
-  mapDispatchToProps
-)(Shade);
+export default Shade;