Merge branch 'add-form-validation' into 'staging'

[REFACTOR] Adjust form validation for questionnaire and weekly report

See merge request !78

src/constants/questionnaire.ts

 import { yesOrNo, drinkFrequency, physicalActivity } from 'constants/options';
-import { TextFieldSchema } from 'types/form';
+import { TextFieldSchema, SelectFieldSchema } from 'types/form';
+import { FieldType } from 'utils/form';
 
 export const pageHeaders: string[] = [
   'Persetujuan Program Diet',
@@ -41,6 +42,8 @@ export const textFields: { [_: string]: TextFieldSchema[] } = {
       placeholder: 'Ex: 100',
       name: 'waist_size',
       required: true,
+      fieldType: FieldType.NUMBER,
+      max: 150,
       keyboardType: 'numeric',
     },
   ],
@@ -163,7 +166,7 @@ export const textFields: { [_: string]: TextFieldSchema[] } = {
   ],
 };
 
-export const selectFields: { [_: string]: any[] } = {
+export const selectFields: { [_: string]: SelectFieldSchema[] } = {
   identity: [
     {
       name: 'profession',

src/constants/weeklyReport.ts

@@ -5,6 +5,7 @@ import {
   likertScale5,
   physicalActivity,
 } from './options';
+import { FieldType } from 'utils/form';
 
 export const dietReportTextFields: { [_: string]: TextFieldSchema[] } = {
   dietReportPage1: [
@@ -13,6 +14,7 @@ export const dietReportTextFields: { [_: string]: TextFieldSchema[] } = {
       placeholder: 'Masukkan berat badan yang terakhir diukur',
       name: 'weight',
       required: true,
+      fieldType: FieldType.NUMBER,
       keyboardType: 'numeric',
     },
     {
@@ -20,6 +22,7 @@ export const dietReportTextFields: { [_: string]: TextFieldSchema[] } = {
       placeholder: 'Masukkan tinggi badan yang terakhir diukur',
       name: 'height',
       required: true,
+      fieldType: FieldType.NUMBER,
       keyboardType: 'numeric',
     },
     {
@@ -27,6 +30,8 @@ export const dietReportTextFields: { [_: string]: TextFieldSchema[] } = {
       placeholder: 'Masukkan lingkar pinggang yang terakhir diukur',
       name: 'waist_size',
       required: true,
+      fieldType: FieldType.NUMBER,
+      max: 150,
       keyboardType: 'numeric',
     },
   ],

src/scenes/questionnaire/AllAccessQuestionnaire/schema.ts

@@ -13,6 +13,7 @@ export const textFields: TextFieldSchema[] = [
     label: 'Email',
     placeholder: 'example@address.com',
     required: true,
+    fieldType: FieldType.EMAIL,
     name: 'email',
   },
   {
@@ -20,6 +21,8 @@ export const textFields: TextFieldSchema[] = [
     placeholder: 'Ex: 20',
     required: true,
     name: 'age',
+    fieldType: FieldType.NUMBER,
+    max: 80,
     keyboardType: 'numeric',
   },
   {
@@ -27,12 +30,14 @@ export const textFields: TextFieldSchema[] = [
     placeholder: 'Ex: 60',
     required: true,
     name: 'weight',
+    fieldType: FieldType.NUMBER,
     keyboardType: 'numeric',
   },
   {
     label: 'Tinggi badan (cm)',
     placeholder: 'Ex: 160',
     required: true,
+    fieldType: FieldType.NUMBER,
     name: 'height',
     keyboardType: 'numeric',
   },
@@ -265,7 +270,8 @@ export const fieldValidations: FieldValidation[] = [
     name: field.name,
     required: field.required,
     label: field.label,
-    type: field.name === 'email' ? FieldType.EMAIL : FieldType.TEXT,
+    type: field.fieldType || FieldType.TEXT,
+    max: field.max,
   })),
   ...radioButtonGroups.map((field) => ({
     name: field.name,

src/scenes/questionnaire/ExtendedQuestionnaire/components/Questionnaire1/index.tsx

@@ -8,7 +8,7 @@ import {
 } from 'components/form';
 
 import { initialValues, fieldValidations, convertPayload } from './schema';
-import { textFields, selectFields } from 'constants/questionnaire';
+import { textFields, selectFields, dateField } from 'constants/questionnaire';
 import QuestionnaireWrapper, { styles } from '../QuestionnaireWrapper';
 import { NavProps } from '../QuestionnaireWrapper/types';
 
@@ -18,8 +18,8 @@ const Questionnaire1: FC<NavProps> = (navProps) => (
     Questionnaire={({ getTextInputProps, getFormFieldProps }) => (
       <View>
         <Datepicker
-          {...getFormFieldProps('date_of_birth')}
-          label="Tanggal Lahir"
+          {...getFormFieldProps(dateField.name)}
+          label={dateField.label}
           required
         />
         {textFields.identity.map((props, i) => (

src/scenes/questionnaire/ExtendedQuestionnaire/components/Questionnaire1/schema.ts

@@ -22,7 +22,8 @@ export const fieldValidations: FieldValidation[] = [
     name: field.name,
     required: field.required,
     label: field.label,
-    type: FieldType.TEXT,
+    type: field.fieldType || FieldType.TEXT,
+    max: field.max,
   })),
   ...selectFields.identity.map((field) => ({
     name: field.name,

src/scenes/report/WeeklyReport/index.test.tsx

@@ -27,7 +27,7 @@ describe('WeeklyReport', () => {
   const validFormValues: { [_: string]: any } = {
     weight: '52',
     height: '90',
-    waist_size: '190',
+    waist_size: '100',
     changes_felt: 1,
     hunger_level: 1,
     fullness_level: 1,

src/scenes/report/WeeklyReport/schema.ts

@@ -38,7 +38,8 @@ export const fieldValidations: FieldValidation[] = [
       required: field.required,
       label: field.label,
       errorMessage: field.errorMessage,
-      type: FieldType.TEXT,
+      type: field.fieldType || FieldType.TEXT,
+      max: field.max,
     })),
   ...Object.values(dietReportSelectFields)
     .reduce((acc, arr) => [...acc, ...arr], [])

src/types/form.ts

 import { Props as TextFieldProps } from 'components/form/TextField/types';
 import { Props as FormLabelProps } from 'components/form/FormLabel/types';
 import { Choice } from 'components/form/MultipleChoice/types';
+import { FieldType } from 'utils/form';
 
 export type TextFieldSchema = TextFieldProps & {
   name: string;
+  fieldType?: FieldType;
+  max?: number;
 };
 
 export interface RadioButtonGroupSchema extends FormLabelProps {
   choices: Choice[];
   name: string;
 }
+
+export interface SelectFieldSchema extends FormLabelProps {
+  name: string;
+  picker?: boolean;
+  placeholder?: string;
+  hasOtherChoice?: boolean;
+  otherChoiceValue?: number;
+  choiceList: string[];
+}

src/utils/form.ts

@@ -8,6 +8,7 @@ export enum FieldType {
   CHECKBOX = 'checkbox',
   PASSWORD = 'password',
   CONFIRM_PASSWORD = 'confirmpassword',
+  NUMBER = 'number',
 }
 
 export interface FieldValidation {
@@ -16,6 +17,8 @@ export interface FieldValidation {
   label?: ReactNode;
   errorMessage?: string;
   type: FieldType;
+  min?: number;
+  max?: number;
   matches?: string;
 }
 
@@ -58,6 +61,14 @@ export const generateValidationSchema = (fields: FieldValidation[]) => {
           'Konfirmasi password tidak sama',
         );
         break;
+      case FieldType.NUMBER:
+        validationSchema[field.name] = Yup.number()
+          .min(field.min || 0, `${field.label} harus minimal ${field.min || 0}`)
+          .max(
+            field.max || 200,
+            `${field.label} harus maksimal ${field.max || 200}`,
+          );
+        break;
       default:
         break;
     }