From 170ef360c13cf1fb7024487330676744cbc26ae4 Mon Sep 17 00:00:00 2001
From: Miguel Alatzar <migbot@users.noreply.github.com>
Date: Thu, 10 Dec 2020 16:08:13 -0700
Subject: [PATCH] Improve upload attachment error handling (#5026)

---
 app/components/post_draft/uploads/uploads.js | 66 ++++++++++++--------
 1 file changed, 40 insertions(+), 26 deletions(-)

diff --git a/app/components/post_draft/uploads/uploads.js b/app/components/post_draft/uploads/uploads.js
index 8033d8e79..3aece8996 100644
--- a/app/components/post_draft/uploads/uploads.js
+++ b/app/components/post_draft/uploads/uploads.js
@@ -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();
             }
         }
     }