Change chat and diet report button icon

assets/images/diet_report.svg

-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.75 0V3.5H12.25L8.75 0Z" fill="black"/>
-<path d="M8.75 4.375C8.26788 4.375 7.875 3.98213 7.875 3.5V0H2.625C2.14288 0 1.75 0.392875 1.75 0.875V13.125C1.75 13.608 2.14288 14 2.625 14H11.375C11.858 14 12.25 13.608 12.25 13.125V4.375H8.75ZM5.25 12.25H3.5V9.625H5.25V12.25ZM7.875 12.25H6.125V7.875H7.875V12.25ZM10.5 12.25H8.75V6.125H10.5V12.25Z" fill="black"/>
-</svg>

assets/images/index.ts

@@ -5,6 +5,3 @@ export const default_nutritionist = require('./default_nutritionist.png');
 
 export const googleLogo = require('./google_logo.png');
 export const dietelaLogo = require('./dietela_logo.png');
-
-export const diet_report = require('./diet_report.png');
-export const chat = require('./chat.png');

src/components/core/index.ts

@@ -8,3 +8,4 @@ export { default as ResultCard } from './ResultCard';
 export { default as Statistic } from './Statistic';
 export { default as Toast } from 'react-native-toast-message';
 export { default as WizardContainer } from './WizardContainer';
+export { default as EmptyDataPage } from './EmptyDataPage';

src/scenes/nutritionist/ClientListNutritionist/components/ChatButton/index.tsx

 import React, { FC } from 'react';
-import { TouchableOpacity, Text, Image } from 'react-native';
-import { chat } from 'assets/images';
+import { TouchableOpacity, Text } from 'react-native';
 
 import { styles } from './styles';
 import { Props } from './types';
 import { typographyStyles } from 'styles';
+import { Icon } from 'react-native-elements';
 
 const ChatButton: FC<Props> = ({ onPress, testID }) => (
   <TouchableOpacity
     onPress={onPress}
     testID={testID}
     style={styles.containerStyle}>
-    <Image source={chat} style={styles.img} />
+    <Icon style={styles.img} name="chatbox-ellipses-outline" type="ionicon" />
     <Text style={[typographyStyles.bodyMedium, styles.titleStyle]}>Chat</Text>
   </TouchableOpacity>
 );

src/scenes/nutritionist/ClientListNutritionist/components/ChatButton/styles.ts

@@ -13,11 +13,9 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    width: 160,
   },
   img: {
-    width: 20,
-    height: 20,
-    marginRight: 10,
-    marginLeft: -5,
+    marginRight: 5,
   },
 });

src/scenes/nutritionist/ClientListNutritionist/components/ClientCardNutritionist/index.tsx

@@ -7,6 +7,7 @@ import { typographyStyles } from 'styles';
 import { styles } from './styles';
 import { Props } from './types';
 import DietReportButton from '../DietReportButton';
