From 9eccae541276df5388bfc3a1a915cfed46ae23ad Mon Sep 17 00:00:00 2001
From: panoramix360 <lucasreis3000@gmail.com>
Date: Wed, 15 May 2024 20:22:30 -0300
Subject: [PATCH] feat: creates a hook for the file download and preview

---
 app/components/files/audio_file.tsx    | 111 +------------------
 app/components/files/document_file.tsx | 127 ++--------------------
 app/hooks/files.ts                     | 141 ++++++++++++++++++++++++-
 3 files changed, 149 insertions(+), 230 deletions(-)

diff --git a/app/components/files/audio_file.tsx b/app/components/files/audio_file.tsx
index 413516f1239..6cf9c4b8cb9 100644
--- a/app/components/files/audio_file.tsx
+++ b/app/components/files/audio_file.tsx
@@ -9,28 +9,17 @@ import {
     TouchableOpacity,
     Text,
 } from 'react-native';
-import FileViewer from 'react-native-file-viewer';
-import FileSystem from 'react-native-fs';
 import Video, {type OnLoadData, type OnProgressData} from 'react-native-video';
 
-import {DOWNLOAD_TIMEOUT} from '@constants/network';
-import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
-import NetworkManager from '@managers/network_manager';
-import {alertDownloadDocumentDisabled, alertDownloadFailed, alertFailedToOpenDocument} from '@utils/document';
-import {getFullErrorMessage, isErrorWithMessage} from '@utils/errors';
-import {fileExists, getLocalFilePathFromFile} from '@utils/file';
-import {emptyFunction} from '@utils/general';
-import {logDebug} from '@utils/log';
+import {useDownloadFileAndPreview} from '@hooks/files';
+import {alertDownloadDocumentDisabled} from '@utils/document';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
 import CompassIcon from '../compass_icon';
 import ProgressBar from '../progress_bar';
 
