Commit 92d8beda authored by charlyjazz's avatar charlyjazz
Browse files

Optimize file re-render

parent 2994bfc6
import React, { Component } from 'react';
import DropFileInput from './components/DropFileInput'
import DropFileInput from './components/DropFileInput';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="App">
......
......@@ -56,13 +56,12 @@ function onReadError(ctx, message) {
...ctx.state.progress,
color: '#ff000073',
percent: 100
}
},
invalid: true
});
ctx.setState({invalid: true});
}
module.exports = {
readFileChunk,
onReadSuccess,
......
......@@ -25,9 +25,10 @@ export default class DropFileInput extends Component {
array_files.push(event.dataTransfer.files[i]);
}
this.setState({files: [...this.state.files, ...array_files]});
this.setState({uploading: false});
this.setState({
files: [...this.state.files, ...array_files],
uploading: false
});
};
toggleUpload = () => {
......@@ -36,13 +37,11 @@ export default class DropFileInput extends Component {
removeFile = (index) => {
this.setState( (prevState) => {
const files = [...prevState.files];
files.splice(index, 1);
return {
files: files
}
const newFiles = [
...prevState.files.slice(0, index),
...prevState.files.slice(index + 1)
]
return {files: newFiles}
});
};
......
import React, { Component } from 'react'
import { Line } from 'rc-progress'
import { readFileChunk, onReadSuccess, onReadError } from '../actions'
import io from '../helpers/io'
import React, { PureComponent } from 'react';
import { Line } from 'rc-progress';
import { readFileChunk, onReadSuccess, onReadError } from '../actions';
import io from '../helpers/io';
export default class File extends Component {
export default class File extends PureComponent {
constructor(props) {
super(props);
this.state = {
uploading: props.uploading,
done: false,
invalid: false,
server_filename: '',
......@@ -23,18 +21,17 @@ export default class File extends Component {
}
componentWillReceiveProps(nextProps) {
const that = this;
if (nextProps.uploading && !this.state.done && !this.state.invalid) {
io.emit('start-transfer', this.props.file.name, this.props.file.size, function(filename) {
io.emit('start-transfer', this.props.file.name, this.props.file.size, ((filename) => {
if (!filename) {
that.onReadError(); // The server rejected the transfer
this.onReadError(); // The server rejected the transfer
}
else {
that.setState({server_filename: filename}, () => {
that.uploadFile();
this.setState({server_filename: filename}, () => {
this.uploadFile();
});
}
}.bind(this.props.file));
}).bind(this.props.file));
}
}
......@@ -44,7 +41,6 @@ export default class File extends Component {
<span className="File-name">Name: {this.props.file.name}</span>
<span className="File-type">Type: {this.props.file.type || 'unknown'}</span>
<span className="File-type">Size: {this.props.file.size}</span>
{ !this.state.done &&
(<button className="File-button-remove" onClick={this.props.clickRemove}>Remove File</button>)
}
......
......@@ -2,7 +2,6 @@ var io = require('socket.io-client')('http://' + document.domain + ':' + locatio
io.on('connect', function() {
io.emit('connected');
console.log('connected')
});
export default io;
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment