From 3e3080d5f4f5a67faa87eb5c1140a6bf4eb46ebb Mon Sep 17 00:00:00 2001
From: soupette <cyril@strapi.io>
Date: Thu, 26 Aug 2021 15:12:19 +0200
Subject: [PATCH] Init onSubmit providers

---
 .../admin/src/components/FormModal/index.js   |  13 ++-
 .../admin/src/pages/Providers/index.js        | 102 +++++++-----------
 2 files changed, 49 insertions(+), 66 deletions(-)

diff --git a/packages/plugins/users-permissions/admin/src/components/FormModal/index.js b/packages/plugins/users-permissions/admin/src/components/FormModal/index.js
index 4129d42965..82a866b014 100644
--- a/packages/plugins/users-permissions/admin/src/components/FormModal/index.js
+++ b/packages/plugins/users-permissions/admin/src/components/FormModal/index.js
@@ -26,8 +26,10 @@ import Input from './Input';
 const FormModal = ({
   headerBreadcrumbs,
   initialData,
+  isSubmiting,
   layout,
   isOpen,
+  onSubmit,
   onToggle,
   providerToEditName,
 }) => {
@@ -46,7 +48,12 @@ const FormModal = ({
           ))}
         </Breadcrumbs>
       </ModalHeader>
-      <Formik initialValues={initialData} validationSchema={layout.schema} validateOnChange={false}>
+      <Formik
+        onSubmit={values => onSubmit(values)}
+        initialValues={initialData}
+        validationSchema={layout.schema}
+        validateOnChange={false}
+      >
         {({ errors, handleChange, values }) => {
           return (
             <Form>
@@ -82,7 +89,7 @@ const FormModal = ({
                 }
                 endActions={
                   <>
-                    <Button type="submit">
+                    <Button type="submit" loading={isSubmiting}>
                       {formatMessage({ id: 'app.components.Button.save', defaultMessage: 'Save' })}
                     </Button>
                   </>
@@ -109,6 +116,8 @@ FormModal.propTypes = {
     schema: PropTypes.object,
   }).isRequired,
   isOpen: PropTypes.bool.isRequired,
+  isSubmiting: PropTypes.bool.isRequired,
+  onSubmit: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
   providerToEditName: PropTypes.string,
 };
diff --git a/packages/plugins/users-permissions/admin/src/pages/Providers/index.js b/packages/plugins/users-permissions/admin/src/pages/Providers/index.js
index 71535015ab..7f0f515ebd 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Providers/index.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Providers/index.js
@@ -1,8 +1,4 @@
-import React, {
-  useMemo,
-  // useRef,
-  useState,
-} from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import {
   SettingsPageTitle,
@@ -14,11 +10,11 @@ import {
   // useOverlayBlocker,
   LoadingIndicatorPage,
   // SizedInput,
-  // useTracking,
+  useTracking,
   // getYupInnerErrors,
   // request,
-  // useNotification,
-  // useOverlayBlocker,
+  useNotification,
+  useOverlayBlocker,
   CheckPagePermissions,
 } from '@strapi/helper-plugin';
 import has from 'lodash/has';
@@ -51,15 +47,15 @@ import FormModal from '../../components/FormModal';
 export const ProvidersPage = () => {
   const { formatMessage } = useIntl();
 
-  // const { trackUsage } = useTracking();
-  // const trackUsageRef = useRef(trackUsage);
+  const { trackUsage } = useTracking();
+  const trackUsageRef = useRef(trackUsage);
   const [isOpen, setIsOpen] = useState(false);
-  // const [isSubmiting, setIsSubmiting] = useState(false);
+  const [isSubmiting, setIsSubmiting] = useState(false);
   // const buttonSubmitRef = useRef(null);
   // const [showForm, setShowForm] = useState(false);
   const [providerToEditName, setProviderToEditName] = useState(null);
-  // const toggleNotification = useNotification();
-  // const { lockApp, unlockApp } = useOverlayBlocker();
+  const toggleNotification = useNotification();
+  const { lockApp, unlockApp } = useOverlayBlocker();
 
   const updatePermissions = useMemo(() => {
     return { update: pluginPermissions.updateProviders };
@@ -133,66 +129,42 @@ export const ProvidersPage = () => {
   //   setShowForm(true);
   // }, []);
 
-  // const handleSubmit = useCallback(
-  //   async e => {
-  //     e.preventDefault();
-  //     const { schema } = layoutToRender;
-  //     let errors = {};
+  const handleSubmit = async () => {
+    // e.preventDefault();
 
-  //     setIsSubmiting(true);
+    setIsSubmiting(true);
 
-  //     try {
-  //       await schema.validate(modifiedData[providerToEditName], { abortEarly: false });
-  //       lockApp();
+    lockApp();
 
-  //       try {
-  //         trackUsageRef.current('willEditAuthenticationProvider');
+    try {
+      trackUsageRef.current('willEditAuthenticationProvider');
 
-  //         await request(getRequestURL('providers'), {
-  //           method: 'PUT',
-  //           body: { providers: modifiedData },
-  //         });
+      // await request(getRequestURL('providers'), {
+      //   method: 'PUT',
+      //   body: { providers: modifiedData },
+      // });
 
-  //         trackUsageRef.current('didEditAuthenticationProvider');
+      trackUsageRef.current('didEditAuthenticationProvider');
 
-  //         toggleNotification({
-  //           type: 'success',
-  //           message: { id: getTrad('notification.success.submit') },
-  //         });
+      toggleNotification({
+        type: 'success',
+        message: { id: getTrad('notification.success.submit') },
+      });
 
-  //         dispatchSubmitSucceeded();
+      // dispatchSubmitSucceeded();
 
-  //         handleToggle();
-  //       } catch (err) {
-  //         console.error(err);
-  //         toggleNotification({
-  //           type: 'warning',
-  //           message: { id: 'notification.error' },
-  //         });
-  //       }
-  //     } catch (err) {
-  //       console.error(err);
-  //       errors = getYupInnerErrors(err);
-  //       console.log(errors);
-  //     }
+      // handleToggle();
+    } catch (err) {
+      console.error(err);
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    }
 
-  //     dispatchSetFormErrors(errors);
-
-  //     setIsSubmiting(false);
-  //     unlockApp();
-  //   },
-  //   [
-  //     dispatchSetFormErrors,
-  //     dispatchSubmitSucceeded,
-  //     layoutToRender,
-  //     handleToggle,
-  //     modifiedData,
-  //     providerToEditName,
-  //     toggleNotification,
-  //     lockApp,
-  //     unlockApp,
-  //   ]
-  // );
+    setIsSubmiting(false);
+    unlockApp();
+  };
 
   console.log({ modifiedData, providerToEditName });
 
@@ -296,6 +268,7 @@ export const ProvidersPage = () => {
       <FormModal
         initialData={modifiedData[providerToEditName]}
         isOpen={isOpen}
+        isSubmiting={isSubmiting}
         layout={layoutToRender}
         headerBreadcrumbs={[
           formatMessage({
@@ -305,6 +278,7 @@ export const ProvidersPage = () => {
           upperFirst(providerToEditName),
         ]}
         onToggle={handleToggleModal}
+        onSubmit={handleSubmit}
         providerToEditName={providerToEditName}
       />