Download de xlsx - Android (#33)

Co-authored-by: bianca-camargo-machado1 <[email protected]>

Author: biancacamargomachado

android/app/build.gradle

@@ -189,6 +189,7 @@ android {
 }
 
 dependencies {
+    implementation project(':rn-fetch-blob')
     implementation project(':react-native-camera')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.facebook.react:react-native:+"  // From node_modules

android/app/src/main/AndroidManifest.xml

@@ -1,11 +1,11 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.dtool">
 
-    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.INTERNET"/>
     <uses-permission android:name="android.permission.CAMERA"/>
     <uses-permission android:name="android.permission.RECORD_AUDIO"/>
-    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
-    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 
     <application
       android:name=".MainApplication"
@@ -23,6 +23,7 @@
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
+            <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
         </intent-filter>
       </activity>
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

android/app/src/main/java/com/dtool/MainApplication.java

@@ -4,6 +4,7 @@
 import androidx.multidex.MultiDexApplication;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.RNFetchBlob.RNFetchBlobPackage;
 import org.reactnative.camera.RNCameraPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'dTool'
+include ':rn-fetch-blob'
+project(':rn-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/rn-fetch-blob/android')
 include ':react-native-camera'
 project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

ios/Podfile

@@ -36,6 +36,8 @@ target 'dTool' do
 
   pod 'react-native-camera', :path => '../node_modules/react-native-camera'
 
+  pod 'rn-fetch-blob', :path => '../node_modules/rn-fetch-blob'
+
   target 'dToolTests' do
     inherit! :search_paths
     # Pods for testing

ios/dTool/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>

package-lock.json

@@ -28,19 +28,18 @@
     "react-native-device-info": "^5.6.0",
     "react-native-dotenv": "^0.2.0",
     "react-native-elements": "^2.0.0",
-    "react-native-fs": "^2.16.6",
     "react-native-gesture-handler": "^1.6.0",
     "react-native-material-dropdown": "^0.11.1",
     "react-native-material-kit": "^0.6.0-beta.1",
     "react-native-reanimated": "^1.7.1",
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.4.0",
-    "react-native-share": "^3.3.3",
     "react-native-svg": "^12.0.3",
     "react-native-svg-transformer": "^0.14.3",
     "react-native-vector-icons": "^6.6.0",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5",
+    "rn-fetch-blob": "^0.12.0",
     "rne-modal-tooltip": "gist:b28c003d87c619674def0878473338a0"
   },
   "devDependencies": {
@@ -51,6 +50,8 @@
     "@types/jest": "^24.9.1",
     "@types/react": "^16.9.25",
     "@types/react-native": "^0.60.25",
+    "@types/react-native-fetch-blob": "^0.10.5",
+    "@types/react-native-share": "^3.3.0",
     "@types/react-native-vector-icons": "^6.4.5",
     "@types/react-redux": "^7.1.9",
     "@types/react-test-renderer": "16.9.1",

package.json

@@ -1,7 +1,7 @@
 import { getUniqueId } from "react-native-device-info";
+import { PermissionsAndroid, YellowBox } from "react-native";
 import axios from "axios";
-import RNFS from "react-native-fs";
-import Share from "react-native-share";
+import RNFetchBlob from "rn-fetch-blob";
 import moment from "moment";
 import {
   clear,
@@ -16,6 +16,8 @@ import {
 import api from "./API";
 import { Permission, Reports } from "./types";
 
+YellowBox.ignoreWarnings(["Require cycle"]);
+
 /**
  * Coordena operações complexas da aplicação (principalmente aquelas relacionadas
  * ao fluxo online/offline), de forma a simplificar a implementação das telas do app.
@@ -206,29 +208,43 @@ const uploadExecutions = async (): Promise<void> => {
  * - `network`: erro de rede.
  */
 export const downloadReport = async (): Promise<void> => {
+  try {
+    await PermissionsAndroid.requestMultiple([
+      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
+      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
+    ]);
+  } catch (err) {
+    console.warn(err);
+  }
+
   await authenticate();
 
   try {
     const { code, token } = await getAuth();
     const url = `${api.defaults.baseURL}/reports/complete`;
     const filename = `Relatório dTool - ${code}.xlsx`;
-    const localFile = `${RNFS.DocumentDirectoryPath}/${filename}`;
-
-    const { promise } = RNFS.downloadFile({
-      fromUrl: url,
-      toFile: localFile,
-      headers: { Authorization: `Bearer ${token}` },
-    });
-
-    await promise;
-
-    await Share.open({
-      url: `file://${localFile}`,
-      title: `Salvar relatório do hospital`,
-      failOnCancel: false,
-    });
-
-    await RNFS.unlink(localFile);
+    const localFile = `${RNFetchBlob.fs.dirs.DownloadDir}/${filename}`;
+
+    RNFetchBlob.config({
+      addAndroidDownloads: {
+        useDownloadManager: true, // required
+        notification: true,
+        path: `file://${localFile}`,
+        mime:
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        description: "Relatório DTool.",
+      },
+    })
+      .fetch("GET", url, {
+        Authorization: `Bearer ${token}`,
+      })
+      .then((res) => {
+        // when response status code is 200
+        console.log("The file saved to ", res.path());
+      })
+      .catch((_errorMessage) => {
+        console.log(_errorMessage);
+      });
   } catch (error) {
     // invalid ID
     if (error.response?.status === 400) {