Fakultas Ilmu Komputer UI

Commit 3535a4a1 authored by Kefas Satrio Bangkit Solidedantyo's avatar Kefas Satrio Bangkit Solidedantyo
Browse files

Change chat and diet report button icon

parent 7155e4dd
<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>
...@@ -5,6 +5,3 @@ export const default_nutritionist = require('./default_nutritionist.png'); ...@@ -5,6 +5,3 @@ export const default_nutritionist = require('./default_nutritionist.png');
export const googleLogo = require('./google_logo.png'); export const googleLogo = require('./google_logo.png');
export const dietelaLogo = require('./dietela_logo.png'); export const dietelaLogo = require('./dietela_logo.png');
export const diet_report = require('./diet_report.png');
export const chat = require('./chat.png');
...@@ -8,3 +8,4 @@ export { default as ResultCard } from './ResultCard'; ...@@ -8,3 +8,4 @@ export { default as ResultCard } from './ResultCard';
export { default as Statistic } from './Statistic'; export { default as Statistic } from './Statistic';
export { default as Toast } from 'react-native-toast-message'; export { default as Toast } from 'react-native-toast-message';
export { default as WizardContainer } from './WizardContainer'; export { default as WizardContainer } from './WizardContainer';
export { default as EmptyDataPage } from './EmptyDataPage';
import React, { FC } from 'react'; import React, { FC } from 'react';
import { TouchableOpacity, Text, Image } from 'react-native'; import { TouchableOpacity, Text } from 'react-native';
import { chat } from 'assets/images';
import { styles } from './styles'; import { styles } from './styles';
import { Props } from './types'; import { Props } from './types';
import { typographyStyles } from 'styles'; import { typographyStyles } from 'styles';
import { Icon } from 'react-native-elements';
const ChatButton: FC<Props> = ({ onPress, testID }) => ( const ChatButton: FC<Props> = ({ onPress, testID }) => (
<TouchableOpacity <TouchableOpacity
onPress={onPress} onPress={onPress}
testID={testID} testID={testID}
style={styles.containerStyle}> 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> <Text style={[typographyStyles.bodyMedium, styles.titleStyle]}>Chat</Text>
</TouchableOpacity> </TouchableOpacity>
); );
......
...@@ -13,11 +13,9 @@ export const styles = StyleSheet.create({ ...@@ -13,11 +13,9 @@ export const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
width: 160,
}, },
img: { img: {
width: 20, marginRight: 5,
height: 20,
marginRight: 10,
marginLeft: -5,
}, },
}); });
...@@ -7,6 +7,7 @@ import { typographyStyles } from 'styles'; ...@@ -7,6 +7,7 @@ import { typographyStyles } from 'styles';
import { styles } from './styles'; import { styles } from './styles';
import { Props } from './types'; import { Props } from './types';
import DietReportButton from '../DietReportButton'; import DietReportButton from '../DietReportButton';
import DietProfileButton from '../DietProfileButton';
import ChatButton from '../ChatButton'; import ChatButton from '../ChatButton';
const ClientCardNutritionist: FC<Props> = ({ const ClientCardNutritionist: FC<Props> = ({
...@@ -18,11 +19,7 @@ const ClientCardNutritionist: FC<Props> = ({ ...@@ -18,11 +19,7 @@ const ClientCardNutritionist: FC<Props> = ({
return ( return (
<View style={styles.cardContainer}> <View style={styles.cardContainer}>
<Text <Text
style={[ style={[typographyStyles.headingMedium, styles.spacing]}
typographyStyles.headingMedium,
styles.spacing,
styles.clickableText,
]}
onPress={onPressClientProfile}> onPress={onPressClientProfile}>
{clientName} {clientName}
</Text> </Text>
...@@ -30,7 +27,13 @@ const ClientCardNutritionist: FC<Props> = ({ ...@@ -30,7 +27,13 @@ const ClientCardNutritionist: FC<Props> = ({
onPress={onPressClientDietReport} onPress={onPressClientDietReport}
testID="dietReportButton" testID="dietReportButton"
/> />
<ChatButton onPress={onPressClientChat} testID="chatButton" /> <View style={styles.buttonsContainer}>
<DietProfileButton
onPress={onPressClientProfile}
testID="dietProfileButton"
/>
<ChatButton onPress={onPressClientChat} testID="chatButton" />
</View>
</View> </View>
); );
}; };
......
...@@ -5,9 +5,6 @@ export const styles = StyleSheet.create({ ...@@ -5,9 +5,6 @@ export const styles = StyleSheet.create({
spacing: { spacing: {
marginBottom: 14, marginBottom: 14,
}, },
clickableText: {
textDecorationLine: 'underline',
},
cardContainer: { cardContainer: {
alignSelf: 'stretch', alignSelf: 'stretch',
padding: 20, padding: 20,
...@@ -15,4 +12,9 @@ export const styles = StyleSheet.create({ ...@@ -15,4 +12,9 @@ export const styles = StyleSheet.create({
borderRadius: 10, borderRadius: 10,
backgroundColor: colors.lightYellow, backgroundColor: colors.lightYellow,
}, },
buttonsContainer: {
flexDirection: 'row',
alignSelf: 'stretch',
justifyContent: 'space-between',
},
}); });
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();
});
});
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;
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,
},
});
export interface Props {
onPress: () => void;
loading?: boolean;
disabled?: true;
testID?: string;
}
...@@ -25,7 +25,7 @@ describe('DietReportButton', () => { ...@@ -25,7 +25,7 @@ describe('DietReportButton', () => {
<DietReportButton onPress={() => (isPressed = true)} testID="button" />, <DietReportButton onPress={() => (isPressed = true)} testID="button" />,
); );
const button = getByText(/diet report/i); const button = getByText(/laporan diet/i);
fireEvent.press(button); fireEvent.press(button);
expect(isPressed).toBeTruthy(); expect(isPressed).toBeTruthy();
}); });
......
import React, { FC } from 'react'; import React, { FC } from 'react';
import { TouchableOpacity, Text, Image } from 'react-native'; import { TouchableOpacity, Text } from 'react-native';
import { diet_report } from 'assets/images';
import { styles } from './styles'; import { styles } from './styles';
import { Props } from './types'; import { Props } from './types';
import { typographyStyles } from 'styles'; import { typographyStyles } from 'styles';
import { Icon } from 'react-native-elements';
const DietReportButton: FC<Props> = ({ onPress, testID }) => ( const DietReportButton: FC<Props> = ({ onPress, testID }) => (
<TouchableOpacity <TouchableOpacity
onPress={onPress} onPress={onPress}
testID={testID} testID={testID}
style={styles.containerStyle}> 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]}> <Text style={[typographyStyles.bodyMedium, styles.titleStyle]}>
Diet Report Laporan Diet
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
); );
......
...@@ -13,9 +13,6 @@ export const styles = StyleSheet.create({ ...@@ -13,9 +13,6 @@ export const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
img: { img: {
width: 20, marginRight: 5,
height: 20,
marginRight: 10,
marginLeft: -5,
}, },
}); });
...@@ -5,13 +5,17 @@ import { layoutStyles } from 'styles'; ...@@ -5,13 +5,17 @@ import { layoutStyles } from 'styles';
import { useRoute } from '@react-navigation/native'; import { useRoute } from '@react-navigation/native';
import React from 'react'; import React from 'react';
import { DietProfilePage } from './components'; 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 Carousel from 'react-native-snap-carousel';
import { pages } from './pages'; import { pages } from './pages';
import { useApi } from 'hooks'; import { useApi } from 'hooks';
import { retrieveDietQuestionnaireByIdApi } from 'services/dietQuestionnaire'; import { retrieveDietQuestionnaireByIdApi } from 'services/dietQuestionnaire';
import { DietQuestionnaireResponse } from 'services/dietQuestionnaire/models'; import { DietQuestionnaireResponse } from 'services/dietQuestionnaire/models';
import EmptyDataPage from 'components/core/EmptyDataPage';
interface QuestionnaireID { interface QuestionnaireID {
id: number; id: number;
......
...@@ -3,14 +3,13 @@ import { ScrollView, View } from 'react-native'; ...@@ -3,14 +3,13 @@ import { ScrollView, View } from 'react-native';
import { Text, Button } from 'react-native-elements'; import { Text, Button } from 'react-native-elements';
import { WebView } from 'react-native-webview'; import { WebView } from 'react-native-webview';
import { InfoCard, Loader } from 'components/core'; import { InfoCard, Loader, EmptyDataPage } from 'components/core';
import { layoutStyles } from 'styles'; import { layoutStyles } from 'styles';
import { useDownloadFiles } from 'hooks'; import { useDownloadFiles } from 'hooks';
import { getAbsoluteUrl } from 'utils/format'; import { getAbsoluteUrl } from 'utils/format';
import { styles } from './styles'; import { styles } from './styles';
import { Props } from './types'; import { Props } from './types';
import EmptyDataPage from 'components/core/EmptyDataPage';
const ReadOnlyDietRecommendation: FC<Props> = ({ children, data }) => { const ReadOnlyDietRecommendation: FC<Props> = ({ children, data }) => {
const { download, pdfViewUrl, fileName } = useDownloadFiles( const { download, pdfViewUrl, fileName } = useDownloadFiles(
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment