From e6b4f421d729bd1f7427e1fd1750cc0eba74718e Mon Sep 17 00:00:00 2001 From: Virginie Ky Date: Thu, 16 Jan 2020 11:00:38 +0100 Subject: [PATCH] reorder main files elements --- .../src/containers/Webhooks/EditView/index.js | 259 +++++++++--------- .../src/containers/Webhooks/ListView/index.js | 118 ++++---- 2 files changed, 182 insertions(+), 195 deletions(-) diff --git a/packages/strapi-admin/admin/src/containers/Webhooks/EditView/index.js b/packages/strapi-admin/admin/src/containers/Webhooks/EditView/index.js index 7401c4aed7..44ba9c59db 100644 --- a/packages/strapi-admin/admin/src/containers/Webhooks/EditView/index.js +++ b/packages/strapi-admin/admin/src/containers/Webhooks/EditView/index.js @@ -31,6 +31,7 @@ function EditView() { const [submittedOnce, setSubmittedOnce] = useState(false); const [reducerState, dispatch] = useReducer(reducer, initialState); const { push } = useHistory(); + const { id } = useParams(); const { formErrors, @@ -40,13 +41,6 @@ function EditView() { triggerResponse, } = reducerState.toJS(); - const { name } = modifiedData; - const { id } = useParams(); - const isCreating = id === 'create'; - - const abortController = new AbortController(); - const { signal } = abortController; - useEffect(() => { if (!isCreating) { fetchData(); @@ -58,21 +52,48 @@ function EditView() { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - /* Header props */ + const fetchData = useCallback(async () => { + try { + const { data } = await request(`/admin/webhooks/${id}`, { + method: 'GET', + }); + + dispatch({ + type: 'GET_DATA_SUCCEEDED', + data, + }); + } catch (err) { + if (err.code !== 20) { + strapi.notification.error('notification.error'); + } + } + }, [id]); + + const abortController = new AbortController(); + const { signal } = abortController; + const isCreating = id === 'create'; + const { name } = modifiedData; const areActionDisabled = isEqual(initialData, modifiedData) || Object.keys(formErrors).length > 0; + const isTriggerActionDisabled = + isCreating || (!isCreating && !areActionDisabled) || isTriggering; + + const formatError = Object.keys(formErrors) + .filter(key => key.includes('headers')) + .reduce((obj, key) => { + obj[key] = formErrors[key]; + return obj; + }, {}); + const headerTitle = isCreating ? formatMessage({ id: `Settings.webhooks.create`, }) : name; - const isTriggerActionDisabled = - isCreating || (!isCreating && !areActionDisabled) || isTriggering; - - const actions = [ + const headersActions = [ { color: 'primary', disabled: isTriggerActionDisabled, @@ -126,36 +147,103 @@ function EditView() { title: { label: headerTitle, }, - actions: actions, + actions: headersActions, }; - /* Data methods */ + const handleBlur = () => { + if (submittedOnce) { + checkFormErrors(); + } + }; + + const handleChange = ({ target: { name, value } }) => { + dispatch({ + type: 'ON_CHANGE', + keys: name.split('.'), + value, + }); + }; + + const handleClick = () => { + dispatch({ + type: 'ADD_NEW_HEADER', + keys: ['headers'], + }); + }; + + const handleTrigger = async () => { + dispatch({ + type: 'IS_TRIGGERING', + }); - const fetchData = useCallback(async () => { try { - const { data } = await request(`/admin/webhooks/${id}`, { - method: 'GET', + const { data } = await request(`/admin/webhooks/${id}/trigger`, { + method: 'POST', + signal, }); dispatch({ - type: 'GET_DATA_SUCCEEDED', - data, + type: 'TRIGGER_SUCCEEDED', + response: data, }); } catch (err) { if (err.code !== 20) { strapi.notification.error('notification.error'); } + dispatch({ + type: 'IS_TRIGGERING', + }); } - }, [id]); + }; - const submitForm = () => { - if (!isCreating) { - updateWebhook(); - } else { - createWebhooks(); + const handleRemove = index => { + dispatch({ + type: 'ON_HEADER_REMOVE', + index, + }); + resetHeadersErrors(); + }; + + const handleReset = () => + dispatch({ + type: 'RESET_FORM', + }); + + const handleSubmit = e => { + e.preventDefault(); + setSubmittedOnce(true); + checkFormErrors(true); + }; + + const checkFormErrors = async (submit = false) => { + const webhookToCheck = modifiedData; + set(webhookToCheck, 'headers', cleanHeaders(modifiedData.headers)); + + try { + await schema.validate(webhookToCheck, { + abortEarly: false, + }); + + setErrors({}); + if (submit) submitForm(); + } catch (err) { + setErrors(getYupInnerErrors(err)); + if (submit) strapi.notification.error('notification.form.error.fields'); } }; + const errorMessage = error => { + if (!error) { + return null; + } + if (typeof error === 'string') { + return formatMessage({ + id: error, + }); + } + return error; + }; + const createWebhooks = async () => { try { await request(`/admin/webhooks`, { @@ -188,65 +276,14 @@ function EditView() { } }; - /* Form user interactions */ + const goBack = () => push('/settings/webhooks'); + + const onCancelTrigger = () => { + abortController.abort(); - const handleReset = () => dispatch({ - type: 'RESET_FORM', + type: 'ON_TRIGGER_CANCELED', }); - - const handleBlur = () => { - if (submittedOnce) { - checkFormErrors(); - } - }; - - const handleChange = ({ target: { name, value } }) => { - dispatch({ - type: 'ON_CHANGE', - keys: name.split('.'), - value, - }); - }; - - const handleClick = () => { - dispatch({ - type: 'ADD_NEW_HEADER', - keys: ['headers'], - }); - }; - - const handleRemove = index => { - dispatch({ - type: 'ON_HEADER_REMOVE', - index, - }); - resetHeadersErrors(); - }; - - const handleSubmit = e => { - e.preventDefault(); - setSubmittedOnce(true); - checkFormErrors(true); - }; - - /* Validations */ - - const checkFormErrors = async (submit = false) => { - const webhookToCheck = modifiedData; - set(webhookToCheck, 'headers', cleanHeaders(modifiedData.headers)); - - try { - await schema.validate(webhookToCheck, { - abortEarly: false, - }); - - setErrors({}); - if (submit) submitForm(); - } catch (err) { - setErrors(getYupInnerErrors(err)); - if (submit) strapi.notification.error('notification.form.error.fields'); - } }; const resetHeadersErrors = () => { @@ -268,64 +305,14 @@ function EditView() { }); }; - const errorMessage = error => { - if (!error) { - return null; - } - if (typeof error === 'string') { - return formatMessage({ - id: error, - }); - } - return error; - }; - - /* Trigger events */ - - const handleTrigger = async () => { - dispatch({ - type: 'IS_TRIGGERING', - }); - - try { - const { data } = await request(`/admin/webhooks/${id}/trigger`, { - method: 'POST', - signal, - }); - - dispatch({ - type: 'TRIGGER_SUCCEEDED', - response: data, - }); - } catch (err) { - if (err.code !== 20) { - strapi.notification.error('notification.error'); - } - dispatch({ - type: 'IS_TRIGGERING', - }); + const submitForm = () => { + if (!isCreating) { + updateWebhook(); + } else { + createWebhooks(); } }; - const onCancelTrigger = () => { - abortController.abort(); - - dispatch({ - type: 'ON_TRIGGER_CANCELED', - }); - }; - - /* Nav */ - - const goBack = () => push('/settings/webhooks'); - - const formatError = Object.keys(formErrors) - .filter(key => key.includes('headers')) - .reduce((obj, key) => { - obj[key] = formErrors[key]; - return obj; - }, {}); - return ( diff --git a/packages/strapi-admin/admin/src/containers/Webhooks/ListView/index.js b/packages/strapi-admin/admin/src/containers/Webhooks/ListView/index.js index 07d2ac899b..cd296c2d8e 100644 --- a/packages/strapi-admin/admin/src/containers/Webhooks/ListView/index.js +++ b/packages/strapi-admin/admin/src/containers/Webhooks/ListView/index.js @@ -40,23 +40,6 @@ function ListView() { const getWebhookIndex = id => webhooks.findIndex(webhook => webhook.id === id); - const fetchData = async () => { - try { - const { data } = await request(`/admin/webhooks`, { - method: 'GET', - }); - - dispatch({ - type: 'GET_DATA_SUCCEEDED', - data, - }); - } catch (err) { - if (err.code !== 20) { - strapi.notification.error('notification.error'); - } - } - }; - // New button const addBtnLabel = formatMessage({ id: `Settings.webhooks.list.button.add`, @@ -113,6 +96,23 @@ function ListView() { items: webhooks, }; + const fetchData = async () => { + try { + const { data } = await request(`/admin/webhooks`, { + method: 'GET', + }); + + dispatch({ + type: 'GET_DATA_SUCCEEDED', + data, + }); + } catch (err) { + if (err.code !== 20) { + strapi.notification.error('notification.error'); + } + } + }; + const handleChange = (value, id) => { const updatedWebhooksToDelete = value ? [...webhooksToDelete, id] @@ -124,58 +124,16 @@ function ListView() { }); }; - const handleGoTo = to => { - push(`${pathname}/${to}`); - }; - const handleDeleteAllConfirm = async () => { await onDeleteAllCLick(); setShowModal(false); }; - const onDeleteAllCLick = async () => { - const body = { - ids: webhooksToDelete, - }; - - try { - await request(`/admin/webhooks/batch-delete`, { - method: 'POST', - body, - }); - - dispatch({ - type: 'WEBHOOKS_DELETED', - }); - } catch (err) { - if (err.code !== 20) { - strapi.notification.error('notification.error'); - } - } - }; - const handleDeleteConfirm = async id => { await onDeleteCLick(id); setShowModal(false); }; - const onDeleteCLick = async id => { - try { - await request(`/admin/webhooks/${id}`, { - method: 'DELETE', - }); - - dispatch({ - type: 'WEBHOOK_DELETED', - index: getWebhookIndex(id), - }); - } catch (err) { - if (err.code !== 20) { - strapi.notification.error('notification.error'); - } - } - }; - const handleEnabledChange = async (value, id) => { const webhookIndex = getWebhookIndex(id); @@ -213,6 +171,48 @@ function ListView() { } }; + const handleGoTo = to => { + push(`${pathname}/${to}`); + }; + + const onDeleteAllCLick = async () => { + const body = { + ids: webhooksToDelete, + }; + + try { + await request(`/admin/webhooks/batch-delete`, { + method: 'POST', + body, + }); + + dispatch({ + type: 'WEBHOOKS_DELETED', + }); + } catch (err) { + if (err.code !== 20) { + strapi.notification.error('notification.error'); + } + } + }; + + const onDeleteCLick = async id => { + try { + await request(`/admin/webhooks/${id}`, { + method: 'DELETE', + }); + + dispatch({ + type: 'WEBHOOK_DELETED', + index: getWebhookIndex(id), + }); + } catch (err) { + if (err.code !== 20) { + strapi.notification.error('notification.error'); + } + } + }; + return (