diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-29 12:13:34 +0200 | 
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-29 18:30:05 +0200 | 
| commit | 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch) | |
| tree | bfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/ContactForm | |
| parent | 5324664e87bedfaa01ba62c0c847ef5b861e69b3 (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.scss | 21 | ||||
| -rw-r--r-- | src/components/ContactForm/ContactForm.tsx | 180 | 
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; | 
