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: ->
-
-
-
-
- opacity: styles.opacity
- transform: "translateY(#{styles.translateY}%)"
- }
- className="switch-wrapper"
- >
-
- {
- # Use `render` instead of `component` to prevent re-rendering the child
- # when parent is re-rendered (however this prevents passing match props)
- }
- }
- />
- }
- />
-
-
-
-
- {
- # Provide modal dialog for all child
- # passed through the openDialog prop
- }
-
- {@state.dialogMsg}
-
-
-
-
+atActive =
+ opacity: bounce 1
+ translateY: bounce 0
+
+mapStyles = (styles) ->
+ opacity: styles.opacity
+ transform: "translateY(#{styles.translateY}%)"
+
+export default Home = ->
+ [openDialog, renderDialog] = hooks.useDialog()
+
+
+
+
+
+
+ {
+ # Use `render` instead of `component` to prevent re-rendering the child
+ # when parent is re-rendered (however this prevents passing match props)
+ }
+ }
+ />
+ }
+ />
+
+
+
-
-export default Home
\ No newline at end of file
+ {renderDialog()}
+
\ 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 = ->
+
+ {dialogMsg}
+
+
+
+
+
+ [openDialog, renderDialog]