diff options
Diffstat (limited to 'src/components/CommentForm/CommentForm.tsx')
| -rw-r--r-- | src/components/CommentForm/CommentForm.tsx | 240 |
1 files changed, 0 insertions, 240 deletions
diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx deleted file mode 100644 index 128dc58..0000000 --- a/src/components/CommentForm/CommentForm.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import { ButtonSubmit } from '@components/Buttons'; -import { Field, Form, FormItem, Label } from '@components/FormElements'; -import Notice from '@components/Notice/Notice'; -import Spinner from '@components/Spinner/Spinner'; -import { createComment } from '@services/graphql/mutations'; -import { NoticeType } from '@ts/types/app'; -import { useEffect, useRef, useState } from 'react'; -import { useIntl } from 'react-intl'; -import styles from './CommentForm.module.scss'; - -const CommentForm = ({ - articleId, - parentId = 0, -}: { - articleId: number; - parentId?: number; -}) => { - const intl = useIntl(); - const [name, setName] = useState<string>(''); - const [email, setEmail] = useState<string>(''); - const [website, setWebsite] = useState<string>(''); - const [comment, setComment] = useState<string>(''); - const [isSubmitting, setIsSubmitting] = useState<boolean>(false); - const [notice, setNotice] = useState<string>(); - const [noticeType, setNoticeType] = useState<NoticeType>('success'); - const nameFieldRef = useRef<HTMLInputElement>(null); - - useEffect(() => { - if (parentId === 0) return; - nameFieldRef.current && nameFieldRef.current.focus(); - }); - - const resetForm = () => { - setName(''); - setEmail(''); - setWebsite(''); - setComment(''); - setIsSubmitting(false); - }; - - const isEmptyString = (value: string): boolean => value.trim() === ''; - const areRequiredFieldsSet = (): boolean => - !isEmptyString(name) && !isEmptyString(email) && !isEmptyString(comment); - - const sendComment = async () => { - const data = { - author: name, - authorEmail: email, - authorUrl: website, - content: comment, - parent: parentId, - commentOn: articleId, - mutationId: 'createComment', - }; - - const createdComment = await createComment(data); - - if (createdComment.success) { - resetForm(); - setNoticeType('success'); - if (createdComment.comment?.approved) { - setNotice( - intl.formatMessage({ - defaultMessage: 'Thanks for your comment!', - description: 'CommentForm: success notice', - id: 'AVUUgG', - }) - ); - } else { - setNotice( - intl.formatMessage({ - defaultMessage: - 'Thanks for your comment! It is now awaiting moderation.', - description: 'CommentForm: success notice but awaiting moderation', - id: 'Ul2NIl', - }) - ); - } - - setTimeout(() => { - setNotice(undefined); - }, 10000); - } else { - setNoticeType('error'); - setNotice( - intl.formatMessage({ - defaultMessage: - 'An unexpected error happened. Comment cannot be submitted.', - description: 'CommentForm: error notice', - id: 'cjK9Ad', - }) - ); - } - }; - - const submitHandler = async (e: SubmitEvent) => { - e.preventDefault(); - setNotice(undefined); - setIsSubmitting(true); - - if (areRequiredFieldsSet()) { - sendComment(); - } else { - setIsSubmitting(false); - setNoticeType('warning'); - setNotice( - intl.formatMessage({ - defaultMessage: - 'Some required fields are empty. Comment cannot be submitted.', - description: 'CommentForm: missing required fields', - id: 'Rle+UK', - }) - ); - } - }; - - const isReply = parentId !== 0; - const wrapperClasses = `${styles.wrapper} ${ - isReply ? styles['wrapper--reply'] : '' - }`; - - const getLabel = ( - body: string, - htmlFor: string, - required: boolean = false - ) => { - return <Label body={body} htmlFor={htmlFor} required={required} />; - }; - - const nameLabelBody = intl.formatMessage({ - defaultMessage: 'Name', - description: 'CommentForm: Name field label', - id: 'F7QxJH', - }); - - const emailLabelBody = intl.formatMessage({ - defaultMessage: 'Email', - description: 'CommentForm: Email field label', - id: 'Oim3rQ', - }); - - const websiteLabelBody = intl.formatMessage({ - defaultMessage: 'Website', - description: 'CommentForm: Website field label', - id: 'jN+dY5', - }); - - const commentLabelBody = intl.formatMessage({ - defaultMessage: 'Comment', - description: 'CommentForm: Comment field label', - id: 'J4nhm4', - }); - - return ( - <div className={wrapperClasses}> - <h2 className={styles.title}> - {intl.formatMessage({ - defaultMessage: 'Leave a comment', - description: 'CommentForm: Form title', - id: '+aHn7j', - })} - </h2> - <Form - submitHandler={submitHandler} - kind={isReply ? 'centered' : undefined} - > - <FormItem> - <Field - id="commenter-name" - name="commenter-name" - label={getLabel(nameLabelBody, 'commenter-name', true)} - value={name} - setValue={setName} - required={true} - ref={nameFieldRef} - /> - </FormItem> - <FormItem> - <Field - id="commenter-email" - name="commenter-email" - kind="email" - label={getLabel(emailLabelBody, 'commenter-email', true)} - value={email} - setValue={setEmail} - required={true} - /> - </FormItem> - <FormItem> - <Field - id="commenter-website" - name="commenter-website" - label={getLabel(websiteLabelBody, 'commenter-website')} - value={website} - setValue={setWebsite} - /> - </FormItem> - <FormItem> - <Field - id="commenter-comment" - name="commenter-comment" - kind="textarea" - label={getLabel(commentLabelBody, 'commenter-comment', true)} - value={comment} - setValue={setComment} - required={true} - /> - </FormItem> - <FormItem> - <noscript> - {intl.formatMessage({ - defaultMessage: 'Javascript is required to post a comment.', - description: 'CommentForm: noscript tag', - id: 'g1cFCa', - })} - </noscript> - <ButtonSubmit> - {intl.formatMessage({ - defaultMessage: 'Send', - description: 'CommentForm: Send button', - id: 'WGFOmA', - })} - </ButtonSubmit> - </FormItem> - </Form> - {isSubmitting && ( - <Spinner - message={intl.formatMessage({ - defaultMessage: 'Submitting...', - description: 'CommentForm: submitting message', - id: 'HEJ3Gv', - })} - /> - )} - {notice && <Notice type={noticeType}>{notice}</Notice>} - </div> - ); -}; - -export default CommentForm; |