ui stuff
This commit is contained in:
Eddie Wang
parent
f9d3d8b7f3
commit
7a85bcd4e0
|
|
@ -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>
|
||||
<Card sx={{ width: "100%" }}>
|
||||
<CardContent>
|
||||
<Typography
|
||||
className={classes.title}
|
||||
color="textSecondary"
|
||||
gutterBottom
|
||||
<Box>
|
||||
<Container>
|
||||
<AppBar position="static">
|
||||
<Tabs
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
aria-label="simple tabs example"
|
||||
>
|
||||
Drop Your File Here:
|
||||
</Typography>
|
||||
<Dropzone />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Tab label="Upload" />
|
||||
<Tab label="Download" />
|
||||
</Tabs>
|
||||
</AppBar>
|
||||
</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>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -25,34 +25,23 @@ function MyDropzone() {
|
|||
acceptedFiles => {
|
||||
setLoading(true)
|
||||
const file = R.head(acceptedFiles)
|
||||
const fd = new FormData(formRef.current)
|
||||
const fileName = R.compose(splitFilename, pName)(file)
|
||||
const url = API_ENDPOINT + "/linkfile/upload"
|
||||
console.log("file is", file)
|
||||
|
||||
const url = API_ENDPOINT + "/siafile"
|
||||
|
||||
// formRef.current.submit()
|
||||
|
||||
// fetch(url, {
|
||||
// method: "POST",
|
||||
// body: fd,
|
||||
// credentials: "include"
|
||||
// })
|
||||
// .then(res => {
|
||||
// return res.headers
|
||||
// })
|
||||
// .then(headers => {
|
||||
// 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)
|
||||
// })
|
||||
fetch(url, {
|
||||
method: "POST",
|
||||
body: file
|
||||
})
|
||||
.then(res => {
|
||||
return res.json()
|
||||
})
|
||||
.then(data => {
|
||||
console.log("WE OUT HERE BOYS", data)
|
||||
})
|
||||
.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
|
||||
id="hidden-form"
|
||||
action={`${API_ENDPOINT}/siafile`}
|
||||
method="POST"
|
||||
encType="multipart/form-data"
|
||||
ref={formRef}
|
||||
>
|
||||
<input type="file" name="file" ref={inputRef} />
|
||||
<Button type="submit"> Download</Button>
|
||||
</form>
|
||||
<input {...getInputProps()} />
|
||||
{isDragActive ? (
|
||||
<p>Drop file here ...</p>
|
||||
) : (
|
||||
<p>Drag 'n' drop a file here, or click to select a file</p>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Reference in New Issue