From 3df608a66557002afcd028f23a3327ce907d0cd7 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 25 Oct 2018 16:21:09 -0700
Subject: [PATCH] First use of hooks!

---
 js/components/ClickedDiv.tsx | 40 ++++++++++++++++--------------------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/js/components/ClickedDiv.tsx b/js/components/ClickedDiv.tsx
index 70347478..b54f5679 100644
--- a/js/components/ClickedDiv.tsx
+++ b/js/components/ClickedDiv.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+// @ts-ignore #hook-types
+import React, { useState } from "react";
 import classnames from "classnames";
 
 type DivProps = React.DetailedHTMLProps<
@@ -21,26 +22,21 @@ interface State {
 // This component is an abstraction that tracks if a div has ever been clicked.
 // Look in `skinSelectors` for CSS selectors that look like `#some-id.clicked`
 // for examples of this functionality in use.
-export default class ClickedDiv extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { clicked: false };
-  }
-
-  render() {
-    return (
-      <div
-        {...this.props}
-        className={classnames(this.props.className, this.state)}
-        onMouseDown={e => {
-          if (!this.state.clicked) {
-            this.setState({ clicked: true });
-          }
-          if (this.props.onMouseDown) {
-            this.props.onMouseDown(e);
-          }
-        }}
-      />
-    );
+function ClickedDiv(props: Props) {
+  const [clicked, setClicked] = useState(false);
+  function handleMouseDown(e: React.MouseEvent<HTMLDivElement>) {
+    setClicked(true);
+    if (props.onMouseDown) {
+      props.onMouseDown(e);
+    }
   }
+  return (
+    <div
+      {...props}
+      className={classnames(props.className, { clicked })}
+      onMouseDown={handleMouseDown}
+    />
+  );
 }
+
+export default ClickedDiv;