Chore: Add react-query as dependency

This commit is contained in:
Gustav Hansen 2023-08-14 10:54:54 +02:00
parent 877d1af4c4
commit a3604a0848
4 changed files with 87 additions and 188 deletions

View File

@ -1,113 +0,0 @@
/* eslint-disable no-useless-escape */
import React from 'react';
import { Flex, Grid, GridItem, Option, Select, TextInput, Typography } from '@strapi/design-system';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
const DocumentationLink = styled.a`
color: ${({ theme }) => theme.colors.primary600};
`;
const Configuration = ({ config }) => {
const { formatMessage } = useIntl();
return (
<Flex direction="column" alignItems="stretch" gap={4}>
<Flex direction="column" alignItems="stretch" gap={1}>
<Typography variant="delta" as="h2">
{formatMessage({
id: 'email.Settings.email.plugin.title.config',
defaultMessage: 'Configuration',
})}
</Typography>
<Typography>
{formatMessage(
{
id: 'email.Settings.email.plugin.text.configuration',
defaultMessage:
'The plugin is configured through the {file} file, checkout this {link} for the documentation.',
},
{
file: './config/plugins.js',
link: (
<DocumentationLink
href="https://docs.strapi.io/developer-docs/latest/plugins/email.html"
target="_blank"
rel="noopener noreferrer"
>
{formatMessage({
id: 'email.link',
defaultMessage: 'Link',
})}
</DocumentationLink>
),
}
)}
</Typography>
</Flex>
<Grid gap={5}>
<GridItem col={6} s={12}>
<TextInput
name="shipper-email"
label={formatMessage({
id: 'email.Settings.email.plugin.label.defaultFrom',
defaultMessage: 'Default sender email',
})}
placeholder={formatMessage({
id: 'email.Settings.email.plugin.placeholder.defaultFrom',
defaultMessage: "ex: Strapi No-Reply '<'no-reply@strapi.io'>'",
})}
disabled
onChange={() => {}}
value={config.settings.defaultFrom}
/>
</GridItem>
<GridItem col={6} s={12}>
<TextInput
name="response-email"
label={formatMessage({
id: 'email.Settings.email.plugin.label.defaultReplyTo',
defaultMessage: 'Default response email',
})}
placeholder={formatMessage({
id: 'email.Settings.email.plugin.placeholder.defaultReplyTo',
defaultMessage: `ex: Strapi '<'example@strapi.io'>'`,
})}
disabled
onChange={() => {}}
value={config.settings.defaultReplyTo}
/>
</GridItem>
<GridItem col={6} s={12}>
<Select
name="email-provider"
label={formatMessage({
id: 'email.Settings.email.plugin.label.provider',
defaultMessage: 'Email provider',
})}
disabled
onChange={() => {}}
value={config.provider}
>
<Option value={config.provider}>{config.provider}</Option>
</Select>
</GridItem>
</Grid>
</Flex>
);
};
Configuration.propTypes = {
config: PropTypes.shape({
provider: PropTypes.string,
settings: PropTypes.shape({
defaultFrom: PropTypes.string,
defaultReplyTo: PropTypes.string,
}),
}).isRequired,
};
export default Configuration;

View File

