Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit b256c31c authored by Doan Andreas Nathanael's avatar Doan Andreas Nathanael
Browse files

Integrate Quiz Result UI with backend API

parent 1cd4ad49
Hide whitespace changes
Inline Side-by-side
src/scenes/questionnaire/DietelaQuizResult/pages/DetailEnergiSehari/index.ts 0 → 100644
View file @ b256c31c
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;
src/scenes/questionnaire/DietelaQuizResult/pages/DetailEnergiSehari/index.tsx deleted 100644 → 0
View file @ 1cd4ad49
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;
src/scenes/questionnaire/DietelaQuizResult/pages/KebutuhanEnergiZatGizi/index.test.tsx deleted 100644 → 0
View file @ 1cd4ad49
import React from 'react';
import { render } from '@testing-library/react-native';
import KebutuhanEnergiZatGizi from '.';
describe('KebutuhanEnergiZatGizi', () => {
it('renders correctly', () => {
render(<KebutuhanEnergiZatGizi />);
});
});
src/scenes/questionnaire/DietelaQuizResult/pages/KebutuhanEnergiZatGizi/index.ts 0 → 100644
View file @ b256c31c
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;
src/scenes/questionnaire/DietelaQuizResult/pages/KebutuhanEnergiZatGizi/index.tsx deleted 100644 → 0
View file @ 1cd4ad49
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;
src/scenes/questionnaire/DietelaQuizResult/pages/KecukupanSayurBuah/index.test.tsx deleted 100644 → 0
View file @ 1cd4ad49
import React from 'react';
import { render } from '@testing-library/react-native';
import KecukupanSayurBuah from '.';
describe('KecukupanSayurBuah', () => {
it('renders correctly', () => {
render(<KecukupanSayurBuah />);
});
});
src/scenes/questionnaire/DietelaQuizResult/pages/KecukupanSayurBuah/index.ts 0 → 100644
View file @ b256c31c
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;
src/scenes/questionnaire/DietelaQuizResult/pages/KecukupanSayurBuah/index.tsx deleted 100644 → 0
View file @ 1cd4ad49
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;
src/scenes/questionnaire/DietelaQuizResult/pages/MakanBesar/index.test.tsx deleted 100644 → 0
View file @ 1cd4ad49
import React from 'react';
import { render } from '@testing-library/react-native';
import MakanBesar from '.';
describe('MakanBesar', () => {
it('renders correctly', () => {
render(<MakanBesar />);
});
});
src/scenes/questionnaire/DietelaQuizResult/pages/MakanBesar/index.ts 0 → 100644
View file @ b256c31c
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;
src/scenes/questionnaire/DietelaQuizResult/pages/MakanBesar/index.tsx deleted 100644 → 0
View file @ 1cd4ad49
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;
src/scenes/questionnaire/DietelaQuizResult/pages/MakanCemilan/index.test.tsx deleted 100644 → 0
View file @ 1cd4ad49
import React from 'react';
import { render } from '@testing-library/react-native';
import MakanCemilan from '.';
describe('MakanCemilan', () => {
it('renders correctly', () => {
render(<MakanCemilan />);
});
});
src/scenes/questionnaire/DietelaQuizResult/pages/MakanCemilan/index.ts 0 → 100644
View file @ b256c31c
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],
);