1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import { ButtonSubmit } from '@components/Buttons';
import { Form, FormItem, Input, TextArea } from '@components/Form';
import Notice from '@components/Notice/Notice';
import { t } from '@lingui/macro';
import { createComment } from '@services/graphql/mutations';
import { ForwardedRef, forwardRef, useState } from 'react';
import styles from './CommentForm.module.scss';
const CommentForm = (
{
articleId,
parentId = 0,
isReply = false,
}: {
articleId: number;
parentId?: number;
isReply?: boolean;
},
ref: ForwardedRef<HTMLInputElement>
) => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [website, setWebsite] = useState('');
const [message, setMessage] = useState('');
const [isSuccess, setIsSuccess] = useState(false);
const [isApproved, setIsApproved] = useState(false);
const resetForm = () => {
setName('');
setEmail('');
setWebsite('');
setMessage('');
};
const submitHandler = async (e: SubmitEvent) => {
e.preventDefault();
if (name && email && message && articleId) {
const data = {
author: name,
authorEmail: email,
authorUrl: website,
content: message,
parent: parentId,
commentOn: articleId,
mutationId: 'createComment',
};
const createdComment = await createComment(data);
if (createdComment.success) setIsSuccess(true);
if (isSuccess) {
resetForm();
if (createdComment.comment?.approved) setIsApproved(true);
setTimeout(() => {
setIsSuccess(false);
setIsApproved(false);
}, 8000);
}
} else {
setIsSuccess(false);
}
};
const wrapperClasses = `${styles.wrapper} ${
isReply ? styles['wrapper--reply'] : ''
}`;
return (
<div className={wrapperClasses}>
<h2 className={styles.title}>{t`Leave a comment`}</h2>
<Form
submitHandler={submitHandler}
modifier={isReply ? 'centered' : undefined}
>
<FormItem>
<Input
id="commenter-name"
name="commenter-name"
label={t`Name`}
required={true}
value={name}
setValue={setName}
ref={ref}
/>
</FormItem>
<FormItem>
<Input
id="commenter-email"
name="commenter-email"
label={t`Email`}
required={true}
value={email}
setValue={setEmail}
/>
</FormItem>
<FormItem>
<Input
id="commenter-website"
name="commenter-website"
label={t`Website`}
value={website}
setValue={setWebsite}
/>
</FormItem>
<FormItem>
<TextArea
id="commenter-message"
name="commenter-message"
label={t`Comment`}
value={message}
setValue={setMessage}
required={true}
/>
</FormItem>
<FormItem>
<ButtonSubmit>{t`Send`}</ButtonSubmit>
</FormItem>
{isSuccess && !isApproved && (
<Notice type="success">{t`Thanks for your comment! It is now awaiting moderation.`}</Notice>
)}
</Form>
</div>
);
};
export default forwardRef(CommentForm);
|
