fileDecrypter: refactor using Hooks

also refactored useFetchContent to use useAsyncMemo

src/web/fileDecrypter.coffee

@@ -1,118 +1,115 @@
-import React from "react"
+import React, { useState, useEffect, useCallback, useMemo } from "react"
 import LinkButton from "./util/linkButton"
+import * as hooks from "./hooks"
 import * as crypto from "../crypto"
 import * as util from "../util"
 
-class FileDecrypter extends React.Component
+export default FileDecrypter = (props) ->
-  constructor: (props) ->
+  [downloading, setDownloading] = useState false
-    super props
+  [decrypting, setDecrypting] = useState false
-    @originalUrl = "/paste/#{props.id}?original"
+  [downloaded, setDownloaded] = useState null
-    # We simply let it fail if there's no key / iv provided in window.location.hash
+
-    # also we don't care about decryption failure. Just let it look like a broken page
+  # Fetch credentials from location once
-    # if someone tries to brute-force
+  fetchCredentials = ->
     [key, iv] = window.location.hash.replace("#", "").split '+'
-    @state =
+    return
-      name: null
-      mime: null
-      length: null
-      downloading: false
-      decrypting: false
-      progress: 0
       key: key
       iv: iv
-      downloaded: null
+  credentials = useMemo fetchCredentials, []
 
-  componentDidMount: ->
+  # Handle object URL revocation before unmount
-    # Fetch metadata to show to user
+  # (though this will be fired every time `downloaded` changes,
-    # We can use fetch API here
+  #  but that only changes when we finish downloading, and
-    resp = await fetch @originalUrl
+  #  also the registered clean-up will be run after the final unmount)
-    # Fail silently as explained above
+  # (it is necessary to bind to "downloaded" otherwise the closure
-    return if not resp.ok
+  #  will hold stale references)
-    mime = resp.headers.get 'content-type'
+  urlRevokeHandler = ->
-    [_, name] = resp.headers.get 'content-disposition'
+    return ->
-                .split 'filename*='
+      URL.revokeObjectURL downloaded if downloaded
-    [name, mime] = await crypto.decryptMetadata @state.key, @state.iv, name, mime
+  useEffect urlRevokeHandler, [downloaded]
-    @setState
+
+  # Fetch meta (only fetches on first mount; subsequent calls return the same state)
+  origMeta = hooks.useFetchContent props.id
+
+  # Create decrypted metadata
+  decryptMeta = ->
+    if (not origMeta) or (not credentials)
+      return null
+    else
+      [name, mime] = await crypto.decryptMetadata credentials.key, credentials.iv,
+                            origMeta.name, origMeta.mime
+      return
         name: name
         mime: mime
-      length: parseInt resp.headers.get 'content-length'
+        length: origMeta.length
+  meta = hooks.useAsyncMemo null, decryptMeta, [origMeta, credentials]
 
-  componentWillUnmount: ->
+  # Handle decryption
-    if @state.downloaded
+  decryptFile = (file) ->
-      URL.revokeObjectURL @state.downloaded
+    setDecrypting true
+    decrypted = await crypto.decryptFile credentials.key, credentials.iv, file
+    blob = new Blob [decrypted],
+      type: meta.mime
+    setDownloaded URL.createObjectURL blob
+  decryptFile = useCallback decryptFile, [credentials, meta]
 
-  downloadFile: =>
+  # Handle file downloads
-    @setState
+  # We don't need to share logic via hooks with CodeViewer
-      downloading: true
+  # because this is a whole new fetch session that CodeViewer
-      decrypting: false
+  # never shares.
-      progress: 0
+  [_, progress, beginXHR] = hooks.useXhrProgress()
-    # For progress, we have to use XHR
+  downloadFile = ->
-    xhr = new XMLHttpRequest()
+    setDownloading true
+    xhr = beginXHR()
     xhr.responseType = "arraybuffer"
-    xhr.addEventListener 'progress', (e) =>
-      if e.lengthComputable
-        @setState
-          progress: e.loaded / e.total
     xhr.addEventListener 'readystatechange', =>
       if xhr.readyState == XMLHttpRequest.DONE
         if xhr.status == 200
-          await @decryptFile xhr.response
+          await decryptFile xhr.response
-        @setState
+        setDownloading false
-          downloading: false
+    xhr.open 'GET', "/paste/#{props.id}?original"
-    xhr.open 'GET', @originalUrl
     xhr.send()
+  downloadFile = useCallback downloadFile, [meta, decryptFile]
 
