Fakultas Ilmu Komputer UI

Commit 212ca2c9 authored by Kefas Satrio Bangkit Solidedantyo's avatar Kefas Satrio Bangkit Solidedantyo
Browse files

Merge branch 'change-chat-report-icon' into 'staging'

Change chat and diet report button icon

See merge request !52
parents 7155e4dd 3535a4a1
Pipeline #77592 passed with stages
in 80 minutes and 2 seconds
<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');
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');
......@@ -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';
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>
);
......
......@@ -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,
},
});
......@@ -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>
);
};
......
......@@ -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',
},
});
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', () => {
<DietReportButton onPress={() => (isPressed = true)} testID="button" />,
);
const button = getByText(/diet report/i);
const button = getByText(/laporan diet/i);
fireEvent.press(button);
expect(isPressed).toBeTruthy();
});
......
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>
);
......
......@@ -13,9 +13,6 @@ export const styles = StyleSheet.create({
alignItems: 'center',
},
img: {
width: 20,
height: 20,
marginRight: 10,
marginLeft: -5,
marginRight: 5,
},
});
......@@ -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;
......
......@@ -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(
......
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