initial linkfile impl

packages/siaviewnode-client/pages/index.tsx

@@ -10,43 +10,37 @@ import {
   makeStyles,
   AppBar,
   Tabs,
-  Tab
+  Tab,
+  Input
 } from "@material-ui/core"
 import Dropzone from "../src/components/Dropzone"
 import { useState } from "react"
 import { TabPanel } from "../src/components/TabPanel"
-
-const useStyles = makeStyles({
-  card: {
-    minWidth: 275
-  },
-  bullet: {
-    display: "inline-block",
-    margin: "0 2px",
-    transform: "scale(0.8)"
-  },
-  title: {
-    fontSize: 14
-  },
-  pos: {
-    marginBottom: 12
-  }
-})
+import * as R from "ramda"
 
 const Index = () => {
-  const classes = useStyles({})
-  const [value, setValue] = useState(0)
+  const [value, setValue] = useState(1)
+  const [linkfileUrl, setInput] = useState("")
 
   const handleChange = (event, newValue) => {
     setValue(newValue)
   }
+
+  const directView = () => {
+    const removeHead = R.compose(R.tail, R.split("sia://"))
+    const hash = removeHead(linkfileUrl)[0]
+    if (window) {
+      var win = window.open(`/direct/${hash}`, "_blank")
+      win.focus()
+    }
+  }
   return (
     <>
       <Box color="white">
         <Container>
           <Flex sx={{ alignItems: "center", height: 120 }}>
             <Box>
-              <Typography sx={{ fontWeight: 500 }}>Sia View Node</Typography>
+              <Typography sx={{ fontWeight: 700 }}>Sia Skynet</Typography>
             </Box>
             <Box sx={{ ml: "auto" }}>
               <Button href="https://sia.tech/" target="_blank">
@@ -82,7 +76,35 @@ const Index = () => {
       <Container>
         <TabPanel value={value} index={1}>
           <Card sx={{ width: "100%" }}>
-            <CardContent></CardContent>
+            <CardContent>
+              <Flex
+                sx={{
+                  height: 400,
+                  justifyContent: "center",
+                  alignItems: "center",
+                  flexDirection: "column"
+                }}
+              >
+                <p>Download a file by pasting in a Sia linkfile below:</p>
+                <Box sx={{ width: "60%" }}>
+                  <Input
+                    placeholder="sia://"
+                    value={linkfileUrl}
+                    onChange={e => setInput(e.target.value)}
+                    sx={{ width: "100%" }}
+                  />
+                </Box>
+                <Box sx={{ mt: 3 }}>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={directView}
+                  >
+                    Download
+                  </Button>
+                </Box>
+              </Flex>
+            </CardContent>
           </Card>
         </TabPanel>
       </Container>

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

@@ -18,49 +18,64 @@ const splitFilename = R.compose(R.head, R.split(".sia"))
 function MyDropzone() {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(null)
-  const formRef = useRef(null)
-  const inputRef = useRef(null)
+  const [link, setLink] = useState("")
 
   const onDrop = useCallback(
     acceptedFiles => {
       setLoading(true)
       const file = R.head(acceptedFiles)
       const url = API_ENDPOINT + "/linkfile/upload"
-      console.log("file is", file)
+      const fd = new FormData()
+      fd.append("file", file)
 
       fetch(url, {
         method: "POST",
-        body: file
+        body: fd,
+        mode: "cors"
       })
         .then(res => {
           return res.json()
         })
-        .then(data => {
-          console.log("WE OUT HERE BOYS", data)
+        .then(({ sialink }) => {
+          console.log("WE OUT HERE BOYS", sialink)
+          setLink(sialink)
+          setLoading(false)
         })
         .catch(e => {
-          console.log("error is", e)
+          console.log("Upload error:", e)
+          setError("An unexpected error occured. Check console for details.")
           setLoading(false)
         })
     },
-    [loading, setLoading, error, setError, formRef]
+    [loading, setLoading, error, setError]
   )
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
 
   return (
     <Box>
-      <Flex
-        {...getRootProps()}
-        sx={{ height: 400, justifyContent: "center", alignItems: "center" }}
-      >
-        <input {...getInputProps()} />
-        {isDragActive ? (
-          <p>Drop file here ...</p>
-        ) : (
-          <p>Drag 'n' drop a file here, or click to select a file</p>
-        )}
-      </Flex>
+      {link ? (
+        <Flex
+          sx={{ height: 400, justifyContent: "center", alignItems: "center" }}
+        >
+          <h5>{link}</h5>
+        </Flex>
+      ) : (
+        <Flex
+          {...getRootProps()}
+          sx={{ height: 400, justifyContent: "center", alignItems: "center" }}
+        >
+          <input {...getInputProps()} />
+          {isDragActive && !loading && !error && !link && (
+            <p>Drop file here ...</p>
+          )}
+          {!isDragActive && !loading && !error && !link && (
+            <p>Drag 'n' drop a file here, or click to select a file</p>
+          )}
+          {loading && <CircularProgress />}
+          {error && !loading && <h5>{error}</h5>}
+        </Flex>
+      )}
     </Box>
   )
 }

packages/siaviewnode-server/src/main.ts

@@ -59,7 +59,7 @@ export class Server {
   private setRoutes = (): void => {
     this.app.use(
       cors({
-        origin: "http://localhost:*",
+        origin: "*",
         credentials: true
       })
     )
@@ -71,7 +71,7 @@ export class Server {
     // siafile
     this.app.post("/siafile", this.postSiaFile)
     // linkfile
-    this.app.post("/linkfile", this.handleLinkUpload)
+    this.app.post("/linkfile/upload", this.handleLinkUpload)
   }
 
   private async handleLinkUpload(
@@ -98,7 +98,7 @@ export class Server {
       console.log("data is ", data)
       return res.send(data)
     } catch (err) {
-      console.log("err", err)
+      console.log("err", err.message)
       return res.sendStatus(500)
     }
   }