Fix useDownloadFiles hook and integrate with download button

android/app/src/main/AndroidManifest.xml

@@ -5,6 +5,7 @@
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.DOWNLOAD_WITH_NOTIFICATION" />
 
     <application
       android:name=".MainApplication"

src/__mocks__/rn-fetch-blob.ts

+jest.mock('rn-fetch-blob', () => {
+  return {
+    DocumentDir: () => {},
+    fetch: () => {},
+    base64: () => {},
+    android: () => {},
+    ios: () => {},
+    config: () => {},
+    session: () => {},
+    fs: () => {},
+    wrap: () => {},
+    polyfill: () => {},
+    JSONStream: () => {},
+  };
+});
+
+export {};

src/components/core/ClientList/index.tsx

@@ -10,6 +10,7 @@ import { getAbsoluteUrl } from 'utils/format';
 import { BigButton, Loader, EmptyDataPage } from 'components/core';
 import { Section } from 'components/layout';
 import { UserRole } from 'services/auth/models';
+import { FileType } from 'hooks/useDownloadFiles/schema';
 
 interface Props {
   role: string;
@@ -26,7 +27,12 @@ const ClientList: FC<Props> = ({
 }) => {
   const navigation = useNavigation();
   const { isLoading, data: clients = [] } = useApi(retrieveClientListApi);
-  const { download } = useDownloadFiles(getAbsoluteUrl('exportcsv'));
+  const { download } = useDownloadFiles(
+    getAbsoluteUrl('/exportcsv'),
+    'client list CSV',
+    FileType.CSV,
+    'export.csv',
+  );
   const [searchedText, setSearchedText] = useState('');
 
   const updateSearch = (search: string) => {
@@ -64,6 +70,7 @@ const ClientList: FC<Props> = ({
               onPressClientProfile={() => {
                 navigation.navigate(clientProfileRoute, {
                   id: client.diet_questionnaire_id,
+                  id_recommendation: client.diet_recommendation_id,
                   role: role,
                 });
               }}

src/hooks/useDownloadFiles/index.ts

-import { downloadFile, DocumentDirectoryPath } from 'react-native-fs';
-import { Toast } from 'components/core';
 import { PermissionsAndroid } from 'react-native';
+import RNFetchBlob from 'rn-fetch-blob';
+import { FileType } from './schema';
 
-const useDownloadFiles = (url = '') => {
-  const fileName = url.split('/').pop();
+const useDownloadFiles = (
+  url = '',
+  title = '',
+  fileType: FileType,
+  fileTitle?: string,
+) => {
+  const fileName = fileTitle ? fileTitle : url.split('/').pop();
   const extension = fileName?.split('.').pop()?.toUpperCase() || '-';
 
   const askWritePermission = async () =>
@@ -17,36 +22,20 @@ const useDownloadFiles = (url = '') => {
       return;
     }
 
-    const path = `${DocumentDirectoryPath}/${fileName}`;
-    const response = await downloadFile({
-      fromUrl: url,
-      toFile: path,
-    });
-    return response.promise
-      .then((res) => {
-        if (res.statusCode === 200 && res.bytesWritten > 0) {
-          Toast.show({
-            type: 'success',
-            text1: `${extension} berhasil diunduh.`,
-            text2: `Silakan lihat file ${fileName} dalam penyimpanan HP Anda.`,
-          });
-          return {
-            success: true,
-            data: `file://${path}`,
-          };
-        } else {
-          Toast.show({
-            type: 'error',
-            text1: `${extension} gagal diunduh.`,
-            text2: 'Terjadi kesalahan pada sisi kami.',
-          });
-          return {
-            success: false,
-            error: res,
-          };
-        }
-      })
-      .catch(console.log);
+    const dirs = RNFetchBlob.fs.dirs;
+    RNFetchBlob.config({
+      addAndroidDownloads: {
+        useDownloadManager: true,
+        notification: true,
+        mime: fileType,
+        title: 'Downloading ' + title + '...',
+        mediaScannable: true,
+        path: dirs.DownloadDir + `/${fileName}`,
+      },
+    })
+      .fetch('GET', url)
+      .then((res) => res.path())
+      .catch((err) => console.log(err));
   };
 
   return {

src/hooks/useDownloadFiles/schema.ts

+export enum FileType {
+  PDF = 'application/pdf',
+  CSV = 'text/csv',
+}

src/scenes/profile/ClientDietRecommendationForAdmin/index.tsx

@@ -18,6 +18,7 @@ const ClientDietRecommendationForAdmin: FC = () => {
   if (isLoading) {
     return <Loader />;
   }
+
   return <ReadOnlyDietRecommendation data={data} />;
 };
 

src/scenes/questionnaire/ReadOnlyDietProfile/index.tsx

@@ -21,6 +21,7 @@ import { UserRole } from 'services/auth/models';
 
 interface ParamsDietProfile {
   id: number;
+  id_recommendation: number;
   role: string;
 }
 
@@ -28,7 +29,7 @@ const ReadOnlyDietProfile: FC = () => {
   const navigation = useNavigation();
   const [activeSlide, setActiveSlide] = useState(0);
   const route = useRoute();
-  const { id, role } = route.params as ParamsDietProfile;
+  const { id, id_recommendation, role } = route.params as ParamsDietProfile;
   const { isLoading, data } = useApi(() =>
     retrieveDietQuestionnaireByIdApi(id),
   );
@@ -64,7 +65,7 @@ const ReadOnlyDietProfile: FC = () => {
           onPress={() =>
             navigation.navigate(ROUTES.profileDietRecommendation, {
               name: dataDQR.user.name,
-              id: id,
+              id: id_recommendation,
             })
           }
         />
@@ -74,7 +75,7 @@ const ReadOnlyDietProfile: FC = () => {
           onPress={() =>
             navigation.navigate(ROUTES.clientDietRecommendation, {
               name: dataDQR.user.name,
-              id: id,
+              id: id_recommendation,
             })
           }
         />

src/scenes/questionnaire/ReadOnlyDietRecommendation/index.tsx

@@ -6,15 +6,17 @@ import { WebView } from 'react-native-webview';
 import { InfoCard, Loader, EmptyDataPage } from 'components/core';
 import { layoutStyles } from 'styles';
 import { useDownloadFiles } from 'hooks';
-import { getAbsoluteUrl } from 'utils/format';
 
 import { styles } from './styles';
 import { Props } from './types';
 import { DietRecommendationResponse } from 'services/dietRecommendation/models';
+import { FileType } from 'hooks/useDownloadFiles/schema';
 
 const ReadOnlyDietRecommendation: FC<Props> = ({ children, data }) => {
   const { download, pdfViewUrl, fileName } = useDownloadFiles(
-    getAbsoluteUrl(data?.client_plan_meal),
+    data?.client_plan_meal,
+    'diet recommendation',
+    FileType.PDF,
   );
 
   const hasValues = (obj: DietRecommendationResponse) =>