From 0472033fbab4af883a49d0f685f6408203323b04 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 20 Aug 2019 07:42:54 -0700
Subject: [PATCH] Make Desktop a functional component with hooks

---
 js/components/MilkdropWindow/Desktop.tsx | 38 ++++++++----------------
 1 file changed, 12 insertions(+), 26 deletions(-)

diff --git a/js/components/MilkdropWindow/Desktop.tsx b/js/components/MilkdropWindow/Desktop.tsx
index fb925b12..51dcb934 100644
--- a/js/components/MilkdropWindow/Desktop.tsx
+++ b/js/components/MilkdropWindow/Desktop.tsx
@@ -1,32 +1,18 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-interface Props {}
+const Desktop = React.memo(({ children }) => {
+  const [desktopNode] = React.useState(() => document.createElement("div"));
 
-export default class Desktop extends React.Component<Props> {
-  _desktopNode: HTMLElement | null;
-  constructor(props: Props) {
-    super(props);
-    this._desktopNode = null;
-  }
+  React.useEffect(() => {
+    desktopNode.classList.add("webamp-desktop");
+    document.body.appendChild(desktopNode);
+    return () => {
+      document.body.removeChild(desktopNode);
+    };
+  }, [desktopNode]);
 
-  componentWillUnmount() {
-    if (this._desktopNode != null) {
-      document.body.removeChild(this._desktopNode);
-      this._desktopNode = null;
-    }
-  }
+  return ReactDOM.createPortal(children, desktopNode);
+});
 
-  _getNode() {
-    if (this._desktopNode == null) {
-      this._desktopNode = document.createElement("div");
-      this._desktopNode.classList.add("webamp-desktop");
-      document.body.appendChild(this._desktopNode);
-    }
-    return this._desktopNode;
-  }
-
-  render() {
-    return ReactDOM.createPortal(this.props.children, this._getNode());
-  }
-}
+export default Desktop;