refactor: use formik context

pedroramos17 · Oct 2, 2024 · 4fc2ea2 · 4fc2ea2
1 parent 7be95c7
commit 4fc2ea2
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 150 deletions.
diff --git a/src/lib/features/properties/PropertyForm.tsx b/src/lib/features/properties/PropertyForm.tsx
@@ -44,7 +44,7 @@ interface UrlParams {
   id: string;
 };
 
-interface FormValues {
+export interface FormValues {
     propertyId: string;
     propertyName: string;
     propertyOrganization: string;
@@ -279,23 +279,7 @@ const handleBack = () => {
             onSubmit={handleSubmit}
           >
             {({ values, errors, touched, handleChange, handleBlur, validateForm }) => {
-              const address = 'contactInfo.physicalLocation.address.';
-              const touchedPostalCode = getIn(touched, `${address}postalCode`);
-              const touchedAddressLine = getIn(touched, `${address}addressLine`);
-              const touchedNumber = getIn(touched, `${address}number`);
-              const touchedAddressLine2 = getIn(touched, `${address}addressLine2`);
-              const touchedNeighborhood = getIn(touched, `${address}neighborhood`);
-              const touchedCityName = getIn(touched, `${address}cityName`);
-              const touchedStateProvinceCode = getIn(touched, `${address}stateProvinceCode`);
-
-              const errorPostalCode = getIn(errors, `${address}postalCode`);
-              const errorAddressLine = getIn(errors, `${address}addressLine`);
-              const errorNumber = getIn(errors, `${address}number`);
-              const errorAddressLine2 = getIn(errors, `${address}addressLine2`);
-              const errorNeighborhood = getIn(errors, `${address}neighborhood`);
-
-              const errorCityName = getIn(errors, `${address}cityName`);
-              const errorStateProvinceCode = getIn(errors, `${address}stateProvinceCode`);
+
 
               return (
               <Form noValidate style={{ padding: '16px', borderRadius: '8px', display: 'grid', gap: '24px'}}>
@@ -307,64 +291,11 @@ const handleBack = () => {
                   ))}
                 </Stepper>
 
-                {activeStep === 0 && <Step1PropertyInfo
-                  props={{
-                    propertyName: { value: values.propertyName, error: errors.propertyName, touched: touched.propertyName },
-                    propertyCategory: { value: values.propertyCategory, error: errors.propertyCategory, touched: touched.propertyCategory },
-                    propertyOrganization: { value: values.propertyOrganization, error: errors.propertyOrganization, touched: touched.propertyOrganization },
-                  }}
-                  handleChange={handleChange}
-                  handleBlur={handleBlur}
-                 />}
+                {activeStep === 0 && <Step1PropertyInfo />}
 
-                {activeStep === 1 && <Step2HouseRules
-                  props={{
-                    checkInFrom: { touched: touched.propertyInfo?.checkInFrom, error: errors.propertyInfo?.checkInFrom, value: values.propertyInfo?.checkInFrom },
-                    checkOutTo: { touched: touched.propertyInfo?.checkOutTo, error: errors.propertyInfo?.checkOutTo, value: values.propertyInfo?.checkOutTo },
-                  }}
-                />}
+                {activeStep === 1 && <Step2HouseRules/>}
 
-                {activeStep === 2 && <Step3Address
-                    props={{
-                      postalCode: {
-                        touched: touchedPostalCode,
-                        error: errorPostalCode,
-                        value: values.contactInfo.physicalLocation.address.postalCode,
-                      },
-                      addressLine: {
-                        touched: touchedAddressLine,
-                        error: errorAddressLine,
-                        value: values.contactInfo.physicalLocation.address.addressLine,
-                      },
-                      number: {
-                        touched: touchedNumber,
-                        error: errorNumber,
-                        value: values.contactInfo.physicalLocation.address.number,
-                      },
-                      addressLine2: {
-                        touched: touchedAddressLine2,
-                        error: errorAddressLine2,
-                        value: values.contactInfo.physicalLocation.address.addressLine2,
-                      },
-                      neighborhood: {
-                        touched: touchedNeighborhood,
-                        error: errorNeighborhood,
-                        value: values.contactInfo.physicalLocation.address.neighborhood,
-                      },
-                      cityName: {
-                        touched: touchedCityName,
-                        error: errorCityName,
-                        value: values.contactInfo.physicalLocation.address.cityName,
-                      },
-                      stateProvinceCode: {
-                        touched: touchedStateProvinceCode,
-                        error: errorStateProvinceCode,
-                        value: values.contactInfo.physicalLocation.address.stateProvinceCode,
-                      },
-                    }}
-                    handleBlur={handleBlur}
-                    handleChange={handleChange}
-                  />}
+                {activeStep === 2 && <Step3Address />}
 
                 {activeStep === 3 && (
                     <div>

diff --git a/src/lib/features/properties/propertyFormSteps/Step1PropertyInfo.tsx b/src/lib/features/properties/propertyFormSteps/Step1PropertyInfo.tsx
@@ -1,20 +1,10 @@
 import { FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
-import { Field } from "formik";
+import { Field, useFormikContext } from "formik";
 import { PROPERTY_CATEGORIES } from "../constants/propertyCategories";
-import { FieldProps, FormEventProps } from "./types";
+import { FormValues } from "../PropertyForm";
 
-type PropertyInfoFields = {
-    propertyName: FieldProps;
-    propertyCategory: FieldProps;
-    propertyOrganization: FieldProps;
-};
-
-interface PropertyInfoProps extends FormEventProps {
-    props: PropertyInfoFields;
-};
-
-export default function Step1PropertyInfo({ props, handleChange, handleBlur }: PropertyInfoProps) {
-    const { propertyName, propertyCategory, propertyOrganization } = props;
+export default function Step1PropertyInfo() {
+    const { values: { propertyName, propertyCategory, propertyOrganization }, touched, errors, handleChange, handleBlur } = useFormikContext<FormValues>();
     return (
         <>
         <TextField
@@ -23,11 +13,11 @@ export default function Step1PropertyInfo({ props, handleChange, handleBlur }: P
             fullWidth
             name="propertyName"
             label="Nome da propriedade"
-            value={propertyName.value}
+            value={propertyName}
             onChange={handleChange}
             onBlur={handleBlur}
-            error={propertyName.touched && !!propertyName.error}
-            helperText={propertyName.touched && propertyName.error}
+            error={touched.propertyName && !!errors.propertyName}
+            helperText={touched.propertyName && errors.propertyName}
             autoFocus
         />
         <FormControl variant='standard' fullWidth>
@@ -36,7 +26,10 @@ export default function Step1PropertyInfo({ props, handleChange, handleBlur }: P
             as={Select}
             id='propertyCategory'
             name="propertyCategory"
-            error={propertyCategory.touched && !!propertyCategory.error}
+            value={propertyCategory}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            error={touched.propertyCategory && !!errors.propertyCategory}
             >
             {Object.values(PROPERTY_CATEGORIES).map((category) => (
                 <MenuItem key={category.code} value={category.code}>
@@ -52,11 +45,11 @@ export default function Step1PropertyInfo({ props, handleChange, handleBlur }: P
             fullWidth
             name="propertyOrganization"
             label="Nome da organização"
-            value={propertyOrganization.value}
+            value={propertyOrganization}
             onChange={handleChange}
             onBlur={handleBlur}
-            error={propertyOrganization.touched && !!propertyOrganization.error}
-            helperText={propertyOrganization.touched && propertyOrganization.error}
+            error={touched.propertyOrganization && !!errors.propertyOrganization}
+            helperText={touched.propertyOrganization && errors.propertyOrganization}
             />
         </div>
         </>

diff --git a/src/lib/features/properties/propertyFormSteps/Step2HouseRules.tsx b/src/lib/features/properties/propertyFormSteps/Step2HouseRules.tsx
@@ -1,19 +1,10 @@
 import { FlexContainer } from "@/lib/common/components/styles/form";
 import { TextField } from "@mui/material";
-import { Field } from "formik";
-import { FieldProps } from "./types";
+import { Field, useFormikContext } from "formik";
+import { FormValues } from "../PropertyForm";
 
-type HouseRulesFields = {
-    checkInFrom: FieldProps;
-    checkOutTo: FieldProps;
-};
-
-interface HouseRulesProps {
-    props: HouseRulesFields;
-}
-
-export default function Step2HouseRules({props}: HouseRulesProps) {
-    const { checkInFrom, checkOutTo } = props;
+export default function Step2HouseRules() {
+    const { values: { propertyInfo: {checkInFrom, checkOutTo}}, touched, errors, handleChange, handleBlur } = useFormikContext<FormValues>();
     return (
         <>
             <p>Horário de funcionamento</p>
@@ -24,17 +15,23 @@ export default function Step2HouseRules({props}: HouseRulesProps) {
                 name="propertyInfo.checkInFrom"
                 label="Aberto desde as"
                 type="time"
-                error={checkInFrom.touched && !!checkInFrom.error}
-                helperText={checkInFrom.touched && checkInFrom.error}
+                value={checkInFrom}
+                handleChange={handleChange}
+                handleBlur={handleBlur}
+                error={touched.propertyInfo?.checkInFrom && !!errors.propertyInfo?.checkInFrom}
+                helperText={touched.propertyInfo?.checkInFrom && errors.propertyInfo?.checkInFrom}
                 />
                 <Field
                 as={TextField}
                 fullWidth
                 name="propertyInfo.checkOutTo"
                 label="Fechado às"
                 type="time"
-                error={checkOutTo.touched && !!checkOutTo.error}
-                helperText={checkOutTo.touched && checkOutTo.error}
+                value={checkOutTo}
+                handleChange={handleChange}
+                handleBlur={handleBlur}
+                error={touched.propertyInfo?.checkOutTo && !!errors.propertyInfo?.checkOutTo}
+                helperText={touched.propertyInfo?.checkOutTo && errors.propertyInfo?.checkOutTo}
                 />
             </FlexContainer>
             </>

diff --git a/src/lib/features/properties/propertyFormSteps/Step3Address.tsx b/src/lib/features/properties/propertyFormSteps/Step3Address.tsx
@@ -1,30 +1,54 @@
 'use client';
 
 import * as React from 'react';
-import { TextField, Typography } from '@mui/material';
-import { FieldProps, FormEventProps } from './types';
 import { useCep } from '../hooks/useCep';
 import { useState, useEffect } from 'react';
 import { useFormikContext } from 'formik';
+import { FormValues } from '../PropertyForm';
+import { TextField, Typography } from '@mui/material';
 
-type AddressFields = {
-    postalCode: FieldProps;
-    addressLine: FieldProps;
-    number: FieldProps;
-    addressLine2: FieldProps;
-    neighborhood: FieldProps;
-    cityName: FieldProps;
-    stateProvinceCode: FieldProps;
-}
+export default function Step3Address() {
+    const {
+        values: {
+            contactInfo: {
+                physicalLocation: {
+                    address: {
+                        postalCode,
+                        addressLine,
+                        number,
+                        addressLine2,
+                        neighborhood,
+                        cityName,
+                        stateProvinceCode,
+                    },
+                },
+            },
+        },
+        touched,
+        errors,
+        handleChange,
+        handleBlur,
+        setFieldValue
+    } = useFormikContext<FormValues>();
+    const addressTouched = touched?.contactInfo?.physicalLocation?.address
+    const postalCodeTouched = addressTouched?.postalCode;
+    const addressLineTouched = addressTouched?.addressLine;
+    const numberTouched = addressTouched?.number;
+    const addressLine2Touched = addressTouched?.addressLine2;
+    const neighborhoodTouched = addressTouched?.neighborhood;
+    const cityNameTouched = addressTouched?.cityName;
+    const stateProvinceCodeTouched = addressTouched?.stateProvinceCode;
 
-interface AddressProps extends FormEventProps {
-    props: AddressFields
-}
+    const addressError = errors?.contactInfo?.physicalLocation?.address;
+    const postalCodeError = addressError?.postalCode;
+    const addressLineError = addressError?.addressLine;
+    const numberError = addressError?.number;
+    const addressLine2Error = addressError?.addressLine2;
+    const neighborhoodError = addressError?.neighborhood;
+    const cityNameError = addressError?.cityName;
+    const stateProvinceCodeError = addressError?.stateProvinceCode;
 
-export default function Step3Address({props, handleChange, handleBlur}: AddressProps) {
-    const { postalCode, addressLine, number, addressLine2, neighborhood, cityName, stateProvinceCode } = props;
     const [shouldFetch, setShouldFetch] = useState(false);
-    const { setFieldValue } = useFormikContext();
     const [addressData, setAddressData] = useState({
         cep: "",
         logradouro: "",
@@ -86,11 +110,11 @@ export default function Step3Address({props, handleChange, handleBlur}: AddressP
                             variant='standard'
                             name={`contactInfo.physicalLocation.address.postalCode`}
                             label="CEP"
-                            value={postalCode.value ?? ''}
+                            value={postalCode ?? ''}
                             onChange={handleSearchPostalCode}
                             onBlur={handleBlur}
-                            error={postalCode.touched && !!postalCode.error}
-                            helperText={postalCode.touched && postalCode.error}
+                            error={postalCodeTouched && !!postalCodeError}
+                            helperText={postalCodeTouched && postalCodeError}
                         />
                         {error && <span style={{ color: '#D2261D' }}>Não foi possível encontrar o CEP</span>}
                     </div>
@@ -99,64 +123,64 @@ export default function Step3Address({props, handleChange, handleBlur}: AddressP
                     variant='standard'
                     name={`contactInfo.physicalLocation.address.addressLine`}
                     label="Endereço"
-                    value={addressLine.value ?? ''}
+                    value={addressLine ?? ''}
                     onChange={handleChange}
                     onBlur={handleBlur}
-                    error={addressLine.touched && !!addressLine.error}
-                    helperText={addressLine.touched && addressLine.error}
+                    error={addressLineTouched && !!addressLineError}
+                    helperText={addressLineTouched && addressLineError}
                 />
                 <TextField
                     variant='standard'
                     name={`contactInfo.physicalLocation.address.number`}
                     placeholder="Número"
-                    value={number.value}
+                    value={number}
                     onChange={handleChange}
                     onBlur={handleBlur}
-                    error={number.touched && !!number.error}
-                    helperText={number.touched && number.error}
+                    error={numberTouched && !!numberError}
+                    helperText={numberTouched && numberError}
                     type="number"
                 />
                 <TextField
                     variant='standard'
                     name={`contactInfo.physicalLocation.address.addressLine2`}
                     label="Complemento"
-                    value={addressLine2.value ?? ''}
+                    value={addressLine2 ?? ''}
                     onChange={handleChange}
                     onBlur={handleBlur}
-                    error={addressLine2.touched && !!addressLine2.error}
-                    helperText={addressLine2.touched && addressLine2.error}
+                    error={addressLine2Touched && !!addressLine2Error}
+                    helperText={addressLine2Touched && addressLine2Error}
                     />
                 <TextField
                     variant='standard'
                     name={`contactInfo.physicalLocation.address.neighborhood`}
                     label="Complemento"
-                    value={neighborhood.value ?? ''}
+                    value={neighborhood ?? ''}
                     onChange={handleChange}
                     onBlur={handleBlur}
-                    error={neighborhood.touched && !!neighborhood.error}
-                    helperText={neighborhood.touched && neighborhood.error}
+                    error={neighborhoodTouched && !!neighborhoodError}
+                    helperText={neighborhoodTouched && neighborhoodError}
                     />
                 <TextField
                     required
                     variant='standard'
                     name={`contactInfo.physicalLocation.address.cityName`}
                     label="Cidade"
-                    value={cityName.value ?? ''}
+                    value={cityName ?? ''}
                     onChange={handleChange}
                     onBlur={handleBlur}
-                    error={cityName.touched && !!cityName.error}
-                    helperText={cityName.touched && cityName.error}
+                    error={cityNameTouched && !!cityNameError}
+                    helperText={cityNameTouched && cityNameError}
                 />
                 <TextField
                     required
                     variant='standard'
                     name={`contactInfo.physicalLocation.address.stateProvinceCode`}
                     label="Estado"
-                    value={stateProvinceCode.value ?? ''}
+                    value={stateProvinceCode ?? ''}
                     onChange={handleChange}
                     onBlur={handleBlur}
-                    error={stateProvinceCode.touched && !!stateProvinceCode.error}
-                    helperText={stateProvinceCode.touched && stateProvinceCode.error}
+                    error={stateProvinceCodeTouched && !!stateProvinceCodeError}
+                    helperText={stateProvinceCodeTouched && stateProvinceCodeError}
                 />
                 </div>
             </>