diff --git a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js index a1f9ef5da7..37a99d2083 100644 --- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js +++ b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js @@ -20,6 +20,8 @@ import { GenericInput, LoadingIndicatorPage, SettingsPageTitle, + useAPIErrorHandler, + useFetchClient, useFocusWhenNavigate, useNotification, useOverlayBlocker, @@ -33,7 +35,6 @@ import { useMutation, useQuery, useQueryClient } from 'react-query'; import { PERMISSIONS } from '../../constants'; import { getTrad } from '../../utils'; -import { fetchData, putAdvancedSettings } from './utils/api'; import layout from './utils/layout'; import schema from './utils/schema'; @@ -49,6 +50,9 @@ const AdvancedSettingsPage = () => { const { lockApp, unlockApp } = useOverlayBlocker(); const { notifyStatus } = useNotifyAT(); const queryClient = useQueryClient(); + const { get, put } = useFetchClient(); + const { formatAPIError } = useAPIErrorHandler(); + useFocusWhenNavigate(); const { @@ -56,28 +60,37 @@ const AdvancedSettingsPage = () => { allowedActions: { canUpdate }, } = useRBAC({ update: PERMISSIONS.updateAdvancedSettings }); - const { status: isLoadingData, data } = useQuery('advanced', () => fetchData(), { - onSuccess() { - notifyStatus( - formatMessage({ - id: getTrad('Form.advancedSettings.data.loaded'), - defaultMessage: 'Advanced settings data has been loaded', - }) - ); - }, - onError() { - toggleNotification({ - type: 'warning', - message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' }, - }); - }, - }); + const { isLoading: isLoadingData, data } = useQuery( + ['users-permissions', 'advanced'], + async () => { + const { data } = await get('/users-permissions/advanced'); - const isLoading = isLoadingForPermissions || isLoadingData !== 'success'; + return data; + }, + { + onSuccess() { + notifyStatus( + formatMessage({ + id: getTrad('Form.advancedSettings.data.loaded'), + defaultMessage: 'Advanced settings data has been loaded', + }) + ); + }, + onError() { + toggleNotification({ + type: 'warning', + message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' }, + }); + }, + } + ); - const submitMutation = useMutation((body) => putAdvancedSettings(body), { + const isLoading = isLoadingForPermissions || isLoadingData; + + const submitMutation = useMutation((body) => put('/users-permissions/advanced', body), { async onSuccess() { - await queryClient.invalidateQueries('advanced'); + await queryClient.invalidateQueries(['users-permissions', 'advanced']); + toggleNotification({ type: 'success', message: { id: getTrad('notification.success.saved'), defaultMessage: 'Saved' }, @@ -85,11 +98,12 @@ const AdvancedSettingsPage = () => { unlockApp(); }, - onError() { + onError(error) { toggleNotification({ type: 'warning', - message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' }, + message: formatAPIError(error), }); + unlockApp(); }, refetchActive: true, @@ -100,9 +114,12 @@ const AdvancedSettingsPage = () => { const handleSubmit = async (body) => { lockApp(); - const urlConfirmation = body.email_confirmation ? body.email_confirmation_redirection : ''; - - await submitMutation.mutateAsync({ ...body, email_confirmation_redirection: urlConfirmation }); + submitMutation.mutate({ + ...body, + email_confirmation_redirection: body.email_confirmation + ? body.email_confirmation_redirection + : '', + }); }; if (isLoading) { diff --git a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/utils/api.js b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/utils/api.js deleted file mode 100644 index 45b0442636..0000000000 --- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/utils/api.js +++ /dev/null @@ -1,16 +0,0 @@ -import { getFetchClient } from '@strapi/helper-plugin'; - -const fetchData = async () => { - const { get } = getFetchClient(); - const { data } = await get('/users-permissions/advanced'); - - return data; -}; - -const putAdvancedSettings = (body) => { - const { put } = getFetchClient(); - - return put('/users-permissions/advanced', body); -}; - -export { fetchData, putAdvancedSettings }; diff --git a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js index 295edb9475..1ce7d7d901 100644 --- a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js +++ b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js @@ -1,10 +1,12 @@ -import React, { useRef, useState } from 'react'; +import * as React from 'react'; import { ContentLayout, HeaderLayout, Main, useNotifyAT } from '@strapi/design-system'; import { CheckPagePermissions, LoadingIndicatorPage, SettingsPageTitle, + useAPIErrorHandler, + useFetchClient, useFocusWhenNavigate, useNotification, useOverlayBlocker, @@ -19,7 +21,6 @@ import { getTrad } from '../../utils'; import EmailForm from './components/EmailForm'; import EmailTable from './components/EmailTable'; -import { fetchData, putEmailTemplate } from './utils/api'; const ProtectedEmailTemplatesPage = () => ( @@ -33,36 +34,46 @@ const EmailTemplatesPage = () => { const { notifyStatus } = useNotifyAT(); const toggleNotification = useNotification(); const { lockApp, unlockApp } = useOverlayBlocker(); - const trackUsageRef = useRef(trackUsage); const queryClient = useQueryClient(); + const { get, put } = useFetchClient(); + const { formatAPIError } = useAPIErrorHandler(); + useFocusWhenNavigate(); - const [isModalOpen, setIsModalOpen] = useState(false); - const [templateToEdit, setTemplateToEdit] = useState(null); + const [isModalOpen, setIsModalOpen] = React.useState(false); + const [templateToEdit, setTemplateToEdit] = React.useState(null); const { isLoading: isLoadingForPermissions, allowedActions: { canUpdate }, } = useRBAC({ update: PERMISSIONS.updateEmailTemplates }); - const { status: isLoadingData, data } = useQuery('email-templates', () => fetchData(), { - onSuccess() { - notifyStatus( - formatMessage({ - id: getTrad('Email.template.data.loaded'), - defaultMessage: 'Email templates has been loaded', - }) - ); - }, - onError() { - toggleNotification({ - type: 'warning', - message: { id: 'notification.error', defaultMessage: 'An error occured' }, - }); - }, - }); + const { isLoading: isLoadingData, data } = useQuery( + ['users-permissions', 'email-templates'], + async () => { + const { data } = await get('/users-permissions/email-templates'); - const isLoading = isLoadingForPermissions || isLoadingData !== 'success'; + return data; + }, + { + onSuccess() { + notifyStatus( + formatMessage({ + id: getTrad('Email.template.data.loaded'), + defaultMessage: 'Email templates has been loaded', + }) + ); + }, + onError(error) { + toggleNotification({ + type: 'warning', + message: formatAPIError(error), + }); + }, + } + ); + + const isLoading = isLoadingForPermissions || isLoadingData; const handleToggle = () => { setIsModalOpen((prev) => !prev); @@ -73,34 +84,38 @@ const EmailTemplatesPage = () => { handleToggle(); }; - const submitMutation = useMutation((body) => putEmailTemplate({ 'email-templates': body }), { - async onSuccess() { - await queryClient.invalidateQueries('email-templates'); + const submitMutation = useMutation( + (body) => put('/users-permissions/email-templates', { 'email-templates': body }), + { + async onSuccess() { + await queryClient.invalidateQueries(['users-permissions', 'email-templates']); - toggleNotification({ - type: 'success', - message: { id: 'notification.success.saved', defaultMessage: 'Saved' }, - }); + toggleNotification({ + type: 'success', + message: { id: 'notification.success.saved', defaultMessage: 'Saved' }, + }); - trackUsageRef.current('didEditEmailTemplates'); + trackUsage('didEditEmailTemplates'); - unlockApp(); - handleToggle(); - }, - onError() { - toggleNotification({ - type: 'warning', - message: { id: 'notification.error', defaultMessage: 'An error occured' }, - }); - unlockApp(); - }, - refetchActive: true, - }); - const { isLoading: isSubmittingForm } = submitMutation; + unlockApp(); + handleToggle(); + }, + onError(error) { + toggleNotification({ + type: 'warning', + message: formatAPIError(error), + }); + + unlockApp(); + }, + refetchActive: true, + } + ); const handleSubmit = (body) => { lockApp(); - trackUsageRef.current('willEditEmailTemplates'); + + trackUsage('willEditEmailTemplates'); const editedTemplates = { ...data, [templateToEdit]: body }; submitMutation.mutate(editedTemplates); @@ -129,7 +144,7 @@ const EmailTemplatesPage = () => { } return ( -
+
{ - const { get } = getFetchClient(); - const { data } = await get('/users-permissions/email-templates'); - - return data; -}; - -const putEmailTemplate = (body) => { - const { put } = getFetchClient(); - - return put('/users-permissions/email-templates', body); -}; - -export { fetchData, putEmailTemplate };