fix(my-joy-beta): validate tags and metadata

This commit is contained in:
Sérgio Ramos 2018-02-21 22:41:32 +00:00
parent 4593980883
commit 3bfc7bd14b
4 changed files with 112 additions and 18 deletions

View File

@ -18,6 +18,8 @@ const FORM_NAME_CREATE = 'CREATE-INSTANCE-METADATA-ADD';
const FORM_NAME_EDIT = i => `CREATE-INSTANCE-METADATA-EDIT-${i}`;
export const Metadata = ({
id,
step,
metadata = [],
expanded,
proceeded,
@ -30,8 +32,8 @@ export const Metadata = ({
handleChangeAddOpen,
handleNext,
handleEdit,
id,
step
shouldAsyncValidate,
asyncValidate
}) => (
<Fragment>
<Title
@ -71,6 +73,8 @@ export const Metadata = ({
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={newValue => handleUpdateMetadata(index, newValue)}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={asyncValidate}
>
{props => (
<Fragment>
@ -102,6 +106,8 @@ export const Metadata = ({
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={handleAddMetadata}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={asyncValidate}
>
{props =>
expanded && addOpen ? (
@ -166,6 +172,22 @@ export default compose(
handleEdit: () => {
return history.push(`/~create/metadata${history.location.search}`);
},
shouldAsyncValidate: ({ trigger }) => {
return trigger === 'submit';
},
asyncValidate: async ({ name = '', value = '' }) => {
const isNameInvalid = name.length === 0;
const isValueInvalid = value.length === 0;
if (!isNameInvalid && !isValueInvalid) {
return;
}
throw {
name: isNameInvalid,
value: isValueInvalid
};
},
handleAddMetadata: value => {
const toggleToClosed = set({
name: `create-instance-metadata-add-open`,

View File

@ -26,6 +26,7 @@ const FORM_NAME_CREATE = 'CREATE-INSTANCE-TAGS-ADD';
const FORM_NAME_EDIT = i => `CREATE-INSTANCE-TAGS-EDIT-${i}`;
export const Tags = ({
step,
tags = [],
expanded,
proceeded,
@ -37,8 +38,9 @@ export const Tags = ({
handleCancelEdit,
handleChangeAddOpen,
handleNext,
step,
handleEdit
handleEdit,
shouldAsyncValidate,
asyncValidate
}) => (
<Fragment>
<Title
@ -86,6 +88,8 @@ export const Tags = ({
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={handleAddTag}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={asyncValidate}
>
{props =>
expanded && addOpen ? (
@ -147,6 +151,22 @@ export default compose(
handleEdit: () => {
return history.push(`/~create/tags${history.location.search}`);
},
shouldAsyncValidate: ({ trigger }) => {
return trigger === 'submit';
},
asyncValidate: async ({ name = '', value = '' }) => {
const isNameInvalid = name.length === 0;
const isValueInvalid = value.length === 0;
if (!isNameInvalid && !isValueInvalid) {
return;
}
throw {
name: isNameInvalid,
value: isValueInvalid
};
},
handleAddTag: value => {
const toggleToClosed = set({
name: `create-instance-tags-add-open`,

View File

@ -47,12 +47,19 @@ export const Metadata = ({
handleCancel,
handleCreate,
handleUpdate,
handleRemove
handleRemove,
shouldAsyncValidate,
asyncValidate
}) => {
const _loading = !(loading && !metadata.length) ? null : <StatusLoader />;
const _add = addOpen ? (
<ReduxForm form={ADD_FORM_NAME} onSubmit={handleCreate}>
<ReduxForm
form={ADD_FORM_NAME}
onSubmit={handleCreate}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={asyncValidate}
>
{props => (
<MetadataAddForm
{...props}
@ -87,6 +94,8 @@ export const Metadata = ({
initialValues={initialValues}
destroyOnUnmount={false}
onSubmit={handleUpdate}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={asyncValidate}
>
{props => (
<MetadataEditForm
@ -198,15 +207,34 @@ export default compose(
} = ownProps;
return {
handleCancel: form =>
dispatch([
handleCancel: form => {
return dispatch([
set({ name: `${form}-expanded`, value: false }),
dispatch(reset(form))
]),
handleToggleAddOpen: value =>
dispatch(set({ name: `add-metadata-open`, value })),
handleUpdateExpanded: (form, expanded) =>
dispatch(set({ name: `${form}-expanded`, value: expanded })),
]);
},
handleToggleAddOpen: value => {
return dispatch(set({ name: `add-metadata-open`, value }));
},
handleUpdateExpanded: (form, expanded) => {
return dispatch(set({ name: `${form}-expanded`, value: expanded }));
},
shouldAsyncValidate: ({ trigger }) => {
return trigger === 'submit';
},
asyncValidate: async ({ name = '', value = '' }) => {
const isNameInvalid = name.length === 0;
const isValueInvalid = value.length === 0;
if (!isNameInvalid && !isValueInvalid) {
return;
}
throw {
name: isNameInvalid,
value: isValueInvalid
};
},
handleCreate: async ({ name, value }) => {
// call mutation
const [err] = await intercept(

View File

@ -48,7 +48,9 @@ export const Tags = ({
handleCancel,
handleEdit,
handleRemove,
handleCreate
handleCreate,
shouldAsyncValidate,
asyncValidate
}) => {
const _loading = !(loading && !tags.length) ? null : <StatusLoader />;
@ -57,6 +59,8 @@ export const Tags = ({
form={ADD_FORM_NAME}
onSubmit={handleCreate}
onCancel={() => handleToggleAddOpen(false)}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={asyncValidate}
>
{TagsAddForm}
</ReduxForm>
@ -95,6 +99,8 @@ export const Tags = ({
<ReduxForm
form={editing.form}
initialValues={{ name: editing.name, value: editing.value }}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={asyncValidate}
onSubmit={handleEdit}
>
{props => (
@ -197,10 +203,28 @@ export default compose(
},
(dispatch, ownProps) => {
return {
handleToggleAddOpen: value =>
dispatch(set({ name: `add-tags-open`, value })),
handleToggleEditing: value =>
dispatch(set({ name: `editing-tag`, value })),
handleToggleAddOpen: value => {
return dispatch(set({ name: `add-tags-open`, value }));
},
handleToggleEditing: value => {
return dispatch(set({ name: `editing-tag`, value }));
},
shouldAsyncValidate: ({ trigger }) => {
return trigger === 'submit';
},
asyncValidate: async ({ name = '', value = '' }) => {
const isNameInvalid = name.length === 0;
const isValueInvalid = value.length === 0;
if (!isNameInvalid && !isValueInvalid) {
return;
}
throw {
name: isNameInvalid,
value: isValueInvalid
};
},
handleEdit: async ({ name, value }, _, { form, initialValues }) => {
const { instance, deleteTag, updateTags, refetch } = ownProps;