From 3bfc7bd14bfa62a529d15ce8df09645dda7218ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Wed, 21 Feb 2018 22:41:32 +0000 Subject: [PATCH] fix(my-joy-beta): validate tags and metadata --- .../containers/create-instance/metadata.js | 26 ++++++++++- .../src/containers/create-instance/tags.js | 24 +++++++++- .../src/containers/instances/metadata.js | 46 +++++++++++++++---- .../src/containers/instances/tags.js | 34 ++++++++++++-- 4 files changed, 112 insertions(+), 18 deletions(-) diff --git a/packages/my-joy-beta/src/containers/create-instance/metadata.js b/packages/my-joy-beta/src/containers/create-instance/metadata.js index 94178b00..4464a348 100644 --- a/packages/my-joy-beta/src/containers/create-instance/metadata.js +++ b/packages/my-joy-beta/src/containers/create-instance/metadata.js @@ -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 }) => ( 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`, diff --git a/packages/my-joy-beta/src/containers/create-instance/tags.js b/packages/my-joy-beta/src/containers/create-instance/tags.js index 8d64daf1..50cbdd92 100644 --- a/packages/my-joy-beta/src/containers/create-instance/tags.js +++ b/packages/my-joy-beta/src/containers/create-instance/tags.js @@ -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`, diff --git a/packages/my-joy-beta/src/containers/instances/metadata.js b/packages/my-joy-beta/src/containers/instances/metadata.js index d9052fc2..f65dfcf5 100644 --- a/packages/my-joy-beta/src/containers/instances/metadata.js +++ b/packages/my-joy-beta/src/containers/instances/metadata.js @@ -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( diff --git a/packages/my-joy-beta/src/containers/instances/tags.js b/packages/my-joy-beta/src/containers/instances/tags.js index e2f46e36..27fef89b 100644 --- a/packages/my-joy-beta/src/containers/instances/tags.js +++ b/packages/my-joy-beta/src/containers/instances/tags.js @@ -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;