ui stuff

packages/siaviewnode-client/pages/index.tsx

@@ -7,9 +7,14 @@ import {
   Typography,
   CardActions,
   Button,
-  makeStyles
+  makeStyles,
+  AppBar,
+  Tabs,
+  Tab
 } from "@material-ui/core"
 import Dropzone from "../src/components/Dropzone"
+import { useState } from "react"
+import { TabPanel } from "../src/components/TabPanel"
 
 const useStyles = makeStyles({
   card: {
@@ -30,14 +35,18 @@ const useStyles = makeStyles({
 
 const Index = () => {
   const classes = useStyles({})
-  const bull = <span className={classes.bullet}>•</span>
+  const [value, setValue] = useState(0)
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue)
+  }
   return (
     <>
       <Box color="white">
         <Container>
           <Flex sx={{ alignItems: "center", height: 120 }}>
             <Box>
-              <Typography sx={{ fontWeight: 600 }}>Sia View Node</Typography>
+              <Typography sx={{ fontWeight: 500 }}>Sia View Node</Typography>
             </Box>
             <Box sx={{ ml: "auto" }}>
               <Button href="https://sia.tech/" target="_blank">
@@ -47,19 +56,35 @@ const Index = () => {
           </Flex>
         </Container>
       </Box>
-      <Container>
+      <Box>
-        <Card sx={{ width: "100%" }}>
+        <Container>
-          <CardContent>
+          <AppBar position="static">
-            <Typography
+            <Tabs
-              className={classes.title}
+              value={value}
-              color="textSecondary"
+              onChange={handleChange}
-              gutterBottom
+              aria-label="simple tabs example"
             >
-              Drop Your File Here:
+              <Tab label="Upload" />
-            </Typography>
+              <Tab label="Download" />
-            <Dropzone />
+            </Tabs>
-          </CardContent>
+          </AppBar>
-        </Card>
+        </Container>
+      </Box>
+      <Container>
+        <TabPanel value={value} index={0}>
+          <Card sx={{ width: "100%" }}>
+            <CardContent>
+              <Dropzone />
+            </CardContent>
+          </Card>
+        </TabPanel>
+      </Container>
+      <Container>
+        <TabPanel value={value} index={1}>
+          <Card sx={{ width: "100%" }}>
+            <CardContent></CardContent>
+          </Card>
+        </TabPanel>
       </Container>
     </>
   )

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

@@ -25,34 +25,23 @@ function MyDropzone() {
     acceptedFiles => {
       setLoading(true)
       const file = R.head(acceptedFiles)
-      const fd = new FormData(formRef.current)
+      const url = API_ENDPOINT + "/linkfile/upload"
-      const fileName = R.compose(splitFilename, pName)(file)
+      console.log("file is", file)
 
-      const url = API_ENDPOINT + "/siafile"
+      fetch(url, {
-
+        method: "POST",
-      // formRef.current.submit()
+        body: file
-
+      })
-      // fetch(url, {
+        .then(res => {
-      //   method: "POST",
+          return res.json()
-      //   body: fd,
+        })
-      //   credentials: "include"
+        .then(data => {
-      // })
+          console.log("WE OUT HERE BOYS", data)
-      //   .then(res => {
+        })
-      //     return res.headers
+        .catch(e => {
-      //   })
+          console.log("error is", e)
-      //   .then(headers => {
+          setLoading(false)
-      //     console.log("WE OUT HERE BOYS", document.cookie)
+        })
-      //     fetch(API_ENDPOINT + "/siafile/download", {
-      //       credentials: "include"
-      //     })
-      //       .then(res => res.blob())
-      //       .then(blob => saveAs(blob, fileName))
-      //     // saveAs(API_ENDPOINT + "/siafile/download", fileName)
-      //   })
-      //   .catch(e => {
-      //     console.log("error is", e)
-      //     setLoading(false)
-      //   })
     },
     [loading, setLoading, error, setError, formRef]
   )
@@ -62,18 +51,15 @@ function MyDropzone() {
   return (
     <Box>
       <Flex
+        {...getRootProps()}
         sx={{ height: 400, justifyContent: "center", alignItems: "center" }}
       >
-        <form
+        <input {...getInputProps()} />
-          id="hidden-form"
+        {isDragActive ? (
-          action={`${API_ENDPOINT}/siafile`}
+          <p>Drop file here ...</p>
-          method="POST"
+        ) : (
-          encType="multipart/form-data"
+          <p>Drag 'n' drop a file here, or click to select a file</p>
-          ref={formRef}
+        )}
-        >
-          <input type="file" name="file" ref={inputRef} />
-          <Button type="submit"> Download</Button>
-        </form>
       </Flex>
     </Box>
   )

packages/siaviewnode-server/src/main.ts

@@ -64,11 +64,8 @@ export class Server {
       })
     )
     this.app.post("/siafile", this.postSiaFile)
-    this.app.get("/siafile/download", this.downloadSiaFile)
   }
 
-  private async downloadSiaFile(req, res) {}
-
   private async postSiaFile(
     req: express.Request & any,
     res: express.Response