Fakultas Ilmu Komputer UI

index.tsx 3.18 KB
Newer Older
1
import React, { FC, useState } from 'react';
2
import { View } from 'react-native';
3
import { useNavigation } from '@react-navigation/native';
4

5
import { WizardContainer, Toast } from 'components/core';
6
import { MultipleChoice, MultipleCheckbox } from 'components/form';
7
import CACHE_KEYS from 'constants/cacheKeys';
8
import * as ROUTES from 'constants/routes';
9
import { useForm } from 'hooks';
10
import { createDietProfileApi } from 'services/dietelaQuiz';
11
12
13
14
15
16
17
18
import { layoutStyles } from 'styles';

import { BiodataForm } from './components';
import {
  allAccessQuestions,
  initialValues,
  textFields,
  radioButtonGroups,
19
  fieldValidations,
20
  convertPayload,
21
} from './schema';
22
import { generateValidationSchema } from 'utils/form';
23
import { setCache } from 'utils/cache';
24
25

const AllAccessQuestionnaire: FC = () => {
26
27
28
29
30
31
32
33
34
35
  const navigation = useNavigation();

  const [currentPage, setCurrentPage] = useState(1);

  const {
    getTextInputProps,
    getFormFieldProps,
    validateForm,
    getFirstErrorIndex,
    handleSubmit,
36
    isSubmitting,
37
  } = useForm({
38
    initialValues,
39
    validationSchema: generateValidationSchema(fieldValidations),
40
41
    onSubmit: async (values) => {
      const response = await createDietProfileApi(convertPayload(values));
42

43
      if (response.success) {
44
        setCache(CACHE_KEYS.dietProfileId, response.data?.id);
45
        navigation.navigate(ROUTES.dietelaQuizResult, response.data);
46
47
48
49
50
51
52
      } else {
        Toast.show({
          type: 'error',
          text1: 'Gagal menyimpan data',
          text2: 'Terjadi kesalahan pada sisi kami. Silakan coba lagi',
        });
      }
53
    },
54
55
  });

56
57
58
59
60
61
62
63
64
65
  const onSubmit = async () => {
    const { isValid, error } = await validateForm();
    if (isValid) {
      handleSubmit();
    } else {
      const firstErrorIdx = getFirstErrorIndex(error) - 4;
      setCurrentPage(firstErrorIdx < 1 ? 1 : firstErrorIdx);
    }
  };

66
67
  return (
    <WizardContainer
68
69
      currentStep={currentPage}
      setCurrentStep={setCurrentPage}
70
71
      components={[
        <BiodataForm
72
73
74
75
76
77
78
79
          textFields={textFields.map((fieldProps) => ({
            ...fieldProps,
            ...getTextInputProps(fieldProps.name),
          }))}
          radioButtonGroups={radioButtonGroups.map((fieldProps) => ({
            ...fieldProps,
            ...getFormFieldProps(fieldProps.name),
          }))}
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
        />,
        ...allAccessQuestions.map((question, i) => {
          const FormField = question.multiple
            ? MultipleCheckbox
            : MultipleChoice;

          return (
            <View style={layoutStyles}>
              <FormField
                key={`allAccessQn${i}`}
                questionNumber={i + 1}
                questionLabel={question.questionLabel}
                totalQuestions={allAccessQuestions.length}
                helperText={question.helperText}
                choices={question.choiceList.map((choice, choiceId) => ({
                  label: choice,
                  value: choiceId + 1,
                }))}
                {...getFormFieldProps(question.fieldName)}
              />
            </View>
          );
        }),
      ]}
104
      onFinish={onSubmit}
105
      isLoading={isSubmitting}
106
107
108
109
110
    />
  );
};

export default AllAccessQuestionnaire;