-import type {Client} from '@client/rest';
-import type {ClientResponse, ProgressPromise} from '@mattermost/react-native-network-client';
-
 type Props = {
     file: FileInfo;
     canDownloadFiles: boolean;
@@ -70,7 +59,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
 }));
 
 const AudioFile = ({file, canDownloadFiles}: Props) => {
-    const serverUrl = useServerUrl();
     const intl = useIntl();
     const theme = useTheme();
     const style = getStyleSheet(theme);
@@ -82,105 +70,19 @@ const AudioFile = ({file, canDownloadFiles}: Props) => {
 
     const source = useMemo(() => ({uri: file.uri}), [file.uri]);
 
-    const [preview, setPreview] = useState(false);
-    const [didCancel, setDidCancel] = useState(false);
-    const [downloading, setDownloading] = useState(false);
-    const [downloadProgress, setDownloadProgress] = useState(0);
-    let client: Client | undefined;
-    try {
-        client = NetworkManager.getClient(serverUrl);
-    } catch {
-        // do nothing
-    }
-    const downloadTask = useRef<ProgressPromise<ClientResponse>>();
+    const {toggleDownloadAndPreview} = useDownloadFileAndPreview();
 
     const onPlayPress = () => {
         setHasPaused(!hasPaused);
     };
 
-    const openDocument = () => {
-        if (!didCancel && !preview) {
-            const path = getLocalFilePathFromFile(serverUrl, file);
-            setPreview(true);
-            FileViewer.open(path!, {
-                displayName: file.name,
-                onDismiss: onDonePreviewingFile,
-                showOpenWithDialog: true,
-                showAppsSuggestions: true,
-            }).then(() => {
-                setDownloading(false);
-                setDownloadProgress(0);
-            }).catch(() => {
-                alertFailedToOpenDocument(file, intl);
-                onDonePreviewingFile();
-
-                if (path) {
-                    FileSystem.unlink(path).catch(emptyFunction);
-                }
-            });
-        }
-    };
-
-    const onDonePreviewingFile = () => {
-        setDownloadProgress(0);
-        setDownloading(false);
-        setPreview(false);
-    };
-
-    const cancelDownload = () => {
-        setDidCancel(true);
-        if (downloadTask.current?.cancel) {
-            downloadTask.current.cancel();
-        }
-    };
-
-    const downloadAndPreviewFile = async () => {
-        setDidCancel(false);
-        let path;
-
-        try {
-            path = getLocalFilePathFromFile(serverUrl, file);
-            const exists = await fileExists(path);
-            if (exists) {
-                openDocument();
-            } else {
-                setDownloading(true);
-                downloadTask.current = client?.apiClient.download(client?.getFileRoute(file.id!), path!.replace('file://', ''), {timeoutInterval: DOWNLOAD_TIMEOUT});
-                downloadTask.current?.progress?.(setDownloadProgress);
-
-                await downloadTask.current;
-                setDownloadProgress(1);
-                openDocument();
-            }
-        } catch (error) {
-            if (path) {
-                FileSystem.unlink(path).catch(emptyFunction);
-            }
-            setDownloading(false);
-            setDownloadProgress(0);
-
-            if (!isErrorWithMessage(error) || error.message !== 'cancelled') {
-                logDebug('error on downloadAndPreviewFile', getFullErrorMessage(error));
-                alertDownloadFailed(intl);
-            }
-        }
-    };
-
     const onDownloadPress = async () => {
         if (!canDownloadFiles) {
             alertDownloadDocumentDisabled(intl);
             return;
         }
 
-        if (downloading && progress < 1) {
-            cancelDownload();
-        } else if (downloading) {
-            setDownloadProgress(0);
-            setDidCancel(true);
-            setDownloading(false);
-        } else {
-            downloadAndPreviewFile();
-        }
+        toggleDownloadAndPreview(file);
     };
 
     const loadTimeInMinutes = throttle((timeInSeconds: number) => {
@@ -226,11 +128,6 @@ const AudioFile = ({file, canDownloadFiles}: Props) => {
                     size={24}
                     style={style.playIcon}
                 />
-
-                <ProgressBar
-                    progress={downloadProgress || 0.1}
-                    color={theme.buttonBg}
-                />
             </TouchableOpacity>
 
             <Video
diff --git a/app/components/files/document_file.tsx b/app/components/files/document_file.tsx
index 76ab3295ff9..9f66e7e13fa 100644
--- a/app/components/files/document_file.tsx
+++ b/app/components/files/document_file.tsx
@@ -1,29 +1,17 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {forwardRef, useImperativeHandle, useRef, useState} from 'react';
+import React, {forwardRef, useImperativeHandle} from 'react';
 import {useIntl} from 'react-intl';
-import {Platform, StatusBar, type StatusBarStyle, StyleSheet, TouchableOpacity, View} from 'react-native';
-import FileViewer from 'react-native-file-viewer';
-import FileSystem from 'react-native-fs';
-import tinyColor from 'tinycolor2';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
 
 import ProgressBar from '@components/progress_bar';
-import {DOWNLOAD_TIMEOUT} from '@constants/network';
-import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
-import NetworkManager from '@managers/network_manager';
-import {alertDownloadDocumentDisabled, alertDownloadFailed, alertFailedToOpenDocument} from '@utils/document';
-import {getFullErrorMessage, isErrorWithMessage} from '@utils/errors';
-import {fileExists, getLocalFilePathFromFile} from '@utils/file';
-import {emptyFunction} from '@utils/general';
-import {logDebug} from '@utils/log';
+import {useDownloadFileAndPreview} from '@hooks/files';
+import {alertDownloadDocumentDisabled} from '@utils/document';
 
 import FileIcon from './file_icon';
 
-import type {Client} from '@client/rest';
-import type {ClientResponse, ProgressPromise} from '@mattermost/react-native-network-client';
-
 export type DocumentFileRef = {
     handlePreviewPress: () => void;
 }
@@ -46,58 +34,9 @@ const styles = StyleSheet.create({
 
 const DocumentFile = forwardRef<DocumentFileRef, DocumentFileProps>(({backgroundColor, canDownloadFiles, file}: DocumentFileProps, ref) => {
     const intl = useIntl();
-    const serverUrl = useServerUrl();
     const theme = useTheme();
-    const [didCancel, setDidCancel] = useState(false);
-    const [downloading, setDownloading] = useState(false);
-    const [preview, setPreview] = useState(false);
-    const [progress, setProgress] = useState(0);
-    let client: Client | undefined;
-    try {
-        client = NetworkManager.getClient(serverUrl);
-    } catch {
-        // do nothing
-    }
-    const downloadTask = useRef<ProgressPromise<ClientResponse>>();
-
-    const cancelDownload = () => {
-        setDidCancel(true);
-        if (downloadTask.current?.cancel) {
-            downloadTask.current.cancel();
-        }
-    };
 
-    const downloadAndPreviewFile = async () => {
-        setDidCancel(false);
-        let path;
-
-        try {
-            path = getLocalFilePathFromFile(serverUrl, file);
-            const exists = await fileExists(path);
-            if (exists) {
-                openDocument();
-            } else {
-                setDownloading(true);
-                downloadTask.current = client?.apiClient.download(client?.getFileRoute(file.id!), path!.replace('file://', ''), {timeoutInterval: DOWNLOAD_TIMEOUT});
-                downloadTask.current?.progress?.(setProgress);
-
-                await downloadTask.current;
-                setProgress(1);
-                openDocument();
-            }
-        } catch (error) {
-            if (path) {
-                FileSystem.unlink(path).catch(emptyFunction);
-            }
-            setDownloading(false);
-            setProgress(0);
-
-            if (!isErrorWithMessage(error) || error.message !== 'cancelled') {
-                logDebug('error on downloadAndPreviewFile', getFullErrorMessage(error));
-                alertDownloadFailed(intl);
-            }
-        }
-    };
+    const {downloading, progress, toggleDownloadAndPreview} = useDownloadFileAndPreview();
 
     const handlePreviewPress = async () => {
         if (!canDownloadFiles) {
@@ -105,61 +44,7 @@ const DocumentFile = forwardRef<DocumentFileRef, DocumentFileProps>(({background
             return;
         }
 
-        if (downloading && progress < 1) {
-            cancelDownload();
-        } else if (downloading) {
-            setProgress(0);
-            setDidCancel(true);
-            setDownloading(false);
-        } else {
-            downloadAndPreviewFile();
-        }
-    };
-
-    const onDonePreviewingFile = () => {
-        setProgress(0);
-        setDownloading(false);
-        setPreview(false);
-        setStatusBarColor();
-    };
-
-    const openDocument = () => {
-        if (!didCancel && !preview) {
-            const path = getLocalFilePathFromFile(serverUrl, file);
-            setPreview(true);
-            setStatusBarColor('dark-content');
-            FileViewer.open(path!, {
-                displayName: file.name,
-                onDismiss: onDonePreviewingFile,
-                showOpenWithDialog: true,
-                showAppsSuggestions: true,
-            }).then(() => {
-                setDownloading(false);
-                setProgress(0);
-            }).catch(() => {
-                alertFailedToOpenDocument(file, intl);
-                onDonePreviewingFile();
-
-                if (path) {
-                    FileSystem.unlink(path).catch(emptyFunction);
-                }
-            });
-        }
-    };
-
-    const setStatusBarColor = (style: StatusBarStyle = 'light-content') => {
-        if (Platform.OS === 'ios') {
-            if (style) {
-                StatusBar.setBarStyle(style, true);
-            } else {
-                const headerColor = tinyColor(theme.sidebarHeaderBg);
-                let barStyle: StatusBarStyle = 'light-content';
-                if (headerColor.isLight() && Platform.OS === 'ios') {
-                    barStyle = 'dark-content';
-                }
-                StatusBar.setBarStyle(barStyle, true);
-            }
-        }
+        toggleDownloadAndPreview(file);
     };
 
     useImperativeHandle(ref, () => ({
diff --git a/app/hooks/files.ts b/app/hooks/files.ts
index 85131f6661b..5a42d8b6dd1 100644
--- a/app/hooks/files.ts
+++ b/app/hooks/files.ts
@@ -1,11 +1,26 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {useMemo} from 'react';
+import {useMemo, useRef, useState} from 'react';
+import {useIntl} from 'react-intl';
+import {Platform, StatusBar, type StatusBarStyle} from 'react-native';
+import FileViewer from 'react-native-file-viewer';
+import FileSystem from 'react-native-fs';
+import tinycolor from 'tinycolor2';
 
 import {buildFilePreviewUrl, buildFileUrl} from '@actions/remote/file';
+import {DOWNLOAD_TIMEOUT} from '@constants/network';
 import {useServerUrl} from '@context/server';
-import {isAudio, isGif, isImage, isVideo} from '@utils/file';
+import {useTheme} from '@context/theme';
+import NetworkManager from '@managers/network_manager';
+import {alertDownloadFailed, alertFailedToOpenDocument} from '@utils/document';
+import {getFullErrorMessage, isErrorWithMessage} from '@utils/errors';
+import {fileExists, getLocalFilePathFromFile, isAudio, isGif, isImage, isVideo} from '@utils/file';
+import {emptyFunction} from '@utils/general';
+import {logDebug} from '@utils/log';
+
+import type {Client} from '@client/rest';
+import type {ClientResponse, ProgressPromise} from '@mattermost/react-native-network-client';
 
 export const useImageAttachments = (filesInfo: FileInfo[], publicLinkEnabled: boolean) => {
     const serverUrl = useServerUrl();
@@ -36,3 +51,125 @@ export const useImageAttachments = (filesInfo: FileInfo[], publicLinkEnabled: bo
     }, [filesInfo, publicLinkEnabled]);
 };
 
+export const useDownloadFileAndPreview = () => {
+    const serverUrl = useServerUrl();
+    const intl = useIntl();
+    const theme = useTheme();
+    const downloadTask = useRef<ProgressPromise<ClientResponse>>();
+
+    const [progress, setProgress] = useState<number>(0);
+
+    const [preview, setPreview] = useState(false);
+    const [downloading, setDownloading] = useState(false);
+    const [didCancel, setDidCancel] = useState(false);
+
+    let client: Client | undefined;
+    try {
+        client = NetworkManager.getClient(serverUrl);
+    } catch {
+        // do nothing
+    }
+
+    const openFile = (file: FileInfo) => {
+        if (!didCancel && !preview) {
+            const path = getLocalFilePathFromFile(serverUrl, file);
+            setPreview(true);
+            setStatusBarColor('dark-content');
+            FileViewer.open(path!, {
+                displayName: file.name,
+                onDismiss: onDonePreviewingFile,
+                showOpenWithDialog: true,
+                showAppsSuggestions: true,
+            }).then(() => {
+                setDownloading(false);
+                setProgress(0);
+            }).catch(() => {
+                alertFailedToOpenDocument(file, intl);
+                onDonePreviewingFile();
+
+                if (path) {
+                    FileSystem.unlink(path).catch(emptyFunction);
+                }
+            });
+        }
+    };
+
+    const downloadAndPreviewFile = async (file: FileInfo) => {
+        setDidCancel(false);
+        let path;
+
+        try {
+            path = getLocalFilePathFromFile(serverUrl, file);
+            const exists = await fileExists(path);
+            if (exists) {
+                openFile(file);
+            } else {
+                setDownloading(true);
+                downloadTask.current = client?.apiClient.download(client?.getFileRoute(file.id!), path!.replace('file://', ''), {timeoutInterval: DOWNLOAD_TIMEOUT});
+                downloadTask.current?.progress?.(setProgress);
+
+                await downloadTask.current;
+                setProgress(1);
+                openFile(file);
+            }
+        } catch (error) {
+            if (path) {
+                FileSystem.unlink(path).catch(emptyFunction);
+            }
+            setDownloading(false);
+            setProgress(0);
+
+            if (!isErrorWithMessage(error) || error.message !== 'cancelled') {
+                logDebug('error on downloadAndPreviewFile', getFullErrorMessage(error));
+                alertDownloadFailed(intl);
+            }
+        }
+    };
+
+    const setStatusBarColor = (style: StatusBarStyle = 'light-content') => {
+        if (Platform.OS === 'ios') {
+            if (style) {
+                StatusBar.setBarStyle(style, true);
+            } else {
+                const headerColor = tinycolor(theme.sidebarHeaderBg);
+                let barStyle: StatusBarStyle = 'light-content';
+                if (headerColor.isLight() && Platform.OS === 'ios') {
+                    barStyle = 'dark-content';
+                }
+                StatusBar.setBarStyle(barStyle, true);
+            }
+        }
+    };
+
+    const toggleDownloadAndPreview = (file: FileInfo) => {
+        if (downloading && progress < 1) {
+            cancelDownload();
+        } else if (downloading) {
+            setProgress(0);
+            setDidCancel(true);
+            setDownloading(false);
+        } else {
+            downloadAndPreviewFile(file);
+        }
+    };
+
+    const cancelDownload = () => {
+        setDidCancel(true);
+        if (downloadTask.current?.cancel) {
+            downloadTask.current.cancel();
+        }
+    };
+
+    const onDonePreviewingFile = () => {
+        setProgress(0);
+        setDownloading(false);
+        setPreview(false);
+        setStatusBarColor();
+    };
+
+    return {
+        downloading,
+        progress,
+        toggleDownloadAndPreview,
+    };
+};