Init onSubmit providers

This commit is contained in:
soupette 2021-08-26 15:12:19 +02:00
parent c6c8bc4797
commit 3e3080d5f4
2 changed files with 49 additions and 66 deletions

View File

@ -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,
};

View File

@ -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}
/>