Merge branch 'PBI-9-read-diet-profile' into 'staging'

Handle null data for diet profile page

See merge request !51

src/components/core/EmptyDataPage/index.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import EmptyDataPage from '.';
+
+describe('EmptyDataPage', () => {
+  it('renders correctly', () => {
+    render(<EmptyDataPage text="No data" />);
+  });
+});

src/components/core/EmptyDataPage/index.tsx

+import React, { FC } from 'react';
+
+import { styles } from './styles';
+import { View } from 'react-native';
+import { Text, Icon } from 'react-native-elements';
+
+import { colors } from 'styles';
+
+interface Props {
+  text: string;
+}
+
+const EmptyDataPage: FC<Props> = ({ text }) => (
+  <View style={styles.center}>
+    <Icon
+      name="emoticon-sad-outline"
+      type="material-community"
+      size={75}
+      color={colors.danger}
+    />
+    <Text style={styles.noRecomText}>{text}</Text>
+  </View>
+);
+
+export default EmptyDataPage;

src/components/core/EmptyDataPage/styles.ts

+import { StyleSheet } from 'react-native';
+import { typography } from 'styles';
+
+export const styles = StyleSheet.create({
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 30,
+  },
+  noRecomText: {
+    ...typography.headingMedium,
+    textAlign: 'center',
+    marginTop: 10,
+  },
+});

src/hooks/useApi/index.ts

 import { useState, useEffect, useCallback } from 'react';
 import { ApiResponse, Response } from 'services/api';
 
-import { Toast } from 'components/core';
-
 const useApi = <T>(
   fetchApi: () => ApiResponse<T>,
 ): {
@@ -18,14 +16,6 @@ const useApi = <T>(
   useEffect(() => {
     const fetchData = async () => {
       const apiResponse = await fetchApiWrapper();
-      console.log(apiResponse);
-      if (!apiResponse.success) {
-        Toast.show({
-          type: 'error',
-          text1: 'Gagal memuat data',
-          text2: 'Terjadi kesalahan pada sisi kami.',
-        });
-      }
       setResponse({
         isLoading: false,
         ...apiResponse,

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

@@ -11,4 +11,14 @@ describe('ReadOnlyDietProfile', () => {
       routeParams: mockDietQuestionnaire,
     });
   });
+  it('shows "Klien belum mengisi diet questionnaire" text if no questionnaire answer is provided yet', () => {
+    const { getByText } = render(
+      <ReadOnlyDietProfile />,
+      ROUTES.clientProfileNutritionist,
+      {
+        routeParams: { id: null },
+      },
+    );
+    expect(getByText(/Klien belum mengisi diet questionnaire/i)).toBeTruthy();
+  });
 });

src/scenes/questionnaire/ReadOnlyDietProfile/index.tsx

@@ -11,6 +11,7 @@ import { pages } from './pages';
 import { useApi } from 'hooks';
 import { retrieveDietQuestionnaireByIdApi } from 'services/dietQuestionnaire';
 import { DietQuestionnaireResponse } from 'services/dietQuestionnaire/models';
+import EmptyDataPage from 'components/core/EmptyDataPage';
 
 interface QuestionnaireID {
   id: number;
@@ -24,6 +25,10 @@ const ReadOnlyDietProfile: FC = () => {
     retrieveDietQuestionnaireByIdApi(id),
   );
 
+  if (!id) {
+    return <EmptyDataPage text="Klien belum mengisi diet questionnaire" />;
+  }
+
   if (isLoading) {
     return <Loader />;
   }

src/scenes/questionnaire/ReadOnlyDietRecommendation/index.tsx

 import React, { FC } from 'react';
 import { ScrollView, View } from 'react-native';
-import { Text, Button, Icon } from 'react-native-elements';
+import { Text, Button } from 'react-native-elements';
 import { WebView } from 'react-native-webview';
 
 import { InfoCard, Loader } from 'components/core';
-import { layoutStyles, colors } from 'styles';
+import { layoutStyles } from 'styles';
 import { useDownloadFiles } from 'hooks';
 import { getAbsoluteUrl } from 'utils/format';
 
 import { styles } from './styles';
 import { Props } from './types';
+import EmptyDataPage from 'components/core/EmptyDataPage';
 
 const ReadOnlyDietRecommendation: FC<Props> = ({ children, data }) => {
   const { download, pdfViewUrl, fileName } = useDownloadFiles(
@@ -17,19 +18,7 @@ const ReadOnlyDietRecommendation: FC<Props> = ({ children, data }) => {
   );
 
   if (!data) {
-    return (
-      <View style={styles.center}>
-        <Icon
-          name="emoticon-sad-outline"
-          type="material-community"
-          size={75}
-          color={colors.danger}
-        />
-        <Text style={styles.noRecomText}>
-          Belum ada rekomendasi dari nutritionis
-        </Text>
-      </View>
-    );
+    return <EmptyDataPage text="Belum ada rekomendasi dari nutritionis" />;
   }
   return (
     <ScrollView contentContainerStyle={layoutStyles}>