add loading symbol

packages/siaviewnode-client/src/components/Dropzone.tsx

@@ -1,58 +1,79 @@
 /** @jsx jsx */
 import * as R from "ramda"
-import { useCallback } from "react"
+import { useCallback, useState } from "react"
 import { useDropzone } from "react-dropzone"
 import { Box, Flex, jsx } from "theme-ui"
+import { CircularProgress } from "@material-ui/core"
 
 /**
  * nginx is setup to automatically handle and rewrite the url path.
  */
-const API_ENDPOINT = "/api"
+const API_ENDPOINT = "http://144.76.136.122/api"
 
 const pName = R.prop("name")
 
 const splitFilename = R.compose(R.head, R.split(".sia"))
 
 function MyDropzone() {
-  const onDrop = useCallback(acceptedFiles => {
+  const [loading, setLoading] = useState(false)
-    const file = R.head(acceptedFiles)
+  const [error, setError] = useState(null)
-    const fd = new FormData()
+  const onDrop = useCallback(
-    const fileName = R.compose(splitFilename, pName)(file)
+    acceptedFiles => {
-    console.log("filename", fileName)
+      setLoading(true)
-    fd.append("file", file)
+      const file = R.head(acceptedFiles)
-    if (window) {
+      const fd = new FormData()
-      const streamSaver = require("streamsaver")
+      const fileName = R.compose(splitFilename, pName)(file)
-      const url = API_ENDPOINT + "/siafile"
-      fetch(url, {
-        method: "POST",
-        body: fd,
-        headers: {
-          "Access-Control-Allow-Origin": "*"
-        }
-      }).then(res => {
-        const readableStream = res.body
-        const fileStream = streamSaver.createWriteStream(fileName)
 
-        // more optimized
+      fd.append("file", file)
-        if (window.WritableStream && readableStream.pipeTo) {
+      if (window) {
-          return readableStream
+        const streamSaver = require("streamsaver")
-            .pipeTo(fileStream)
+        const url = API_ENDPOINT + "/siafile"
-            .then(() => console.log("done writing"))
+        fetch(url, {
-        }
+          method: "POST",
-        ;(window as any).writer = fileStream.getWriter()
+          body: fd,
-        const reader = res.body.getReader()
+          headers: {
-        const pump = () =>
+            "Access-Control-Allow-Origin": "*"
-          reader
+          }
-            .read()
+        })
-            .then(res =>
+          .then(res => {
-              res.done
+            if (!res.ok) {
-                ? (window as any).writer.close()
+              setLoading(false)
-                : (window as any).writer.write(res.value).then(pump)
+              setError(res.status + " " + res.statusText)
-            )
+              return
-        pump()
+            }
-      })
+            const readableStream = res.body
-    }
+            const fileStream = streamSaver.createWriteStream(fileName)
-  }, [])
+
+            // more optimized
+            if (window.WritableStream && readableStream.pipeTo) {
+              return readableStream.pipeTo(fileStream).then(() => {
+                setLoading(false)
+                console.log("done writing")
+              })
+            }
+            ;(window as any).writer = fileStream.getWriter()
+            const reader = res.body.getReader()
+            const pump = () =>
+              reader
+                .read()
+                .then(res =>
+                  res.done
+                    ? (window as any).writer.close()
+                    : (window as any).writer.write(res.value).then(pump)
+                )
+                .catch(e => {
+                  setLoading(false)
+                })
+            pump()
+          })
+          .catch(e => {
+            setError(e)
+            setLoading(false)
+          })
+      }
+    },
+    [loading, setLoading, error, setError]
+  )
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
 
   return (
@@ -62,11 +83,15 @@ function MyDropzone() {
         sx={{ height: 400, justifyContent: "center", alignItems: "center" }}
       >
         <input {...getInputProps()} />
-        {isDragActive ? (
+        {error && error}
-          <p>Drop to 🚀 ...</p>
+        {!error &&
-        ) : (
+          (loading ? (
-          <p>Drag 'n' drop a Sia file here, or click to select a Sia file.</p>
+            <CircularProgress color="secondary" />
-        )}
+          ) : isDragActive ? (
+            <p>Drop to 🚀 ...</p>
+          ) : (
+            <p>Drag 'n' drop a Sia file here, or click to select a Sia file.</p>
+          ))}
       </Flex>
     </Box>
   )