toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve upload attachment error handling (#5026)

Browse source
This commit is contained in:
Miguel Alatzar 2020-12-10 16:08:13 -07:00 committed by GitHub
parent b3796e162c
commit 170ef360c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
app/components/post_draft/uploads/uploads.js
View file

@ -27,6 +27,7 @@ import UploadItem from './upload_item';
const showFiles = {opacity: 1, height: 68};
const hideFiles = {opacity: 0, height: 0};
const showError = {height: 20};
const hideError = {height: 0};
export default class Uploads extends PureComponent {
@ -53,12 +54,14 @@ export default class Uploads extends PureComponent {
};
state = {
errorVisible: false,
fileSizeWarning: null,
showFileMaxWarning: false,
};
errorContainerRef = React.createRef();
containerRef = React.createRef();
hideErrorTimer = null;
componentDidMount() {
EventEmitter.on(MAX_FILE_COUNT_WARNING, this.handleFileMaxWarning);
@ -85,8 +88,14 @@ export default class Uploads extends PureComponent {
}
componentDidUpdate(prevProps) {
if (this.containerRef.current && this.props.files.length !== prevProps.files.length) {
this.showOrHideContainer();
if (this.props.files.length !== prevProps.files.length) {
if (this.containerRef.current) {
this.showOrHideContainer();
}
if (prevProps.files.length === MAX_FILE_COUNT && this.state.showFileMaxWarning) {
this.hideError();
}
}
}
@ -111,13 +120,12 @@ export default class Uploads extends PureComponent {
openGalleryAtIndex(index, files.filter((f) => !f.failed && !f.loading));
}
clearErrorsFromState = (delay) => {
setTimeout(() => {
this.setState({
showFileMaxWarning: false,
fileSizeWarning: null,
});
}, delay || 0);
clearErrorsFromState = () => {
this.setState({
errorVisible: false,
showFileMaxWarning: false,
fileSizeWarning: null,
});
}
handleAndroidBack = () => {
@ -132,10 +140,7 @@ export default class Uploads extends PureComponent {
handleFileMaxWarning = () => {
this.setState({showFileMaxWarning: true});
if (this.errorContainerRef.current) {
this.makeErrorVisible(true, 20);
setTimeout(() => {
this.makeErrorVisible(false, 20);
}, 5000);
this.showError();
}
};
@ -150,10 +155,7 @@ export default class Uploads extends PureComponent {
});
this.setState({fileSizeWarning: message});
this.makeErrorVisible(true, 20);
setTimeout(() => {
this.makeErrorVisible(false, 20);
}, 5000);
this.showError();
}
};
@ -200,10 +202,7 @@ export default class Uploads extends PureComponent {
});
this.setState({fileSizeWarning: message});
this.makeErrorVisible(true, 20);
setTimeout(() => {
this.makeErrorVisible(false, 20);
}, 5000);
this.showError();
}
};
@ -238,15 +237,30 @@ export default class Uploads extends PureComponent {
this.handleFileSizeWarning();
} else {
this.props.initUploadFiles(files, this.props.rootId);
this.hideError();
}
};
makeErrorVisible = (visible, height) => {
showError = () => {
if (this.hideErrorTimer) {
clearTimeout(this.hideErrorTimer);
}
this.makeErrorVisible(true);
this.hideErrorTimer = setTimeout(this.hideError, 5000);
}
hideError = () => this.makeErrorVisible(false);
makeErrorVisible = (visible) => {
if (this.errorContainerRef.current) {
if (visible) {
this.errorContainerRef.current.transition(hideError, {height}, 200, 'ease-out');
} else {
this.errorContainerRef.current.transition({height}, hideError, 200, 'ease-in');
if (visible && !this.state.errorVisible) {
this.setState({errorVisible: true});
this.errorContainerRef.current.transition(hideError, showError, 200, 'ease-out');
} else if (!visible && this.state.errorVisible) {
this.setState({errorVisible: false});
this.errorContainerRef.current.transition(showError, hideError, 200, 'ease-in');
this.clearErrorsFromState();
}
}
}