Fakultas Ilmu Komputer UI

Commit b256c31c authored by Doan Andreas Nathanael's avatar Doan Andreas Nathanael
Browse files

Integrate Quiz Result UI with backend API

parent 1cd4ad49
import { DietProfileResponse } from 'services/dietelaQuiz/models';
import { ResultPageContent } from '../types';
const detailEnergiSehari = (
response: DietProfileResponse,
): ResultPageContent => ({
title: 'Aktivitas fisik',
mainInfo: {
infos: [
{
label: 'energi makan pagi',
content: '🔒 Terkunci',
},
{
label: 'energi snack pagi',
content: '🔒 Terkunci',
},
{
label: 'energi makan siang',
content: '🔒 Terkunci',
},
{
label: 'energi snack siang',
content: '🔒 Terkunci',
},
{
label: 'energi makan malam',
content: '🔒 Terkunci',
},
],
status: 'healthy',
},
sections: [
{
header: 'Ini rekomendasi yang Dietela berikan untukmu:',
content: {
textCard: [
'Dengan Program Dietela, tidak hanya kamu bisa mengetahui kebutuhan energi serta gizimu secara detail, kamu akan mendapatkan diet yang dipersonalisasi sesuai gayamu, lho! Klik tombol dibawah untuk detail lebih lanjut.',
],
},
},
],
});
export default detailEnergiSehari;
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import {
AutoImage,
BigButton,
InfoCard,
ResultCard,
Statistic,
} from 'components/core';
import { Section } from 'components/layout';
import { layoutStyles, typographyStyles } from 'styles';
import { styles } from '../styles';
import { status_berat_badan } from '../../../../../assets/images';
import { ScrollView } from 'react-native-gesture-handler';
const info = [
{
title: 'energi makan pagi',
content: '🔒 Terkunci',
},
{
title: 'energi snack pagi',
content: '🔒 Terkunci',
},
{
title: 'energi makan siang',
content: '🔒 Terkunci',
},
{
title: 'energi snack siang',
content: '🔒 Terkunci',
},
{
title: 'energi makan malam',
content: '🔒 Terkunci',
},
];
const DetailEnergiSehari: FC = () => (
<View style={layoutStyles}>
<ScrollView>
<Text style={typographyStyles.headingLarge}>Detail Kebutuhan Energi</Text>
<Section>
<AutoImage source={status_berat_badan} ratio={0.5} />
</Section>
<Section>
<ResultCard status="healthy" infos={info} />
</Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Ini rekomendasi yang Dietela berikan untukmu:
</Text>
<InfoCard
content={
'Dengan Program Dietela, tidak hanya kamu bisa mengetahui kebutuhan energi serta gizimu secara detail, kamu akan mendapatkan diet yang dipersonalisasi sesuai gayamu, lho! Klik tombol dibawah untuk detail lebih lanjut.'
}
/>
<BigButton
title="mulai program"
onPress={() => console.log('less goo -dababy')}
testID="cta-button"
/>
</Section>
</ScrollView>
</View>
);
export default DetailEnergiSehari;
import React from 'react';
import { render } from '@testing-library/react-native';
import KebutuhanEnergiZatGizi from '.';
describe('KebutuhanEnergiZatGizi', () => {
it('renders correctly', () => {
render(<KebutuhanEnergiZatGizi />);
});
});
import { DietProfileResponse } from 'services/dietelaQuiz/models';
import { ResultPageContent } from '../types';
import { getAnswerString } from '../utils';
const kebutuhanEnergiZatGizi = (
response: DietProfileResponse,
): ResultPageContent => {
const result = response.quiz_result;
const energi = result.daily_energy_needs.toFixed(1).toString();
const protein = result.daily_nutrition_needs.protein_needs
.toFixed(1)
.toString();
const karbohidrat = result.daily_nutrition_needs.carbohydrate_needs
.toFixed(1)
.toString();
const lemak = result.daily_nutrition_needs.fat_needs.toFixed(1).toString();
const serat = result.daily_nutrition_needs.fiber_needs.toFixed(1).toString();
const genderType = ['Pria', 'Wanita'];
const age = result.age.toString();
const weight = result.weight.toFixed(0).toString();
const height = result.height.toString();
const gender = genderType[result.gender - 1];
const body = getAnswerString('body_activity', response.body_activity)!;
const special = getAnswerString(
'special_condition',
response.special_condition,
)!;
return {
title: 'Kebutuhan Energi dan Zat Gizi dalam Sehari',
mainInfo: {
infos: [
{
label: 'energi per hari',
content: `${energi} kkal`,
},
{
label: 'protein per hari',
content: `${protein} g`,
},
{
label: 'karbohidrat per hari',
content: `${karbohidrat} g`,
},
{
label: 'lemak per hari',
content: `${lemak} g`,
},
{
label: 'serat per hari',
content: `${serat} g`,
},
],
status: 'healthy',
},
sections: [
{
header: 'Dihitung berdasarkan data:',
content: {
statistics: [
[
{
label: 'jenis kelamin',
emote: '🧑',
content: gender,
},
{
label: 'Usia',
emote: '🎂',
content: `${age} tahun`,
},
],
[
{
label: 'berat badan',
emote: '⚖️',
content: `${weight} kg`,
},
{
label: 'tinggi badan',
emote: '📐',
content: `${height} cm`,
},
],
],
},
},
{
header: 'Dan juga berdasarkan jawaban kuis kamu:',
content: {
textCard: [body, special],
},
},
],
};
};
export default kebutuhanEnergiZatGizi;
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { AutoImage, InfoCard, ResultCard, Statistic } from 'components/core';
import { Section } from 'components/layout';
import { layoutStyles, typographyStyles } from 'styles';
import { styles } from '../styles';
import { status_berat_badan } from '../../../../../assets/images';
import { ScrollView } from 'react-native-gesture-handler';
const info = [
{
title: 'energi per hari',
content: '1543 kkal',
},
{
title: 'protein per hari',
content: '23 g',
},
{
title: 'karbohidrat per hari',
content: '132 g',
},
{
title: 'lemak per hari',
content: '31 g',
},
{
title: 'serat per hari',
content: '12 g',
},
];
const KebutuhanEnergiZatGizi: FC = () => (
<View style={layoutStyles}>
<ScrollView>
<Text style={typographyStyles.headingLarge}>
Kebutuhan Energi dan Zat Gizi dalam Sehari
</Text>
<Section>
<AutoImage source={status_berat_badan} ratio={0.5} />
</Section>
<Section>
<ResultCard status="healthy" infos={info} />
</Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Dihitung berdasarkan data:
</Text>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<Statistic title="jenis kelamin" emote="🧑" content="Perempuan" />
</View>
<View style={{ flex: 1 }}>
<Statistic title="Usia" emote="🎂" content="32 tahun" />
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 12 }}>
<View style={{ flex: 1 }}>
<Statistic title="berat badan" emote="⚖️" content="77 kg" />
</View>
<View style={{ flex: 1 }}>
<Statistic title="tinggi badan" emote="📐" content="156 cm" />
</View>
</View>
</Section>
<Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Dan juga berdasarkan jawaban kuis kamu:
</Text>
<InfoCard content="Saya lebih banyak duduk dan tidak rutin olahraga" />
<Section>
<InfoCard content="Sedang menyusui bayi 0-6 bulan" />
</Section>
</Section>
</Section>
</ScrollView>
</View>
);
export default KebutuhanEnergiZatGizi;
import React from 'react';
import { render } from '@testing-library/react-native';
import KecukupanSayurBuah from '.';
describe('KecukupanSayurBuah', () => {
it('renders correctly', () => {
render(<KecukupanSayurBuah />);
});
});
import { allAccessQuestions } from 'scenes/questionnaire/AllAccessQuestionnaire/schema';
import { DietProfileResponse } from 'services/dietelaQuiz/models';
import { sayurBuahStatus } from 'services/dietelaQuiz/quizResult';
import { ResultPageContent } from '../types';
import { genericResult, getAnswerString } from '../utils';
const kecukupanSayurBuah = (
response: DietProfileResponse,
): ResultPageContent => {
const result = response.quiz_result;
const infosContent = result.vegetable_and_fruit_sufficiency;
const infoStatus = sayurBuahStatus[infosContent].status;
const recommendation = result.vegetable_and_fruit_diet_recommendation;
const vegetables = getAnswerString(
'vegetables_in_one_day',
response.vegetables_in_one_day,
);
const fruits = getAnswerString(
'fruits_in_one_day',
response.fruits_in_one_day,
);
const questions = [vegetables, fruits];
return genericResult(
'Kecukupan Sayur dan Buah',
'status kecukupan',
infosContent,
infoStatus,
recommendation,
questions,
);
};
export default kecukupanSayurBuah;
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { AutoImage, InfoCard, ResultCard } from 'components/core';
import { Section } from 'components/layout';
import { layoutStyles, typographyStyles } from 'styles';
import { styles } from '../styles';
import { status_berat_badan } from '../../../../../assets/images';
import { ScrollView } from 'react-native-gesture-handler';
const info = [
{
title: 'status kecukupan',
content: 'Asupan buah dan sayur sudah cukup ',
},
];
const KecukupanSayurBuah: FC = () => (
<View style={layoutStyles}>
<ScrollView>
<Text style={typographyStyles.headingLarge}>
Kecukupan Sayur dan Buah
</Text>
<Section>
<AutoImage source={status_berat_badan} ratio={0.5} />
</Section>
<Section>
<ResultCard status="healthy" infos={info} />
</Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Ini rekomendasi yang Dietela berikan untukmu:
</Text>
<InfoCard
content={
'Selamat! Kamu sudah memenuhi salah satu langkah menuju hidup sehat. Pertahankan untuk konsumsi setidaknya 2 porsi sayur & 3 porsi buah atau sebaliknya per hari ya. Pokoknya kalau di total kamu perlu 5 porsi buah dan sayur per sehari.'
}
/>
</Section>
<Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Berdasarkan jawaban kuis kamu:
</Text>
<InfoCard content="3 porsi sayur per hari" />
</Section>
</Section>
</ScrollView>
</View>
);
export default KecukupanSayurBuah;
import React from 'react';
import { render } from '@testing-library/react-native';
import MakanBesar from '.';
describe('MakanBesar', () => {
it('renders correctly', () => {
render(<MakanBesar />);
});
});
import { DietProfileResponse } from 'services/dietelaQuiz/models';
import { makanBesarStatus } from 'services/dietelaQuiz/quizResult';
import { ResultPageContent } from '../types';
import { genericResult, getAnswerString, getInfos } from '../utils';
const makanBesar = (response: DietProfileResponse): ResultPageContent => {
const result = response.quiz_result;
const recommendation = result.large_meal_diet_recommendation;
const { infosContent, infoStatus } = getInfos(
makanBesarStatus[recommendation],
);
const meal = getAnswerString(
'large_meal_in_one_day',
response.large_meal_in_one_day,
);
return genericResult(
'Frekuensi Makan Besar dalam Sehari',
'status makan besar',
infosContent,
infoStatus,
recommendation,
[meal],
);
};
export default makanBesar;
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { AutoImage, InfoCard, ResultCard } from 'components/core';
import { Section } from 'components/layout';
import { layoutStyles, typographyStyles } from 'styles';
import { styles } from '../styles';
import { status_berat_badan } from '../../../../../assets/images';
import { ScrollView } from 'react-native-gesture-handler';
const info = [
{
title: 'status makan besar',
content: 'Sudah baik',
},
];
const MakanBesar: FC = () => (
<View style={layoutStyles}>
<ScrollView>
<Text style={typographyStyles.headingLarge}>
Frekuensi Makan Besar dalam Sehari
</Text>
<Section>
<AutoImage source={status_berat_badan} ratio={0.5} />
</Section>
<Section>
<ResultCard status="healthy" infos={info} />
</Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Ini rekomendasi yang Dietela berikan untukmu:
</Text>
<InfoCard
content={
'Hmmm… Kenapa cuma makan besar 1 kali sehari? Makan besar cuma 1 kali dalam sehari berisiko membuat kamu makan berlebihan dan kekurangan zat gizi tertentu Lho! Yuk coba mulai diatur pola makannya, dengan merutinkan waktu makan agar metabolisme kamu lebih baik.'
}
/>
</Section>
<Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Berdasarkan jawaban kuis kamu:
</Text>
<InfoCard content="3 porsi sayur per hari" />
</Section>
</Section>
</ScrollView>
</View>
);
export default MakanBesar;
import React from 'react';
import { render } from '@testing-library/react-native';
import MakanCemilan from '.';
describe('MakanCemilan', () => {
it('renders correctly', () => {
render(<MakanCemilan />);
});
});
import { DietProfileResponse } from 'services/dietelaQuiz/models';
import { cemilanStatus } from 'services/dietelaQuiz/quizResult';
import { ResultPageContent } from '../types';
import { genericResult, getAnswerString, getInfos } from '../utils';
const makanCemilan = (response: DietProfileResponse): ResultPageContent => {
const result = response.quiz_result;
const recommendation = result.snacks_diet_recommendation;
const { infosContent, infoStatus } = getInfos(cemilanStatus[recommendation]);
// snacks_in_one_day
const snack = getAnswerString(
'snacks_in_one_day',
response.snacks_in_one_day,
);
return genericResult(
'Frekuensi Makan Cemilan dalam Sehari',
'status makan cemilan',
infosContent,
infoStatus,
recommendation,
[snack],
);