import React, { FC, useState } from 'react'; import { View, StyleSheet } from 'react-native'; import { layoutStyles } from 'styles'; import { pages } from './pages'; import { WizardContainer, Loader, EmptyDataPage, Toast } from 'components/core'; import { useForm, useApi } from 'hooks'; import { dietReportCommentInitialValues, fieldValidations } from './schema'; import { generateValidationSchema } from 'utils/form'; import { DietReportPage } from './components'; import { useRoute, useNavigation } from '@react-navigation/native'; import { retrieveUserReportByIdApi, createNutritionistCommentApi, } from 'services/progress'; import { NutritionistCommentRequest } from 'services/progress/models'; import * as ROUTES from 'constants/routes'; import { dietReportTextFields, dietReportSelectFields, } from 'constants/weeklyReport'; interface ParamsDietReport { id: number; } const DietReportForNutritionist: FC = () => { const navigation = useNavigation(); const route = useRoute(); const { id } = route.params as ParamsDietReport; const { isLoading, data: userReports = [] } = useApi(() => retrieveUserReportByIdApi(id), ); const [activeSlide, setActiveSlide] = useState(1); const { getTextInputProps, handleSubmit, isSubmitting, isFormUntouched, isFieldError, } = useForm({ initialValues: dietReportCommentInitialValues, validationSchema: generateValidationSchema(fieldValidations), onSubmit: async (values) => { const payload: NutritionistCommentRequest = { weekly_report: userReports[userReports.length - 1].id, ...values, }; const response = await createNutritionistCommentApi(payload); if (response.success && response.data) { Toast.show({ type: 'success', text1: 'Sukses membuat komen', text2: 'Komen anda terhadap laporan mingguan klien sudah tersimpan.', }); navigation.navigate(ROUTES.clientListForNutritionist); } else { Toast.show({ type: 'error', text1: 'Gagal membuat komen', text2: 'Komen anda terhadap laporan mingguan klien gagal tersimpan.', }); } }, }); if (isLoading) { return ; } if (!userReports.length) { return ; } const userReport = userReports[userReports.length - 1]; const isCurrentPageError = (): boolean => { if (activeSlide === 3) { return isFieldError('average_consumption'); } const fields = [ ...(dietReportTextFields[`dietReportPage${activeSlide}`] || []), ...(dietReportSelectFields[`dietReportPage${activeSlide}`] || []), ]; return ( isFormUntouched() || fields.reduce( (acc: boolean, item) => acc || isFieldError(item.name), false, ) ); }; return ( ( ))} /> ); }; const styles = StyleSheet.create({ flexContainer: { flex: 1, }, reportContainer: { position: 'relative', flex: 1, paddingBottom: 20, }, searchContainer: { backgroundColor: 'white', borderWidth: 1, borderRadius: 5, marginBottom: 20, justifyContent: 'center', height: 58, }, backgroundWhite: { backgroundColor: 'white' }, }); export default DietReportForNutritionist;