reorder main files elements

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 =
+  const headersActions = [
-    isCreating || (!isCreating && !areActionDisabled) || isTriggering;
-
-  const actions = [
     {
       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}`, {
+      const { data } = await request(`/admin/webhooks/${id}/trigger`, {
-        method: 'GET',
+        method: 'POST',
+        signal,
       });
 
       dispatch({
-        type: 'GET_DATA_SUCCEEDED',
+        type: 'TRIGGER_SUCCEEDED',
-        data,
+        response: data,
       });
     } catch (err) {
       if (err.code !== 20) {
         strapi.notification.error('notification.error');
       }
+      dispatch({
+        type: 'IS_TRIGGERING',
+      });
     }
-  }, [id]);
+  };
 
-  const submitForm = () => {
+  const handleRemove = index => {
-    if (!isCreating) {
+    dispatch({
-      updateWebhook();
+      type: 'ON_HEADER_REMOVE',
-    } else {
+      index,
-      createWebhooks();
+    });
+    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 => {
+  const submitForm = () => {
-    if (!error) {
+    if (!isCreating) {
-      return null;
+      updateWebhook();
-    }
+    } else {
-    if (typeof error === 'string') {
+      createWebhooks();
-      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 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 (
     <Wrapper>
       <BackHeader onClick={goBack} />

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 (
     <Wrapper>
       <Header {...headerProps} />