Merge pull request #8 from NebulousLabs/robbys3

fix code editor
This commit is contained in:
Karol Wypchło 2020-02-13 22:40:11 -05:00 committed by GitHub
commit f98af5aae4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 52 deletions

View File

@ -18,6 +18,11 @@
background-color: #343734; background-color: #343734;
transition: 0.2s line-height, 0.2s background-color, 0.2s color; transition: 0.2s line-height, 0.2s background-color, 0.2s color;
text-align: center; text-align: center;
font-size: 14px;
@media (min-width: 360px) {
font-size: 16px;
}
@media (min-width: $largebp) { @media (min-width: $largebp) {
padding: 0 32px; padding: 0 32px;

View File

@ -1,33 +1,33 @@
import React, { Component } from "react"; import React, { Component } from 'react'
import classNames from "classnames"; import classNames from 'classnames'
import Dropzone from "react-dropzone"; import Dropzone from 'react-dropzone'
import Reveal from "react-reveal/Reveal"; import Reveal from 'react-reveal/Reveal'
import { Button, UploadFile } from "../"; import { Button, UploadFile } from '../'
import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg"; import { Deco3, Deco4, Deco5, Folder, DownArrow } from '../../svg'
import "./HomeUpload.scss"; import './HomeUpload.scss'
export default class HomeUpload extends Component { export default class HomeUpload extends Component {
state = { files: [] }; state = { files: [] }
handleDrop = async acceptedFiles => { handleDrop = async acceptedFiles => {
this.setState({ this.setState({
files: [ files: [
...acceptedFiles.map(file => { ...acceptedFiles.map(file => {
return { file, status: "uploading" }; return { file, status: 'uploading' }
}), }),
...this.state.files ...this.state.files,
] ],
}); })
acceptedFiles.forEach(async file => { acceptedFiles.forEach(async file => {
const url = `/api/skyfile?filename=${file.name}`; const url = `/api/skyfile?filename=${file.name}`
const fd = new FormData(); const fd = new FormData()
fd.append("file", file); fd.append('file', file)
const onComplete = (status, skylink) => { const onComplete = (status, skylink) => {
this.setState(state => { this.setState(state => {
const index = state.files.findIndex(f => f.file === file); const index = state.files.findIndex(f => f.file === file)
return { return {
files: [ files: [
@ -35,36 +35,36 @@ export default class HomeUpload extends Component {
{ {
...state.files[index], ...state.files[index],
status, status,
url: `https://siasky.net/${skylink}` url: `https://siasky.net/${skylink}`,
}, },
...state.files.slice(index + 1) ...state.files.slice(index + 1),
] ],
}; }
}); })
}; }
try { try {
const response = await fetch(url, { const response = await fetch(url, {
method: "POST", method: 'POST',
body: fd, body: fd,
mode: "cors" mode: 'cors',
}); })
const { skylink } = await response.json(); const { skylink } = await response.json()
onComplete("complete", skylink); onComplete('complete', skylink)
} catch (error) { } catch (error) {
onComplete("error"); onComplete('error')
} }
}); })
}; }
handleSkylink = (event) => { handleSkylink = event => {
event.preventDefault(); 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}$/)) { if (skylink.match(/^[a-zA-Z0-9_-]{46}$/)) {
window.open(`/${event.target.skylink.value}`, '_blank'); 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-white fadeInUp delay4">
<div className="home-upload-split"> <div className="home-upload-split">
<div className="home-upload-box "> <div className="home-upload-box ">
<Dropzone <Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}
>
{({ getRootProps, getInputProps, isDragActive }) => ( {({ getRootProps, getInputProps, isDragActive }) => (
<> <>
<div <div
className={classNames("home-upload-dropzone", { className={classNames('home-upload-dropzone', {
"drop-active": isDragActive 'drop-active': isDragActive,
})} })}
{...getRootProps()} {...getRootProps()}
> >
@ -99,14 +97,6 @@ export default class HomeUpload extends Component {
</> </>
)} )}
</Dropzone> </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>
<div className="home-upload-retrieve"> <div className="home-upload-retrieve">
@ -123,12 +113,19 @@ export default class HomeUpload extends Component {
</div> </div>
</div> </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> </div>
<p className="bottom-text fadeInUp delay5"> <p className="bottom-text fadeInUp delay5">
Once a file has been uploaded, a 46 byte link called a 'Skylink' is Once a file has been uploaded, a 46 byte link called a 'Skylink' is generated. That link can then be shared
generated. That link can then be shared with anyone to fetch the with anyone to fetch the file from Skynet.
file from Skynet.
</p> </p>
<Deco3 className="deco-3 fadeInUp delay6" /> <Deco3 className="deco-3 fadeInUp delay6" />
@ -136,6 +133,6 @@ export default class HomeUpload extends Component {
<Deco5 className="deco-5 fadeInUp delay6" /> <Deco5 className="deco-5 fadeInUp delay6" />
</div> </div>
</Reveal> </Reveal>
); )
} }
} }