-  decryptFile: (file) =>
-    @setState
-      decrypting: true
-    decrypted = await crypto.decryptFile @state.key, @state.iv, file
-    blob = new Blob [decrypted],
-      type: @state.mime
-    @setState
-      decrypting: false
-      blob: blob
-      downloaded: URL.createObjectURL blob
-
-  render: ->
   <div className="content-pastebin">{
-      if not @state.name
+    if not meta
       <p>Loading...</p>
     else
       <div className="content-file-info">
-          <p>{@state.name}</p>
+        <p>{meta.name}</p>
-          <p>{@state.mime}</p>
+        <p>{meta.mime}</p>
-          <p>{util.humanFileSize @state.length}</p>
+        <p>{util.humanFileSize meta.length}</p>
         {
-            if not @state.downloaded
+          if not downloaded
             <button
               className="button-blue"
-                disabled={@state.downloading}
+              disabled={downloading}
-                onClick={@downloadFile}
+              onClick={downloadFile}
             >{
-                if not @state.downloading
+              if not downloading
                 "Download"
-                else if @state.decrypting
+              else if decrypting
                 "Decrypting"
               else
-                  util.progressText @state.progress
+                util.progressText progress
             }</button>
           else
             # Use an actual link here instead of triggering click
             # on a hidden link, because on some browsers it doesn't work
             <a
               className="button-blue"
-                href={@state.downloaded}
+              href={downloaded}
-                download={@state.name}
+              download={meta.name}
             >
               Save File
             </a>
         }{
           # In-browser previewing for certain file types
           # we can't just use this for all because it cannot handle file name
-            @state.downloaded and util.shouldShowInline(@state.mime) and
+          downloaded and util.shouldShowInline(meta.mime) and
             <a
               className="button-blue"
-                href={@state.downloaded}
+              href={downloaded}
               target="_blank"
             >
               Preview
@@ -128,5 +125,3 @@ class FileDecrypter extends React.Component
         </LinkButton>
       </div>
   }</div>
-
-export default FileDecrypter

src/web/hooks.coffee

@@ -50,21 +50,39 @@ export useDialog = ->
     useCallback(renderDialog, [dialogOpen, dialogMsg])
   ]
 
+# A hook to automatically store XHR progress in states
+export useXhrProgress = ->
+  [progressUp, setProgressUp] = useState 0
+  [progressDown, setProgressDown] = useState 0
+
+  progressHandler = (update) -> (e) ->
+    update e.loaded / e.total if e.lengthComputable
+
+  beginXHR = ->
+    setProgressUp 0
+    setProgressDown 0
+    xhr = new XMLHttpRequest()
+    xhr.addEventListener "progress", progressHandler setProgressDown
+    xhr.upload.addEventListener "progress", progressHandler setProgressUp
+    xhr
+
+  [
+    progressUp,
+    progressDown,
+    useCallback beginXHR, []
+  ]
+
 # Handles shared file-uploading logic between text / binary pasting
 export usePaste = (openDialog, callback) ->
   [pasting, setPasting] = useState false
-  [progress, setProgress] = useState 0
+  [progress, _, beginXHR] = useXhrProgress()
 
   doPaste = (name, mime, content, transformUrl) ->
     # Unfortunately we have to all resort to using XHR here
-    setProgress 0
     setPasting true
 
     # Build the XHR
-    xhr = new XMLHttpRequest()
+    xhr = beginXHR()
-    xhr.upload.addEventListener "progress", (e) ->
-      if e.lengthComputable
-        setProgress e.loaded / e.total
     xhr.addEventListener "readystatechange", ->
       if xhr.readyState == XMLHttpRequest.DONE
         setPasting false
@@ -87,11 +105,27 @@ export usePaste = (openDialog, callback) ->
   [
     # our paste only depends on *setting* states, no reading required
     # but all the callback it reads from its closure may change
-    useCallback(doPaste, [openDialog, callback]),
+    useCallback(doPaste, [openDialog, callback, beginXHR]),
     pasting,
     progress
   ]
 
+# Asynchronous useMemo
+# defVal is the value before the factory function completes
+# returns the current value, and if factory has not completed
+#   then return defVal.
+# Factory is only executed once
+export useAsyncMemo = (defVal, factory, deps) ->
+  [state, setState] = useState defVal
+
+  exec = ->
+    do ->
+      setState await factory()
+    return
+
+  useEffect exec, deps
+  state
+
 # An effect that fetches the original pasted content,
 # and then fires a callback that handles metadata and the response body
 # it also stores the meta into a state and returns it every time
@@ -99,8 +133,6 @@ export usePaste = (openDialog, callback) ->
 # and if callback is not present, then the response body
 # would simply be thrown away
 export useFetchContent = (id, callback) ->
-  [meta, setMeta] = useState null
-
   doFetch = ->
     resp = await fetch "/paste/#{id}?original"
     length = resp.headers.get 'content-length'
@@ -111,11 +143,10 @@ export useFetchContent = (id, callback) ->
       name: name
       mime: mime
       length: length
-    setMeta newMeta
     # We have to pass newMeta to callback because
     # the callback will not be aware of the meta update
     callback newMeta, resp if callback
+    return newMeta
 
-  # Run the effect once on mount
+  # Use async memo
-  useEffect doFetch, []
+  useAsyncMemo null, doFetch, []
-  meta