home: rewrite using React Hooks

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,30 +11,33 @@ bounce = (val) ->
     stiffness: 330
     damping: 22
 
-class Home extends React.Component
+atEnter =
-  constructor: (props) ->
+  opacity: 0
-    super props
+  translateY: -5
-    @state =
-      dialogOpen: false
-      dialogMsg: null
 
-  openDialog: (msg) =>
+atLeave =
-    @setState
+  opacity: bounce 0
-      dialogOpen: true
+  translateY: bounce -5
-      dialogMsg: msg
+
+atActive =
+  opacity: bounce 1
+  translateY: bounce 0
+
+mapStyles = (styles) ->
+  opacity: styles.opacity
+  transform: "translateY(#{styles.translateY}%)"
+
+export default Home = ->
+  [openDialog, renderDialog] = hooks.useDialog()
 
-  render: ->
   <div className="content-wrapper">
     <div className="content">
       <Router>
         <AnimatedSwitch
-            atEnter={{ opacity: 0, translateY: -5 }}
+          atEnter={atEnter}
-            atLeave={{ opacity: bounce(0), translateY: bounce(-5) }}
+          atLeave={atLeave}
-            atActive={{ opacity: bounce(1), translateY: bounce(0) }}
+          atActive={atActive}
-            mapStyles={(styles) ->
+          mapStyles={mapStyles}
-              opacity: styles.opacity
-              transform: "translateY(#{styles.translateY}%)"
-            }
           className="switch-wrapper"
         >
           <Redirect exact from="/" to="/paste/text" />
@@ -44,11 +47,11 @@ class Home extends React.Component
           }
           <Route
             exact path="/paste/text"
-              render={() => <Pastebin openDialog={@openDialog}/>}
+            render={() => <Pastebin openDialog={openDialog}/>}
           />
           <Route
             exact path="/paste/binary"
-              render={() => <BinaryUpload openDialog={@openDialog}/>}
+            render={() => <BinaryUpload openDialog={openDialog}/>}
           />
           <Route
             path="/paste/:id"
@@ -57,25 +60,5 @@ class Home extends React.Component
         </AnimatedSwitch>
       </Router>
     </div>
-      {
+    {renderDialog()}
-        # 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>
-    </div>
-
-export default Home

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]