+import DietProfileButton from '../DietProfileButton';
 import ChatButton from '../ChatButton';
 
 const ClientCardNutritionist: FC<Props> = ({
@@ -18,11 +19,7 @@ const ClientCardNutritionist: FC<Props> = ({
   return (
     <View style={styles.cardContainer}>
       <Text
-        style={[
-          typographyStyles.headingMedium,
-          styles.spacing,
-          styles.clickableText,
-        ]}
+        style={[typographyStyles.headingMedium, styles.spacing]}
         onPress={onPressClientProfile}>
         {clientName}
       </Text>
@@ -30,7 +27,13 @@ const ClientCardNutritionist: FC<Props> = ({
         onPress={onPressClientDietReport}
         testID="dietReportButton"
       />
-      <ChatButton onPress={onPressClientChat} testID="chatButton" />
+      <View style={styles.buttonsContainer}>
+        <DietProfileButton
+          onPress={onPressClientProfile}
+          testID="dietProfileButton"
+        />
+        <ChatButton onPress={onPressClientChat} testID="chatButton" />
+      </View>
     </View>
   );
 };

src/scenes/nutritionist/ClientListNutritionist/components/ClientCardNutritionist/styles.ts

@@ -5,9 +5,6 @@ export const styles = StyleSheet.create({
   spacing: {
     marginBottom: 14,
   },
-  clickableText: {
-    textDecorationLine: 'underline',
-  },
   cardContainer: {
     alignSelf: 'stretch',
     padding: 20,
@@ -15,4 +12,9 @@ export const styles = StyleSheet.create({
     borderRadius: 10,
     backgroundColor: colors.lightYellow,
   },
+  buttonsContainer: {
+    flexDirection: 'row',
+    alignSelf: 'stretch',
+    justifyContent: 'space-between',
+  },
 });

src/scenes/nutritionist/ClientListNutritionist/components/DietProfileButton/index.test.tsx

+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import DietProfileButton from '.';
+
+describe('DietProfileButton', () => {
+  it('renders correctly when active', () => {
+    render(<DietProfileButton onPress={() => console.log('cool')} />);
+  });
+
+  it('renders correctly when disabled', () => {
+    render(<DietProfileButton onPress={() => console.log('cool')} disabled />);
+  });
+
+  it('renders correctly when given a testID', () => {
+    render(
+      <DietProfileButton onPress={() => console.log('cool')} testID="button" />,
+    );
+  });
+
+  it('executes onPress callback when button is pressed', async () => {
+    let isPressed = false;
+
+    const { getByText } = render(
+      <DietProfileButton onPress={() => (isPressed = true)} testID="button" />,
+    );
+
+    const button = getByText(/profil/i);
+    fireEvent.press(button);
+    expect(isPressed).toBeTruthy();
+  });
+});

src/scenes/nutritionist/ClientListNutritionist/components/DietProfileButton/index.tsx

+import React, { FC } from 'react';
+import { TouchableOpacity, Text } from 'react-native';
+
+import { styles } from './styles';
+import { Props } from './types';
+import { typographyStyles } from 'styles';
+import { Icon } from 'react-native-elements';
+
+const DietProfileButton: FC<Props> = ({ onPress, testID }) => (
+  <TouchableOpacity
+    onPress={onPress}
+    testID={testID}
+    style={styles.containerStyle}>
+    <Icon style={styles.img} name="user" type="feather" />
+    <Text style={[typographyStyles.bodyMedium, styles.titleStyle]}>Profil</Text>
+  </TouchableOpacity>
+);
+
+export default DietProfileButton;

src/scenes/nutritionist/ClientListNutritionist/components/DietProfileButton/styles.ts

+import { StyleSheet } from 'react-native';
+import { colors } from 'styles';
+
+export const styles = StyleSheet.create({
+  titleStyle: { color: colors.textBlack, textTransform: 'capitalize' },
+  containerStyle: {
+    marginTop: 12,
+    padding: 12,
+    overflow: 'hidden',
+    borderRadius: 4,
+    borderWidth: 1,
+    backgroundColor: undefined,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 160,
+  },
+  img: {
+    marginRight: 5,
+  },
+});

src/scenes/nutritionist/ClientListNutritionist/components/DietProfileButton/types.ts

+export interface Props {
+  onPress: () => void;
+  loading?: boolean;
+  disabled?: true;
+  testID?: string;
+}

src/scenes/nutritionist/ClientListNutritionist/components/DietReportButton/index.test.tsx

@@ -25,7 +25,7 @@ describe('DietReportButton', () => {
       <DietReportButton onPress={() => (isPressed = true)} testID="button" />,
     );
 
-    const button = getByText(/diet report/i);
+    const button = getByText(/laporan diet/i);
     fireEvent.press(button);
     expect(isPressed).toBeTruthy();
   });

src/scenes/nutritionist/ClientListNutritionist/components/DietReportButton/index.tsx

 import React, { FC } from 'react';
-import { TouchableOpacity, Text, Image } from 'react-native';
-import { diet_report } from 'assets/images';
+import { TouchableOpacity, Text } from 'react-native';
 
 import { styles } from './styles';
 import { Props } from './types';
 import { typographyStyles } from 'styles';
+import { Icon } from 'react-native-elements';
 
 const DietReportButton: FC<Props> = ({ onPress, testID }) => (
   <TouchableOpacity
     onPress={onPress}
     testID={testID}
     style={styles.containerStyle}>
-    <Image source={diet_report} style={styles.img} />
+    <Icon style={styles.img} name="ios-document-text" type="ionicon" />
     <Text style={[typographyStyles.bodyMedium, styles.titleStyle]}>
-      Diet Report
+      Laporan Diet
     </Text>
   </TouchableOpacity>
 );

src/scenes/nutritionist/ClientListNutritionist/components/DietReportButton/styles.ts

@@ -13,9 +13,6 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
   },
   img: {
-    width: 20,
-    height: 20,
-    marginRight: 10,
-    marginLeft: -5,
+    marginRight: 5,
   },
 });

src/scenes/questionnaire/ReadOnlyDietProfile/index.tsx

@@ -5,13 +5,17 @@ import { layoutStyles } from 'styles';
 import { useRoute } from '@react-navigation/native';
 import React from 'react';
 import { DietProfilePage } from './components';
-import { CarouselPagination, BigButton, Loader } from 'components/core';
+import {
+  CarouselPagination,
+  BigButton,
+  Loader,
+  EmptyDataPage,
+} from 'components/core';
 import Carousel from 'react-native-snap-carousel';
 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;

src/scenes/questionnaire/ReadOnlyDietRecommendation/index.tsx

@@ -3,14 +3,13 @@ import { ScrollView, View } from 'react-native';
 import { Text, Button } from 'react-native-elements';
 import { WebView } from 'react-native-webview';
 
-import { InfoCard, Loader } from 'components/core';
+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 EmptyDataPage from 'components/core/EmptyDataPage';
 
 const ReadOnlyDietRecommendation: FC<Props> = ({ children, data }) => {
   const { download, pdfViewUrl, fileName } = useDownloadFiles(