@ -55,33 +55,39 @@ const SettingsPage = () => {
return config; return config;
}); });
const mutation = useMutation((body) => post('/email/test', body), { const mutation = useMutation(
onError() { (body) => post('/email/test', body),
toggleNotification({ {
type: 'warning', onError() {
message: formatMessage( toggleNotification({
{ type: 'warning',
id: 'email.Settings.email.plugin.notification.test.error', message: formatMessage(
defaultMessage: 'Failed to send a test mail to {to}', {
}, id: 'email.Settings.email.plugin.notification.test.error',
{ to: testAddress } defaultMessage: 'Failed to send a test mail to {to}',
), },
}); { to: testAddress }
}, ),
});
},
onSuccess() { onSuccess() {
toggleNotification({ toggleNotification({
type: 'success', type: 'success',
message: formatMessage( message: formatMessage(
{ {
id: 'email.Settings.email.plugin.notification.test.success', id: 'email.Settings.email.plugin.notification.test.success',
defaultMessage: 'Email test succeeded, check the {to} mailbox', defaultMessage: 'Email test succeeded, check the {to} mailbox',
}, },
{ to: testAddress } { to: testAddress }
), ),
}); });
},
}, },
}); {
retry: false,
}
);
useFocusWhenNavigate(); useFocusWhenNavigate();
@ -138,7 +144,7 @@ const SettingsPage = () => {
/> />
<ContentLayout> <ContentLayout>
{isLoading || mutation.isLoading ? ( {isLoading ? (
<LoadingIndicatorPage /> <LoadingIndicatorPage />
) : ( ) : (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
@ -171,7 +177,7 @@ const SettingsPage = () => {
file: './config/plugins.js', file: './config/plugins.js',
link: ( link: (
<DocumentationLink <DocumentationLink
href="https://docs.strapi.io/dev-docs/plugins/email" href="https://docs.strapi.io/developer-docs/latest/plugins/email.html"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@ -199,6 +205,7 @@ const SettingsPage = () => {
defaultMessage: "ex: Strapi No-Reply '<'no-reply@strapi.io'>'", defaultMessage: "ex: Strapi No-Reply '<'no-reply@strapi.io'>'",
})} })}
disabled disabled
onChange={() => {}}
value={data.settings.defaultFrom} value={data.settings.defaultFrom}
/> />
</GridItem> </GridItem>
@ -215,6 +222,7 @@ const SettingsPage = () => {
defaultMessage: `ex: Strapi '<'example@strapi.io'>'`, defaultMessage: `ex: Strapi '<'example@strapi.io'>'`,
})} })}
disabled disabled
onChange={() => {}}
value={data.settings.defaultReplyTo} value={data.settings.defaultReplyTo}
/> />
</GridItem> </GridItem>
@ -227,6 +235,7 @@ const SettingsPage = () => {
defaultMessage: 'Email provider', defaultMessage: 'Email provider',
})} })}
disabled disabled
onChange={() => {}}
value={data.provider} value={data.provider}
> >
<Option value={data.provider}>{data.provider}</Option> <Option value={data.provider}>{data.provider}</Option>
@ -236,8 +245,11 @@ const SettingsPage = () => {
</Flex> </Flex>
</Box> </Box>
<Box <Flex
alignItems="stretch"
background="neutral0" background="neutral0"
direction="column"
gap={4}
hasRadius hasRadius
shadow="filterShadow" shadow="filterShadow"
paddingTop={6} paddingTop={6}
@ -245,54 +257,52 @@ const SettingsPage = () => {
paddingLeft={7} paddingLeft={7}
paddingRight={7} paddingRight={7}
> >
<Flex direction="column" alignItems="stretch" gap={4}> <Typography variant="delta" as="h2">
<Typography variant="delta" as="h2"> {formatMessage({
{formatMessage({ id: 'email.Settings.email.plugin.title.test',
id: 'email.Settings.email.plugin.title.test', defaultMessage: 'Test email delivery',
defaultMessage: 'Test email delivery', })}
})} </Typography>
</Typography>
<Grid gap={5} alignItems="end"> <Grid gap={5} alignItems="end">
<GridItem col={6} s={12}> <GridItem col={6} s={12}>
<TextInput <TextInput
id="test-address-input" id="test-address-input"
name="test-address" name="test-address"
onChange={handleChange} onChange={handleChange}
label={formatMessage({ label={formatMessage({
id: 'email.Settings.email.plugin.label.testAddress', id: 'email.Settings.email.plugin.label.testAddress',
defaultMessage: 'Recipient email', defaultMessage: 'Recipient email',
})} })}
value={testAddress} value={testAddress}
error={ error={
formErrors.email?.id && formErrors.email?.id &&
formatMessage({ formatMessage({
id: `email.${formErrors.email?.id}`, id: `email.${formErrors.email?.id}`,
defaultMessage: 'This is an invalid email', defaultMessage: 'This is an invalid email',
}) })
} }
placeholder={formatMessage({ placeholder={formatMessage({
id: 'email.Settings.email.plugin.placeholder.testAddress', id: 'email.Settings.email.plugin.placeholder.testAddress',
defaultMessage: 'ex: developer@example.com', defaultMessage: 'ex: developer@example.com',
})} })}
/> />
</GridItem> </GridItem>
<GridItem col={7} s={12}> <GridItem col={7} s={12}>
<Button <Button
loading={mutation.isLoading} loading={mutation.isLoading}
disabled={!isTestAddressValid} disabled={!isTestAddressValid}
type="submit" type="submit"
startIcon={<Envelop />} startIcon={<Envelop />}
> >
{formatMessage({ {formatMessage({
id: 'email.Settings.email.plugin.button.test-email', id: 'email.Settings.email.plugin.button.test-email',
defaultMessage: 'Send test email', defaultMessage: 'Send test email',
})} })}
</Button> </Button>
</GridItem> </GridItem>
</Grid> </Grid>
</Flex> </Flex>
</Box>
</Flex> </Flex>
</form> </form>
)} )}

View File

@ -34,6 +34,7 @@
"lodash": "4.17.21", "lodash": "4.17.21",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react-intl": "6.4.1", "react-intl": "6.4.1",
"react-query": "3.39.3",
"yup": "0.32.9" "yup": "0.32.9"
}, },
"devDependencies": { "devDependencies": {

View File

@ -7312,6 +7312,7 @@ __metadata:
react: ^18.2.0 react: ^18.2.0
react-dom: ^18.2.0 react-dom: ^18.2.0
react-intl: 6.4.1 react-intl: 6.4.1
react-query: 3.39.3
react-router-dom: 5.3.4 react-router-dom: 5.3.4
styled-components: 5.3.3 styled-components: 5.3.3
yup: 0.32.9 yup: 0.32.9