import React, { FC, useState } from 'react'; import { View, StyleSheet } from 'react-native'; import { layoutStyles } from 'styles'; import { pages } from './pages'; import { WizardContainer, Toast, Loader } 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 { createNutritionistCommentApi, retrieveUserReportCommentByReportId, updateNutritionistCommentApi, } from 'services/progress'; import { NutritionistCommentRequest, UserReportResponse, NutritionistComment, } from 'services/progress/models'; import * as ROUTES from 'constants/routes'; import { dietReportTextFields, dietReportSelectFields, } from 'constants/weeklyReport'; const DietReportForNutritionist: FC = () => { const navigation = useNavigation(); const route = useRoute(); const userReport = route.params as UserReportResponse; const [activeSlide, setActiveSlide] = useState(1); const { isLoading, data: commentResponse } = useApi(() => retrieveUserReportCommentByReportId(userReport.id), ); const getInitialValues = () => { let defaultValues = { ...dietReportCommentInitialValues }; if (commentResponse && commentResponse.length > 0) { const data = commentResponse[0]; Object.entries(data).map(([field, comment]) => { const key = field as keyof NutritionistComment; defaultValues[key] = comment; }); } return defaultValues; }; const { getTextInputProps, handleSubmit, isSubmitting, isFieldError, values: formValues, } = useForm({ initialValues: getInitialValues(), validationSchema: generateValidationSchema(fieldValidations), enableReinitialize: true, onSubmit: async (values) => { const payload: NutritionistCommentRequest = { weekly_report: userReport.id, ...values, }; const commentId = commentResponse && commentResponse.length > 0 ? commentResponse[0].id : null; const response = commentId ? await updateNutritionistCommentApi(payload, commentId) : await createNutritionistCommentApi(payload); if (response.success) { commentId ? Toast.show({ type: 'success', text1: 'Sukses mengubah komen', text2: 'Perubahan komen Anda terhadap laporan mingguan klien sudah tersimpan.', }) : Toast.show({ type: 'success', text1: 'Sukses membuat komen', text2: 'Komen Anda terhadap laporan mingguan klien sudah tersimpan.', }); navigation.navigate(ROUTES.weeklyReportChooseWeekForNutritionist); } else { Toast.show({ type: 'error', text1: 'Gagal membuat komen', text2: 'Komen anda terhadap laporan mingguan klien gagal tersimpan.', }); } }, }); if (isLoading) { return ; } const isCurrentPageError = (): boolean => { if (activeSlide === 1) { return [ formValues.height, formValues.weight, formValues.waist_size, ].reduce((acc: boolean, item) => acc || item === '', false); } if (activeSlide === 3) { return isFieldError('average_consumption'); } const fields = [ ...dietReportTextFields[`dietReportPage${activeSlide}`], ...dietReportSelectFields[`dietReportPage${activeSlide}`], ]; return 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;