Chore: Cleanup advanced settings and email templates

This commit is contained in:
Gustav Hansen 2023-08-11 15:54:08 +02:00
parent c696619b98
commit 86a45d30ed
4 changed files with 102 additions and 102 deletions

View File

@ -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) {

View File

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

View File

@ -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,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 (
<Main aria-busy={isSubmittingForm}>
<Main aria-busy={submitMutation.isLoading}>
<SettingsPageTitle
name={formatMessage({
id: getTrad('HeaderNav.link.emailTemplates'),

View File

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