From 58ff98cd58c4d5380d16408685923badd760f4c4 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 1 Feb 2018 21:34:39 -0800
Subject: [PATCH] Don't use the unclicked state until after the first click.

https://twitter.com/LuigiHann/status/959120559970930689
---
 js/components/MainWindow/Minimize.js          | 23 +++++++++++++++++
 js/components/MainWindow/Shade.js             | 25 ++++++++++++++++---
 .../__snapshots__/index.test.js.snap          |  4 +++
 js/components/MainWindow/index.js             |  3 ++-
 js/skinSelectors.js                           |  4 +--
 5 files changed, 53 insertions(+), 6 deletions(-)
 create mode 100644 js/components/MainWindow/Minimize.js

diff --git a/js/components/MainWindow/Minimize.js b/js/components/MainWindow/Minimize.js
new file mode 100644
index 00000000..4f9a4047
--- /dev/null
+++ b/js/components/MainWindow/Minimize.js
@@ -0,0 +1,23 @@
+import React from "react";
+import classnames from "classnames";
+
+export default class Minimize extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { clicked: false };
+  }
+  render() {
+    return (
+      <div
+        id="minimize"
+        className={classnames(this.state)}
+        onClick={() => {
+          if (!this.state.clicked) {
+            this.setState({ clicked: true });
+          }
+        }}
+        title="Minimize"
+      />
+    );
+  }
+}
diff --git a/js/components/MainWindow/Shade.js b/js/components/MainWindow/Shade.js
index 7ecdb81a..4948bb58 100644
--- a/js/components/MainWindow/Shade.js
+++ b/js/components/MainWindow/Shade.js
@@ -1,11 +1,30 @@
 import React from "react";
+import classnames from "classnames";
 import { connect } from "react-redux";
 
 import { toggleMainWindowShadeMode } from "../../actionCreators";
 
-const Shade = props => (
-  <div id="shade" onClick={props.handleClick} title="Toggle Windowshade Mode" />
-);
+class Shade extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { clicked: false };
+  }
+  render() {
+    return (
+      <div
+        id="shade"
+        className={classnames(this.state)}
+        onClick={() => {
+          if (!this.state.clicked) {
+            this.setState({ clicked: true });
+          }
+          this.props.handleClick();
+        }}
+        title="Toggle Windowshade Mode"
+      />
+    );
+  }
+}
 
 const mapDispatchToProps = {
   handleClick: toggleMainWindowShadeMode
diff --git a/js/components/MainWindow/__snapshots__/index.test.js.snap b/js/components/MainWindow/__snapshots__/index.test.js.snap
index e5bf638d..67a799b1 100644
--- a/js/components/MainWindow/__snapshots__/index.test.js.snap
+++ b/js/components/MainWindow/__snapshots__/index.test.js.snap
@@ -36,9 +36,13 @@ exports[`MainWindow renders to snapshot 1`] = `
       </div>
     </div>
     <div
+      className=""
       id="minimize"
+      onClick={[Function]}
+      title="Minimize"
     />
     <div
+      className=""
       id="shade"
       onClick={[Function]}
       title="Toggle Windowshade Mode"
diff --git a/js/components/MainWindow/index.js b/js/components/MainWindow/index.js
index 26135303..141e7b4f 100644
--- a/js/components/MainWindow/index.js
+++ b/js/components/MainWindow/index.js
@@ -29,6 +29,7 @@ import MonoStereo from "./MonoStereo";
 import Position from "./Position";
 import Repeat from "./Repeat";
 import Shade from "./Shade";
+import Minimize from "./Minimize";
 import Shuffle from "./Shuffle";
 import Time from "./Time";
 import Visualizer from "./Visualizer";
@@ -90,7 +91,7 @@ export class MainWindow extends React.Component {
         >
           <MainContextMenu />
           {shade && <MiniTime />}
-          <div id="minimize" />
+          <Minimize />
           <Shade />
           <Close />
         </div>
diff --git a/js/skinSelectors.js b/js/skinSelectors.js
index 866a7aac..222e5c52 100644
--- a/js/skinSelectors.js
+++ b/js/skinSelectors.js
@@ -229,9 +229,9 @@ export const imageSelectors = {
     "#title-bar #option:active",
     "#title-bar #option:selected"
   ],
-  MAIN_MINIMIZE_BUTTON: [".selected #title-bar #minimize"],
+  MAIN_MINIMIZE_BUTTON: [".selected #title-bar #minimize.clicked"],
   MAIN_MINIMIZE_BUTTON_DEPRESSED: ["#title-bar #minimize:active"],
-  MAIN_SHADE_BUTTON: [".selected #title-bar #shade"],
+  MAIN_SHADE_BUTTON: [".selected #title-bar #shade.clicked"],
   MAIN_SHADE_BUTTON_DEPRESSED: ["#title-bar #shade:active"],
   MAIN_CLOSE_BUTTON: [".selected #title-bar #close"],
   MAIN_CLOSE_BUTTON_DEPRESSED: ["#title-bar #close:active"],