chore: create mutation to add a new comment on posts

3 files changed, 99 insertions, 2 deletions

diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
index be6f5a6..988468c 100644
--- a/src/components/CommentForm/CommentForm.tsx
+++ b/src/components/CommentForm/CommentForm.tsx
@@ -1,16 +1,62 @@
 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/comments';
 import { useState } from 'react';
 
-const CommentForm = () => {
+const CommentForm = ({
+  articleId,
+  parentId = 0,
+}: {
+  articleId: number;
+  parentId?: number;
+}) => {
   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 createdComment = await createComment(
+        name,
+        email,
+        website,
+        message,
+        parentId,
+        articleId,
+        'createComment'
+      );
+
+      if (createdComment.success) setIsSuccess(true);
+      if (isSuccess) {
+        resetForm();
+        if (createdComment.comment?.approved) setIsApproved(true);
+
+        setTimeout(() => {
+          setIsSuccess(false);
+          setIsApproved(false);
+        }, 8000);
+      }
+    } else {
+      setIsSuccess(false);
+    }
+  };
 
   return (
-    <Form>
+    <Form submitHandler={submitHandler}>
       <FormItem>
         <Input
           id="commenter-name"
@@ -51,6 +97,9 @@ const CommentForm = () => {
         />
       </FormItem>
       <ButtonSubmit>{t`Send`}</ButtonSubmit>
+      {isSuccess && !isApproved && (
+        <Notice type="success">{t`Thanks for your comment! It is now awaiting moderation.`}</Notice>
+      )}
     </Form>
   );
 };
diff --git a/src/components/Notice/Notice.module.scss b/src/components/Notice/Notice.module.scss
new file mode 100644
index 0000000..deae4e4
--- /dev/null
+++ b/src/components/Notice/Notice.module.scss
@@ -0,0 +1,28 @@
+@use "@styles/abstracts/functions" as fun;
+
+.message {
+  border: fun.convert-px(2) solid;
+  font-weight: bold;
+  margin: var(--spacing-sm) auto;
+  padding: var(--spacing-2xs) var(--spacing-xs);
+
+  &--error {
+    border-color: var(--color-error);
+    color: var(--color-error);
+  }
+
+  &--info {
+    border-color: var(--color-info);
+    color: var(--color-info);
+  }
+
+  &--success {
+    border-color: var(--color-success);
+    color: var(--color-success);
+  }
+
+  &--warning {
+    border-color: var(--color-warning);
+    color: var(--color-warning);
+  }
+}
diff --git a/src/components/Notice/Notice.tsx b/src/components/Notice/Notice.tsx
new file mode 100644
index 0000000..c941bf9
--- /dev/null
+++ b/src/components/Notice/Notice.tsx
@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import styles from './Notice.module.scss';
+
+type NoticeType = 'error' | 'info' | 'success' | 'warning';
+
+const Notice = ({
+  children,
+  type,
+}: {
+  children: ReactNode;
+  type: NoticeType;
+}) => {
+  return (
+    <div className={`${styles.message} ${styles[`message--${type}`]}`}>
+      {children}
+    </div>
+  );
+};
+
+export default Notice;