From 9029794afa7944cb1e8779c13f111b150cb70840 Mon Sep 17 00:00:00 2001
From: Stephen Kiers <stephen@stephenkiers.com>
Date: Mon, 22 Jan 2018 07:04:43 -0700
Subject: [PATCH] Icu 599 - remove download animation on cancel (#1365)

* easier to read

* seperated promise from progress so cancelling works

* Remove loading bar immediately

* style fix
---
 .../file_attachment_document.js               | 14 +++---
 app/screens/image_preview/downloader.ios.js   | 49 +++++++++----------
 2 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/app/components/file_attachment_list/file_attachment_document.js b/app/components/file_attachment_list/file_attachment_document.js
index 7a87b00f7..a41595a8d 100644
--- a/app/components/file_attachment_list/file_attachment_document.js
+++ b/app/components/file_attachment_list/file_attachment_document.js
@@ -110,13 +110,13 @@ export default class FileAttachmentDocument extends PureComponent {
                 this.openDocument(file, 0);
             } else {
                 this.setState({downloading: true});
-                this.downloadTask = RNFetchBlob.config(options).fetch('GET', getFileUrl(file.id)).
-                    progress((received, total) => {
-                        const progress = (received / total) * 100;
-                        if (this.mounted) {
-                            this.setState({progress});
-                        }
-                    });
+                this.downloadTask = RNFetchBlob.config(options).fetch('GET', getFileUrl(file.id));
+                this.downloadTask.progress((received, total) => {
+                    const progress = (received / total) * 100;
+                    if (this.mounted) {
+                        this.setState({progress});
+                    }
+                });
 
                 await this.downloadTask;
                 if (this.mounted) {
diff --git a/app/screens/image_preview/downloader.ios.js b/app/screens/image_preview/downloader.ios.js
index 3b827ad3d..d558762b5 100644
--- a/app/screens/image_preview/downloader.ios.js
+++ b/app/screens/image_preview/downloader.ios.js
@@ -84,13 +84,6 @@ export default class Downloader extends PureComponent {
     }
 
     downloadDidCancel = () => {
-        if (this.mounted) {
-            this.setState({progress: 0, started: false, didCancel: false});
-        }
-        this.props.onDownloadCancel();
-    };
-
-    handleCancelDownload = () => {
         if (this.mounted) {
             this.setState({
                 didCancel: true,
@@ -98,12 +91,10 @@ export default class Downloader extends PureComponent {
                 started: false
             });
         }
-
         if (this.downloadTask) {
-            this.downloadTask.cancel(() => {
-                this.props.onDownloadCancel();
-            });
+            this.downloadTask.cancel();
         }
+        this.props.onDownloadCancel();
     };
 
     recenterDownloader = (props) => {
@@ -143,7 +134,7 @@ export default class Downloader extends PureComponent {
                     {!isVideo &&
                     <TouchableOpacity
                         style={styles.cancelButton}
-                        onPress={this.handleCancelDownload}
+                        onPress={this.downloadDidCancel}
                     >
                         <FormattedText
                             id='channel_modal.cancel'
@@ -227,7 +218,12 @@ export default class Downloader extends PureComponent {
     saveVideo = (videoPath) => {
         const {deviceHeight} = this.props;
         const top = (deviceHeight / 2) - 100;
-        this.setState({progress: 100, started: true, force: true, isVideo: true});
+        this.setState({
+            progress: 100,
+            started: true,
+            force: true,
+            isVideo: true
+        });
         Animated.spring(this.state.downloaderTop, {
             toValue: top,
             tension: 8,
@@ -296,14 +292,16 @@ export default class Downloader extends PureComponent {
                 options.appendExt = file.extension;
             }
 
-            this.downloadTask = RNFetchBlob.config(options).fetch('GET', imageUrl).
-                progress((received, total) => {
-                    const progress = (received / total) * 100;
-                    if (this.mounted) {
-                        this.setState({progress, started: true});
-                    }
-                });
-
+            this.downloadTask = RNFetchBlob.config(options).fetch('GET', imageUrl);
+            this.downloadTask.progress((received, total) => {
+                const progress = (received / total) * 100;
+                if (this.mounted) {
+                    this.setState({
+                        progress,
+                        started: true
+                    });
+                }
+            });
             const res = await this.downloadTask;
             let path = res.path();
 
@@ -364,13 +362,11 @@ export default class Downloader extends PureComponent {
 
     render() {
         const {show, downloadPath} = this.props;
-        if (!show && !this.state.force) {
+        if ((!show || this.state.didCancel) && !this.state.force) {
             return null;
         }
 
-        const {didCancel, progress, started} = this.state;
-
-        const trueProgress = didCancel ? 0 : progress;
+        const {progress, started} = this.state;
 
         const containerHeight = show ? '100%' : 0;
 
@@ -380,14 +376,13 @@ export default class Downloader extends PureComponent {
         } else {
             component = this.renderProgress;
         }
-
         return (
             <View style={[styles.container, {height: containerHeight}]}>
                 <AnimatedView style={[styles.downloader, {top: this.state.downloaderTop}]}>
                     <View style={styles.progressCircleContent}>
                         <AnimatedCircularProgress
                             size={120}
-                            fill={trueProgress}
+                            fill={progress}
                             width={4}
                             backgroundColor='rgba(255, 255, 255, 0.5)'
                             tintColor='white'