fix code editor
This commit is contained in:
Robby Klein
parent
d883adc0ea
commit
35ce0632e9
|
|
@ -18,6 +18,11 @@
|
|||
background-color: #343734;
|
||||
transition: 0.2s line-height, 0.2s background-color, 0.2s color;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
|
||||
@media (min-width: 360px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: $largebp) {
|
||||
padding: 0 32px;
|
||||
|
|
|
|||
|
|
@ -1,33 +1,33 @@
|
|||
import React, { Component } from "react";
|
||||
import classNames from "classnames";
|
||||
import Dropzone from "react-dropzone";
|
||||
import Reveal from "react-reveal/Reveal";
|
||||
import React, { Component } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import Dropzone from 'react-dropzone'
|
||||
import Reveal from 'react-reveal/Reveal'
|
||||
|
||||
import { Button, UploadFile } from "../";
|
||||
import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
|
||||
import "./HomeUpload.scss";
|
||||
import { Button, UploadFile } from '../'
|
||||
import { Deco3, Deco4, Deco5, Folder, DownArrow } from '../../svg'
|
||||
import './HomeUpload.scss'
|
||||
|
||||
export default class HomeUpload extends Component {
|
||||
state = { files: [] };
|
||||
state = { files: [] }
|
||||
|
||||
handleDrop = async acceptedFiles => {
|
||||
this.setState({
|
||||
files: [
|
||||
...acceptedFiles.map(file => {
|
||||
return { file, status: "uploading" };
|
||||
return { file, status: 'uploading' }
|
||||
}),
|
||||
...this.state.files
|
||||
]
|
||||
});
|
||||
...this.state.files,
|
||||
],
|
||||
})
|
||||
|
||||
acceptedFiles.forEach(async file => {
|
||||
const url = `/api/skyfile?filename=${file.name}`;
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
const url = `/api/skyfile?filename=${file.name}`
|
||||
const fd = new FormData()
|
||||
fd.append('file', file)
|
||||
|
||||
const onComplete = (status, skylink) => {
|
||||
this.setState(state => {
|
||||
const index = state.files.findIndex(f => f.file === file);
|
||||
const index = state.files.findIndex(f => f.file === file)
|
||||
|
||||
return {
|
||||
files: [
|
||||
|
|
@ -35,36 +35,36 @@ export default class HomeUpload extends Component {
|
|||
{
|
||||
...state.files[index],
|
||||
status,
|
||||
url: `https://siasky.net/${skylink}`
|
||||
url: `https://siasky.net/${skylink}`,
|
||||
},
|
||||
...state.files.slice(index + 1)
|
||||
]
|
||||
};
|
||||
});
|
||||
};
|
||||
...state.files.slice(index + 1),
|
||||
],
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: "POST",
|
||||
method: 'POST',
|
||||
body: fd,
|
||||
mode: "cors"
|
||||
});
|
||||
const { skylink } = await response.json();
|
||||
mode: 'cors',
|
||||
})
|
||||
const { skylink } = await response.json()
|
||||
|
||||
onComplete("complete", skylink);
|
||||
onComplete('complete', skylink)
|
||||
} catch (error) {
|
||||
onComplete("error");
|
||||
onComplete('error')
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
handleSkylink = (event) => {
|
||||
event.preventDefault();
|
||||
handleSkylink = event => {
|
||||
event.preventDefault()
|
||||
|
||||
const skylink = event.target.skylink.value.replace('sia://', '');
|
||||
const skylink = event.target.skylink.value.replace('sia://', '')
|
||||
|
||||
if(skylink.match(/^[a-zA-Z0-9_-]{46}$/)) {
|
||||
window.open(`/${event.target.skylink.value}`, '_blank');
|
||||
if (skylink.match(/^[a-zA-Z0-9_-]{46}$/)) {
|
||||
window.open(`/${event.target.skylink.value}`, '_blank')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,14 +75,12 @@ export default class HomeUpload extends Component {
|
|||
<div className="home-upload-white fadeInUp delay4">
|
||||
<div className="home-upload-split">
|
||||
<div className="home-upload-box ">
|
||||
<Dropzone
|
||||
onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}
|
||||
>
|
||||
<Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
|
||||
{({ getRootProps, getInputProps, isDragActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={classNames("home-upload-dropzone", {
|
||||
"drop-active": isDragActive
|
||||
className={classNames('home-upload-dropzone', {
|
||||
'drop-active': isDragActive,
|
||||
})}
|
||||
{...getRootProps()}
|
||||
>
|
||||
|
|
@ -99,14 +97,6 @@ export default class HomeUpload extends Component {
|
|||
</>
|
||||
)}
|
||||
</Dropzone>
|
||||
|
||||
{this.state.files.length > 0 && (
|
||||
<div className="home-uploaded-files">
|
||||
{this.state.files.map((file, i) => {
|
||||
return <UploadFile key={i} {...file} />;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="home-upload-retrieve">
|
||||
|
|
@ -123,12 +113,19 @@ export default class HomeUpload extends Component {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{this.state.files.length > 0 && (
|
||||
<div className="home-uploaded-files">
|
||||
{this.state.files.map((file, i) => {
|
||||
return <UploadFile key={i} {...file} />
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="bottom-text fadeInUp delay5">
|
||||
Once a file has been uploaded, a 46 byte link called a 'Skylink' is
|
||||
generated. That link can then be shared with anyone to fetch the
|
||||
file from Skynet.
|
||||
Once a file has been uploaded, a 46 byte link called a 'Skylink' is generated. That link can then be shared
|
||||
with anyone to fetch the file from Skynet.
|
||||
</p>
|
||||
|
||||
<Deco3 className="deco-3 fadeInUp delay6" />
|
||||
|
|
@ -136,6 +133,6 @@ export default class HomeUpload extends Component {
|
|||
<Deco5 className="deco-5 fadeInUp delay6" />
|
||||
</div>
|
||||
</Reveal>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue