aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/ContactForm
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-04-29 12:13:34 +0200
committerArmand Philippot <git@armandphilippot.com>2022-04-29 18:30:05 +0200
commit7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch)
treebfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/ContactForm
parent5324664e87bedfaa01ba62c0c847ef5b861e69b3 (diff)
chore: remove old pages, components, helpers and types
Since I'm using new components, I will also rewrite the GraphQL queries so it is easier to start from scratch.
Diffstat (limited to 'src/components/ContactForm')
-rw-r--r--src/components/ContactForm/ContactForm.module.scss21
-rw-r--r--src/components/ContactForm/ContactForm.tsx180
2 files changed, 0 insertions, 201 deletions
diff --git a/src/components/ContactForm/ContactForm.module.scss b/src/components/ContactForm/ContactForm.module.scss
deleted file mode 100644
index 3f0e861..0000000
--- a/src/components/ContactForm/ContactForm.module.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.status {
- max-width: max-content;
- margin: var(--spacing-md) 0;
- padding: var(--spacing-sm);
- border: fun.convert-px(3) solid var(--color-border-light);
- border-radius: fun.convert-px(5);
-
- &--error {
- border-color: var(--color-token-red);
- }
-
- &--success {
- border-color: var(--color-token-green);
- }
-
- &--warning {
- border-color: var(--color-token-orange);
- }
-}
diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx
deleted file mode 100644
index 5af6982..0000000
--- a/src/components/ContactForm/ContactForm.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { ButtonSubmit } from '@components/Buttons';
-import { Field, Form, FormItem, Label } from '@components/FormElements';
-import { sendMail } from '@services/graphql/mutations';
-import { settings } from '@utils/config';
-import { FormEvent, useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './ContactForm.module.scss';
-
-type Status = 'success' | 'error' | 'warning';
-
-const ContactForm = () => {
- const intl = useIntl();
- const [name, setName] = useState('');
- const [email, setEmail] = useState('');
- const [subject, setSubject] = useState('');
- const [message, setMessage] = useState('');
- const [status, setStatus] = useState<Status>();
- const [statusMessage, setStatusMessage] = useState<string>('');
-
- const resetForm = () => {
- setName('');
- setEmail('');
- setSubject('');
- setMessage('');
- };
-
- const submitHandler = async (e: FormEvent) => {
- e.preventDefault();
-
- if (!name || !email || !message) {
- setStatus('warning');
- setStatusMessage(
- intl.formatMessage({
- defaultMessage:
- 'Warning: mail not sent. Some required fields are empty.',
- description: 'ContactForm: missing fields message.',
- id: 'WpycgB',
- })
- );
- return;
- }
-
- const messageHTML = message.replace(/\r?\n/g, '<br />');
- const body = `Message received from ${name} <${email}> on ${settings.url}.<br /><br />${messageHTML}`;
- const replyTo = `${name} <${email}>`;
- const data = {
- body,
- mutationId: 'contact',
- replyTo,
- subject,
- };
- const mail = await sendMail(data);
-
- if (mail.sent) {
- setStatus('success');
- setStatusMessage(
- intl.formatMessage({
- defaultMessage:
- 'Thanks. Your message was successfully sent. I will answer it as soon as possible.',
- description: 'ContactForm: success message',
- id: 'gQKeF+',
- })
- );
- resetForm();
- } else {
- const errorPrefix = intl.formatMessage({
- defaultMessage: 'An error occurred:',
- description: 'ContactForm: error message',
- id: 'pTxT7N',
- });
- const error = `${errorPrefix} ${mail.message}`;
- setStatus('error');
- setStatusMessage(error);
- }
- };
-
- const getStatus = () => {
- if (!status) return <></>;
-
- const statusModifier = `status--${status}`;
-
- return (
- <p className={`${styles.status} ${styles[statusModifier]}`}>
- {statusMessage}
- </p>
- );
- };
-
- const getLabel = (
- body: string,
- htmlFor: string,
- required: boolean = false
- ) => {
- return <Label body={body} htmlFor={htmlFor} required={required} />;
- };
-
- const nameLabelBody = intl.formatMessage({
- defaultMessage: 'Name',
- description: 'ContactForm: name field label',
- id: '6ibqFS',
- });
-
- const emailLabelBody = intl.formatMessage({
- defaultMessage: 'Email',
- description: 'ContactForm: email field label',
- id: 'Vuryko',
- });
-
- const subjectLabelBody = intl.formatMessage({
- defaultMessage: 'Subject',
- description: 'ContactForm: subject field label',
- id: 'uMURuJ',
- });
-
- const messageLabelBody = intl.formatMessage({
- defaultMessage: 'Message',
- description: 'ContactForm: message field label',
- id: '0zBQpa',
- });
-
- return (
- <>
- <Form submitHandler={submitHandler}>
- <FormItem>
- <Field
- id="contact-name"
- name="name"
- value={name}
- setValue={setName}
- required={true}
- label={getLabel(nameLabelBody, 'contact-name', true)}
- />
- </FormItem>
- <FormItem>
- <Field
- id="contact-email"
- kind="email"
- name="email"
- value={email}
- setValue={setEmail}
- required={true}
- label={getLabel(emailLabelBody, 'contact-email', true)}
- />
- </FormItem>
- <FormItem>
- <Field
- id="contact-subject"
- name="subject"
- value={subject}
- setValue={setSubject}
- label={getLabel(subjectLabelBody, 'contact-subject')}
- />
- </FormItem>
- <FormItem>
- <Field
- id="contact-message"
- kind="textarea"
- name="message"
- value={message}
- setValue={setMessage}
- required={true}
- label={getLabel(messageLabelBody, 'contact-message', true)}
- />
- </FormItem>
- <FormItem>
- <ButtonSubmit>
- {intl.formatMessage({
- defaultMessage: 'Send',
- description: 'ContactForm: send button text',
- id: 'X7n7N2',
- })}
- </ButtonSubmit>
- </FormItem>
- </Form>
- {getStatus()}
- </>
- );
-};
-
-export default ContactForm;