Styjun

I understand this may be an unothodox question, or even 2 in one, but
please believe me when I say thiese 2 cannot be answered seperately.
Please keep that in mind. Thank you for your time..

My question revolves around a particular scenario I am currently facing. I am using the withFormik H.O.C, along with Yup, to handle various cases in my forms, such as submitting, errorHandling, and a few more depending on the situation.

Usually, my form situation involves a Create and an Edit Mode.

onCreate => Pass the defaultvalues and call the POST Method, from my services.

onEdit => Populate the values with the current Item Values from the Server, and call the PUT Method from the services.

Example

 const validationSchema = Yup.object().shape(
 username: Yup.string('Provide a Username').required('Username is Required'),
 email: Yup.string().email('Provide a Valid email Address'),
 password: Yup.string('Provide a Password').required('Password is required'),
 confirmPassword: Yup.string('Provide your password again')
 .required('Password Confirmation is Required')
 .oneOf([Yup.ref('password')], 'Passwords do not match'),
 );

 const EnchancedCreateUserForm = withFormik(
 mapPropsToValues: (
 user = 
 username: '',
 email: '',
 password: '',
 confirmPassword: '',
 
 ) => ( ...user ),

 validationSchema,

 handleSubmit: (values, props, setSubmitting ) => 
 const doSubmit, onSave, inEditMode = props;

 const saveUser = inEditMode ? updateUser : createUser;
 return doSubmit(saveUser, values)
 .then(() => 
 setSubmitting(false);
 onSave();
 )
 .catch(() => 
 setSubmitting(false);
 );
 ,

 displayName: 'AddEditUser'
 )(AddEditUser);

That is actually been working great for me, since my Create and Edit Form are the same. And here lay my 2 problems.

Current Situation
My current form implementation has 2 views. One unified one on Create with those 4 fields, and on Edit, I have 2 forms. One for passwordChange and one for infoChange. Which makes me face the following problems.

I would need 3 FormValidationSchemas(CREATE, EDIT-INFO, EDIT-PASSWORD). Which I am not sure formik even supports.
How exactly, should I handle the rest of the functionality, onSubmit, ErrorMessage for both field error and statusError?
If you could actually help me out figure a way of attack it would be great.

I read the validationSchema can be passed a function that returns a validationSchema, so I did this, but it is not working:

 const validationFullSchema = Yup.object().shape(
 username: Yup.string('Provide a Username').required('Username is Required'),
 email: Yup.string().email('Provide a Valid email Address'),
 password: Yup.string('Provide a Password').required('Password is required'),
 confirmPassword: Yup.string('Provide your password again')
 .required('Password Confirmation is Required')
 .oneOf([Yup.ref('password')], 'Passwords do not match'),
 );

 const validationEditSchema = Yup.object().shape(
 username: Yup.string('Provide a Username').required('Username is Required'),
 email: Yup.string().email('Provide a Valid email Address'),
 );

 const validationSchemaFn = () => 
 If ( efitMode ) 
 return validationCreateSchema

return validationEditSchema

 validationSchema: validationSchemaFn(),
 // Which throws an error
 // Failed to load app. Error: Cannot read property 'props' of undefined

I probably am doing something wrong, but I put it here just in case.

My Opinion on the matter

• Create 2 Form Components(PasswordFormComponent, InfoFormComponent), and wrap each one with the H.O.C, allowing them access to the withFormik independantly.


• For CreateForm, convert it into a container Component, that renders both of those components


• For Edit instead of calling the whole form, which is currently what is happening, call for each situation the specific component.

What do you of my proposed solution? If you like it, could you please make it better or help with some code samples, especially in the multiple validationSchemas issues. Thank you!!