[REFACTOR] Fix download pdf bug in diet recommendation

src/hooks/useDownloadFiles/index.ts

@@ -28,7 +28,7 @@ const useDownloadFiles = (
         useDownloadManager: true,
         notification: true,
         mime: fileType,
-        title: 'Downloading ' + title + '...',
+        title: 'Mengunduh ' + title + '...',
         mediaScannable: true,
         path: dirs.DownloadDir + `/${fileName}`,
       },
@@ -42,7 +42,6 @@ const useDownloadFiles = (
     fileName,
     extension,
     download,
-    pdfViewUrl: `http://docs.google.com/gview?embedded=true&url=${url}`,
   };
 };
 

src/scenes/questionnaire/ReadOnlyDietRecommendation/index.test.tsx

@@ -10,6 +10,38 @@ describe('ReadOnlyDietRecommendation', () => {
     expect(getByText(/Belum ada rekomendasi/i)).toBeTruthy();
   });
 
+  it('shows default no input text if recommendation is not fully provided yet', () => {
+    const { getByText } = render(
+      <ReadOnlyDietRecommendation
+        data={{
+          id: 1,
+          nutritionist: 1,
+          client: 1,
+          client_plan_meal: null,
+          nutritional_advice: '',
+          lifestyle_advice: 'hai',
+        }}
+      />,
+    );
+    expect(getByText(/Belum ada nih, ditunggu yaa/i)).toBeTruthy();
+  });
+
+  it('shows default no input text if recommendation is not fully provided yet (2)', () => {
+    const { getByText } = render(
+      <ReadOnlyDietRecommendation
+        data={{
+          id: 1,
+          nutritionist: 1,
+          client: 1,
+          client_plan_meal: null,
+          nutritional_advice: 'bye',
+          lifestyle_advice: '',
+        }}
+      />,
+    );
+    expect(getByText(/-/i)).toBeTruthy();
+  });
+
   it('shows recommendation when provided', () => {
     const { getByText } = render(
       <ReadOnlyDietRecommendation data={mockDietRecommendation} />,

src/scenes/questionnaire/ReadOnlyDietRecommendation/index.tsx

 import React, { FC } from 'react';
 import { ScrollView, View } from 'react-native';
 import { Text, Button } from 'react-native-elements';
-import { WebView } from 'react-native-webview';
+import Pdf from 'react-native-pdf';
 
-import { InfoCard, Loader, EmptyDataPage } from 'components/core';
+import { InfoCard, EmptyDataPage } from 'components/core';
 import { layoutStyles } from 'styles';
 import { useDownloadFiles } from 'hooks';
+import { DietRecommendationResponse } from 'services/dietRecommendation/models';
+import { FileType } from 'hooks/useDownloadFiles/schema';
+import { API_BASE_URL } from 'env';
 
 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(
-    data?.client_plan_meal,
-    'diet recommendation',
+  const url = API_BASE_URL + data?.client_plan_meal;
+  const { download, fileName } = useDownloadFiles(
+    url,
+    'rencana makan',
     FileType.PDF,
   );
 
@@ -36,30 +38,30 @@ const ReadOnlyDietRecommendation: FC<Props> = ({ children, data }) => {
   return (
     <ScrollView contentContainerStyle={layoutStyles}>
       <Text style={styles.header}>Saran Gizi</Text>
-      <InfoCard content={data.nutritional_advice} />
+      <InfoCard content={data.nutritional_advice || '-'} />
       <Text style={[styles.header, styles.spacing]}>Saran Gaya Hidup</Text>
-      <InfoCard content={data.lifestyle_advice} />
+      <InfoCard content={data.lifestyle_advice || '-'} />
       <View style={styles.spacing}>
         <Text style={styles.header}>Rencana Menu dan Porsi Makan</Text>
       </View>
-      <WebView
-        source={{ uri: pdfViewUrl }}
-        style={styles.pdfView}
-        originWhitelist={['*']}
-        showsVerticalScrollIndicator={false}
-        renderLoading={Loader}
-      />
-      <Button
-        title={`Unduh ${fileName}`}
-        type="outline"
-        icon={{
-          name: 'file-download',
-        }}
-        iconRight
-        buttonStyle={styles.buttonStyle}
-        titleStyle={styles.titleStyle}
-        onPress={download}
-      />
+      {data?.client_plan_meal ? (
+        <View>
+          <Pdf source={{ uri: url, cache: true }} style={styles.pdfView} />
+          <Button
+            title={`Unduh ${fileName}`}
+            type="outline"
+            icon={{
+              name: 'file-download',
+            }}
+            iconRight
+            buttonStyle={styles.buttonStyle}
+            titleStyle={styles.titleStyle}
+            onPress={download}
+          />
+        </View>
+      ) : (
+        <InfoCard content="Belum ada nih, ditunggu yaa" />
+      )}
       {children}
     </ScrollView>
   );

src/scenes/questionnaire/ReadOnlyDietRecommendation/styles.ts

@@ -11,8 +11,8 @@ export const styles = StyleSheet.create({
     marginTop: 20,
   },
   pdfView: {
-    height: Dimensions.get('window').height * 0.6,
-    marginBottom: 10,
+    height: Dimensions.get('window').height * 0.75,
+    marginBottom: 8,
   },
   buttonStyle: {
     backgroundColor: colors.primaryYellow,

src/services/dietRecommendation/models.ts

 export interface DietRecommendationResponse {
   id: number;
-  client_plan_meal: string;
+  client_plan_meal: string | null;
   nutritional_advice: string;
   lifestyle_advice: string;
   nutritionist: number;