Chore: Cleanup advanced settings and email templates

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,7 +60,14 @@ const AdvancedSettingsPage = () => {
     allowedActions: { canUpdate },
   } = useRBAC({ update: PERMISSIONS.updateAdvancedSettings });
 
-  const { status: isLoadingData, data } = useQuery('advanced', () => fetchData(), {
+  const { isLoading: isLoadingData, data } = useQuery(
+    ['users-permissions', 'advanced'],
+    async () => {
+      const { data } = await get('/users-permissions/advanced');
+
+      return data;
+    },
+    {
       onSuccess() {
         notifyStatus(
           formatMessage({
@@ -71,13 +82,15 @@ const AdvancedSettingsPage = () => {
           message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' },
         });
       },
-  });
+    }
+  );
 
-  const isLoading = isLoadingForPermissions || isLoadingData !== 'success';
+  const isLoading = isLoadingForPermissions || isLoadingData;
 
-  const submitMutation = useMutation((body) => putAdvancedSettings(body), {
+  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 : '';
+    submitMutation.mutate({
-
+      ...body,
-    await submitMutation.mutateAsync({ ...body, email_confirmation_redirection: urlConfirmation });
+      email_confirmation_redirection: body.email_confirmation
+        ? body.email_confirmation_redirection
+        : '',
+    });
   };
 
   if (isLoading) {

packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/utils/api.js

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

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 = () => (
   <CheckPagePermissions permissions={PERMISSIONS.readEmailTemplates}>
@@ -33,19 +34,28 @@ 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 [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [templateToEdit, setTemplateToEdit] = useState(null);
+  const [templateToEdit, setTemplateToEdit] = React.useState(null);
 
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canUpdate },
   } = useRBAC({ update: PERMISSIONS.updateEmailTemplates });
 
-  const { status: isLoadingData, data } = useQuery('email-templates', () => fetchData(), {
+  const { isLoading: isLoadingData, data } = useQuery(
+    ['users-permissions', 'email-templates'],
+    async () => {
+      const { data } = await get('/users-permissions/email-templates');
+
+      return data;
+    },
+    {
       onSuccess() {
         notifyStatus(
           formatMessage({
@@ -54,15 +64,16 @@ const EmailTemplatesPage = () => {
           })
         );
       },
-    onError() {
+      onError(error) {
         toggleNotification({
           type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+          message: formatAPIError(error),
         });
       },
-  });
+    }
+  );
 
-  const isLoading = isLoadingForPermissions || isLoadingData !== 'success';
+  const isLoading = isLoadingForPermissions || isLoadingData;
 
   const handleToggle = () => {
     setIsModalOpen((prev) => !prev);
@@ -73,34 +84,38 @@ const EmailTemplatesPage = () => {
     handleToggle();
   };
 
-  const submitMutation = useMutation((body) => putEmailTemplate({ 'email-templates': body }), {
+  const submitMutation = useMutation(
+    (body) => put('/users-permissions/email-templates', { 'email-templates': body }),
+    {
       async onSuccess() {
-      await queryClient.invalidateQueries('email-templates');
+        await queryClient.invalidateQueries(['users-permissions', 'email-templates']);
 
         toggleNotification({
           type: 'success',
           message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
         });
 
-      trackUsageRef.current('didEditEmailTemplates');
+        trackUsage('didEditEmailTemplates');
 
         unlockApp();
         handleToggle();
       },
-    onError() {
+      onError(error) {
         toggleNotification({
           type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+          message: formatAPIError(error),
         });
+
         unlockApp();
       },
       refetchActive: true,
-  });
+    }
-  const { isLoading: isSubmittingForm } = submitMutation;
+  );
 
   const handleSubmit = (body) => {
     lockApp();
-    trackUsageRef.current('willEditEmailTemplates');
+
+    trackUsage('willEditEmailTemplates');
 
     const editedTemplates = { ...data, [templateToEdit]: body };
     submitMutation.mutate(editedTemplates);
@@ -129,7 +144,7 @@ const EmailTemplatesPage = () => {
   }
 
   return (
-    <Main aria-busy={isSubmittingForm}>
+    <Main aria-busy={submitMutation.isLoading}>
       <SettingsPageTitle
         name={formatMessage({
           id: getTrad('HeaderNav.link.emailTemplates'),

packages/plugins/users-permissions/admin/src/pages/EmailTemplates/utils/api.js

@@ -1,16 +0,0 @@
-import { getFetchClient } from '@strapi/helper-plugin';
-
-const fetchData = async () => {
-  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 };