From 597c6c93590e067a02bd5337ef0fa01f470c5e8a Mon Sep 17 00:00:00 2001
From: Peter Cai <peter@typeblog.net>
Date: Thu, 20 Feb 2020 08:47:35 +0800
Subject: [PATCH] home: rewrite using React Hooks

---
 src/web/home.coffee  | 117 ++++++++++++++++++-------------------------
 src/web/hooks.coffee |  33 ++++++++++++
 2 files changed, 83 insertions(+), 67 deletions(-)
 create mode 100644 src/web/hooks.coffee

diff --git a/src/web/home.coffee b/src/web/home.coffee
index 74471bc..e39dbbd 100644
--- a/src/web/home.coffee
+++ b/src/web/home.coffee
@@ -1,7 +1,7 @@
-import React from "react"
+import React, { useState } from "react"
 import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"
 import { AnimatedSwitch, spring } from 'react-router-transition'
-import ReactModal from "react-modal"
+import * as hooks from "./hooks"
 import Pastebin from "./pastebin"
 import BinaryUpload from "./binaryUpload"
 import FileViewerDispatcher from "./fileViewerDispatcher"
@@ -11,71 +11,54 @@ bounce = (val) ->
     stiffness: 330
     damping: 22
 
-class Home extends React.Component
-  constructor: (props) ->
-    super props
-    @state =
-      dialogOpen: false
-      dialogMsg: null
+atEnter =
+  opacity: 0
+  translateY: -5
 
-  openDialog: (msg) =>
-    @setState
-      dialogOpen: true
-      dialogMsg: msg
+atLeave =
+  opacity: bounce 0
+  translateY: bounce -5
 
-  render: ->
-    <div className="content-wrapper">
-      <div className="content">
-        <Router>
-          <AnimatedSwitch
-            atEnter={{ opacity: 0, translateY: -5 }}
-            atLeave={{ opacity: bounce(0), translateY: bounce(-5) }}
-            atActive={{ opacity: bounce(1), translateY: bounce(0) }}
-            mapStyles={(styles) ->
-              opacity: styles.opacity
-              transform: "translateY(#{styles.translateY}%)"
-            }
-            className="switch-wrapper"
-          >
-            <Redirect exact from="/" to="/paste/text" />
-            {
-              # Use `render` instead of `component` to prevent re-rendering the child
-              # when parent is re-rendered (however this prevents passing match props)
-            }
-            <Route
-              exact path="/paste/text"
-              render={() => <Pastebin openDialog={@openDialog}/>}
-            />
-            <Route
-              exact path="/paste/binary"
-              render={() => <BinaryUpload openDialog={@openDialog}/>}
-            />
-            <Route
-              path="/paste/:id"
-              component={FileViewerDispatcher}
-            />
-          </AnimatedSwitch>
-        </Router>
-      </div>
-      {
-        # Provide modal dialog for all child
-        # passed through the openDialog prop
-      }
-      <ReactModal
-        isOpen={@state.dialogOpen}
-        className="ReactModal__Content_My"
-        closeTimeoutMS={500}
-      >
-        <p>{@state.dialogMsg}</p>
-        <div className="dialog-buttons">
-          <button
-            className="button-blue"
-            onClick={(e) => @setState { dialogOpen: false }}
-          >
-            Close
-          </button>
-        </div>
-      </ReactModal>
+atActive =
+  opacity: bounce 1
+  translateY: bounce 0
+
+mapStyles = (styles) ->
+  opacity: styles.opacity
+  transform: "translateY(#{styles.translateY}%)"
+
+export default Home = ->
+  [openDialog, renderDialog] = hooks.useDialog()
+
+  <div className="content-wrapper">
+    <div className="content">
+      <Router>
+        <AnimatedSwitch
+          atEnter={atEnter}
+          atLeave={atLeave}
+          atActive={atActive}
+          mapStyles={mapStyles}
+          className="switch-wrapper"
+        >
+          <Redirect exact from="/" to="/paste/text" />
+          {
+            # Use `render` instead of `component` to prevent re-rendering the child
+            # when parent is re-rendered (however this prevents passing match props)
+          }
+          <Route
+            exact path="/paste/text"
+            render={() => <Pastebin openDialog={openDialog}/>}
+          />
+          <Route
+            exact path="/paste/binary"
+            render={() => <BinaryUpload openDialog={openDialog}/>}
+          />
+          <Route
+            path="/paste/:id"
+            component={FileViewerDispatcher}
+          />
+        </AnimatedSwitch>
+      </Router>
     </div>
-
-export default Home
\ No newline at end of file
+    {renderDialog()}
+  </div>
\ No newline at end of file
diff --git a/src/web/hooks.coffee b/src/web/hooks.coffee
new file mode 100644
index 0000000..80012ee
--- /dev/null
+++ b/src/web/hooks.coffee
@@ -0,0 +1,33 @@
+import React, { useState } from "react"
+import ReactModal from "react-modal"
+
+# A hook to support opening dialogs from the code
+# returns [openDialog, renderDialog]
+# renderDialog should always be called somewhere
+# when rending the page
+export useDialog = ->
+  [dialogOpen, setDialogOpen] = useState false
+  [dialogMsg, setDialogMsg] = useState null
+
+  openDialog = (msg) ->
+    setDialogMsg msg
+    setDialogOpen true
+
+  renderDialog = ->
+    <ReactModal
+      isOpen={dialogOpen}
+      className="ReactModal__Content_My"
+      closeTimeoutMS={500}
+    >
+      <p>{dialogMsg}</p>
+      <div className="dialog-buttons">
+        <button
+          className="button-blue"
+          onClick={(e) -> setDialogOpen false}
+        >
+          Close
+        </button>
+      </div>
+    </ReactModal>
+
+  [openDialog, renderDialog]