binaryUpload: refactor to use hooks

src/web/binaryUpload.coffee

@@ -1,125 +1,87 @@
-import React from "react"
-import Dropzone from "react-dropzone"
+import React, { useState, useCallback } from "react"
+import { useDropzone } from "react-dropzone"
 import HelpButton from "./helpButton"
 import LinkButton from "./util/linkButton"
+import * as hooks from "./hooks"
 import * as crypto from "../crypto"
 import * as util from "../util"
 
-class BinaryUpload extends React.Component
-  constructor: (props) ->
-    super props
-    @state =
-      file: null
-      uploading: false
-      progress: 0
-      encrypt: false
-      encrypting: false
+export default BinaryUpload = ->
+  [openDialog, renderDialog] = hooks.useDialog()
+  [encrypt, toggleEncrypt] = hooks.useToggle false
+  [encrypting, setEncrypting] = useState false
+  [file, setFile] = useState null
 
-  onDrop: (files) =>
-    @setState
-      file: files[0]
+  # Paste hook and event
+  clearFile = (status) ->
+    setFile null if status == 200
+  [doPaste, pasting, progress] = hooks.usePaste openDialog,
+    useCallback clearFile, []
 
-  doUpload: =>
-    key = null
-    iv = null
-    @setState
-      uploading: true
-      encrypting: @state.encrypt
-      progress: 0
-    # Due to the lack of progress feature in current Fetch API
-    # We have to use XHR for now. Dang.
-    xhr = new XMLHttpRequest()
-    xhr.upload.addEventListener "progress", (e) =>
-      if e.lengthComputable
-        @setState
-          progress: e.loaded / e.total
-    xhr.addEventListener "readystatechange", =>
-      if xhr.readyState == XMLHttpRequest.DONE
-        @setState
-          uploading: false
-          encrypting: false
-          file: null
-        @props.openDialog do =>
-          if xhr.status == 200
-            url = if not @state.encrypt
-              xhr.responseText
-            else
-              xhr.responseText + "?crypt#" + key + "+" + iv
-            <a href={url} target="_blank">
-              https://{window.location.hostname}{url}
-            </a>
-          else
-            xhr.responseText
+  # Dropzone hook and event
+  onDrop = (files) ->
+    setFile files[0]
+  {getRootProps, getInputProps, isDragActive} = useDropzone
+    onDrop: useCallback onDrop, []
 
-    if not @state.encrypt
-      xhr.open 'PUT', '/paste/' + @state.file.name
-      xhr.send @state.file
+  # Upload handler, we basically extend the Paste hook with encryption
+  doUpload = ->
+    if not encrypt
+      doPaste file.name, file.type, file
     else
-      [key, iv, name, mime, encrypted] = await crypto.encryptFile @state.file
-      xhr.open 'PUT', '/paste/' + name
-      xhr.setRequestHeader 'content-type', mime
-      xhr.send encrypted
-      @setState
-        encrypting: false
+      # Handle encryption
+      setEncrypting true
+      [key, iv, name, mime, encrypted] = await crypto.encryptFile file
+      setEncrypting false
+      doPaste name, mime, encrypted, (url) ->
+        url + "?crypt#" + key + "+" + iv
+  doUpload = useCallback doUpload, [file, encrypt, doPaste]
 
-  progressText: ->
-    util.progressText @state.progress
-
-  toggleEncrypt: =>
-    @setState (state, props) ->
-      { encrypt: not state.encrypt }
-
-  render: ->
-    <div className="content-pastebin">
-      <Dropzone onDrop={@onDrop}>
-        {({getRootProps, getInputProps}) => 
-          <section className="container">
-            <div {...getRootProps({className: 'dropzone'})}>
-              <input {...getInputProps()} />
-              <p>Drag 'n' drop a file here to upload, or click to select</p>
-            </div>
-            <aside>
-              <p>{
-                if not @state.file
-                  "No Selected File"
-                else
-                  "Selected File: #{@state.file.name}"
-              }</p>
-            </aside>
-          </section>
-        }
-      </Dropzone>
-      <div className="content-buttons">
-        <HelpButton openDialog={@props.openDialog} />
-        <button
-          className="button-blue"
-          disabled={@state.uploading}
-          onClick={@toggleEncrypt}
-        >
-          { "Encrypt: " + if @state.encrypt then "ON" else "OFF" }
-        </button>
-        <LinkButton
-          className="button-blue"
-          disabled={@state.uploading}
-          to="/paste/text"
-        >
-          Text Mode
-        </LinkButton>
-        <button
-          className="button-blue"
-          disabled={@state.uploading or not @state.file}
-          onClick={@doUpload}
-        >
-          {
-            if not @state.uploading
-              "Upload"
-            else if @state.encrypting
-              "Encrypting"
-            else
-              @progressText()
-          }
-        </button>
+  <div className="content-pastebin">
+    {renderDialog()}
+    <section className="container">
+      <div {...getRootProps({className: 'dropzone'})}>
+        <input {...getInputProps()} />
+        <p>Drag 'n' drop a file here to upload, or click to select</p>
       </div>
+      <aside>
+        <p>{
+          if not file
+            "No Selected File"
+          else
+            "Selected File: #{file.name}"
+        }</p>
+      </aside>
+    </section>
+    <div className="content-buttons">
+      <HelpButton openDialog={openDialog} />
+      <button
+        className="button-blue"
+        disabled={pasting}
+        onClick={toggleEncrypt}
+      >
+        { "Encrypt: " + if encrypt then "ON" else "OFF" }
+      </button>
+      <LinkButton
+        className="button-blue"
+        disabled={pasting}
+        to="/paste/text"
+      >
+        Text Mode
+      </LinkButton>
+      <button
+        className="button-blue"
+        disabled={pasting or not file}
+        onClick={doUpload}
+      >
+        {
+          if encrypting
+            "Encrypting"
+          else if not pasting
+            "Upload"
+          else
+            util.progressText progress
+        }
+      </button>
     </div>
-
-export default BinaryUpload
+  </div>

src/web/hooks.coffee

@@ -51,11 +51,11 @@ export useDialog = ->
   ]
 
 # Handles shared file-uploading logic between text / binary pasting
-export usePaste = (openDialog, transformUrl, callback) ->
+export usePaste = (openDialog, callback) ->
   [pasting, setPasting] = useState false
   [progress, setProgress] = useState 0
 
-  doPaste = (name, mime, content) ->
+  doPaste = (name, mime, content, transformUrl) ->
     # Unfortunately we have to all resort to using XHR here
     setProgress 0
     setPasting true
@@ -86,7 +86,8 @@ export usePaste = (openDialog, transformUrl, callback) ->
 
   [
     # our paste only depends on *setting* states, no reading required
-    useCallback(doPaste, []),
+    # but all the callback it reads from its closure may change
+    useCallback(doPaste, [openDialog, callback]),
     pasting,
     progress
   ]

src/web/pastebin.coffee

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useCallback } from "react"
 import * as hooks from "./hooks"
 import HelpButton from "./helpButton"
 import LinkButton from "./util/linkButton"
@@ -8,8 +8,12 @@ export default Pastebin = ->
   [openDialog, renderDialog] = hooks.useDialog()
   [highlight, toggleHighlight] = hooks.useToggle false
   [text, setText] = useState ""
-  [doPaste, pasting, _] = hooks.usePaste openDialog, null, (status) ->
+
+  # Paste hook and events
+  clearText = (status) ->
     setText "" if status == 200
+  [doPaste, pasting, _] = hooks.usePaste openDialog,
+    useCallback clearText, []
 
   onEditTextUpdate = (ev) ->
     setText ev.target.value