From d0bb6abf15aa83906d2fa4b5dfd66eb83e837776 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Thu, 31 Mar 2022 11:16:30 +1100
Subject: [PATCH] Chap06 -> Reducing boilerplate code with React Hook From ->
 Implementing the answer form

---
 QandA/frontend/src/QuestionPage.tsx | 38 ++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/QandA/frontend/src/QuestionPage.tsx b/QandA/frontend/src/QuestionPage.tsx
index 90415f5..9483c81 100644
--- a/QandA/frontend/src/QuestionPage.tsx
+++ b/QandA/frontend/src/QuestionPage.tsx
@@ -1,17 +1,32 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { gray3, gray6 } from './Styles';
+import {
+  FieldContainer,
+  FieldLabel,
+  Fieldset,
+  FieldTextArea,
+  FormButtonContainer,
+  gray3,
+  gray6,
+  PrimaryButton,
+} from './Styles';
 
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
 
 import { Page } from './Page';
 import { QuestionData, getQuestion } from './QuestionsData';
 import { AnswerList } from './AnswerList';
 
+type FormData = {
+  content: string;
+};
+
 export const QuestionPage = () => {
   const [question, setQuestion] = React.useState<QuestionData | null>(null);
   const { questionId } = useParams();
+  const { register } = useForm<FormData>();
   React.useEffect(() => {
     const doGetQuestion = async (questionId: number) => {
       const foundQuestion = await getQuestion(questionId);
@@ -63,6 +78,27 @@ export const QuestionPage = () => {
               } on ${question.created.toLocaleDateString()} ${question.created.toLocaleTimeString()}`}
             </div>
             <AnswerList data={question.answers} />
+            <form
+              css={css`
+                margin-top: 20px;
+              `}
+            >
+              <Fieldset>
+                <FieldContainer>
+                  <FieldLabel htmlFor="content">Your Answer</FieldLabel>
+                  <FieldTextArea
+                    {...register('content')}
+                    id="content"
+                    name="content"
+                  />
+                </FieldContainer>
+                <FormButtonContainer>
+                  <PrimaryButton type="submit">
+                    Submit Your Answer
+                  </PrimaryButton>
+                </FormButtonContainer>
+              </Fieldset>
+            </form>
           </React.Fragment>
         )}
       </div>