fix code editor

This commit is contained in:
Robby Klein 2020-02-13 18:51:37 -08:00
parent d883adc0ea
commit 35ce0632e9
2 changed files with 54 additions and 52 deletions

View File

@ -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;

View File

@ -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>
);
)
}
}