From 6f46e54e382bf3f535f27ebead18c2bdf4628e49 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 15 Jan 2022 23:08:25 +0100
Subject: chore(comments): handle comment reply

---
 src/components/CommentForm/CommentForm.tsx | 35 ++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 11 deletions(-)

(limited to 'src/components/CommentForm/CommentForm.tsx')

diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
index ea02306..1ed219c 100644
--- a/src/components/CommentForm/CommentForm.tsx
+++ b/src/components/CommentForm/CommentForm.tsx
@@ -3,16 +3,21 @@ 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 { useState } from 'react';
+import { ForwardedRef, forwardRef, useState } from 'react';
 import styles from './CommentForm.module.scss';
 
-const CommentForm = ({
-  articleId,
-  parentId = 0,
-}: {
-  articleId: number;
-  parentId?: number;
-}) => {
+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('');
@@ -57,10 +62,17 @@ const CommentForm = ({
     }
   };
 
+  const wrapperClasses = `${styles.wrapper} ${
+    isReply ? styles['wrapper--reply'] : ''
+  }`;
+
   return (
-    <div className={styles.wrapper}>
+    <div className={wrapperClasses}>
       <h2 className={styles.title}>{t`Leave a comment`}</h2>
-      <Form submitHandler={submitHandler}>
+      <Form
+        submitHandler={submitHandler}
+        modifier={isReply ? 'centered' : undefined}
+      >
         <FormItem>
           <Input
             id="commenter-name"
@@ -69,6 +81,7 @@ const CommentForm = ({
             required={true}
             value={name}
             setValue={setName}
+            ref={ref}
           />
         </FormItem>
         <FormItem>
@@ -111,4 +124,4 @@ const CommentForm = ({
   );
 };
 
-export default CommentForm;
+export default forwardRef(CommentForm);
-- 
cgit v1.2.3