Chap05 -> Lazy loading routers

QandA/frontend/package.json

@@ -15,7 +15,6 @@
     "history": "^5.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.29.0",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "typescript": "^4.6.2",

QandA/frontend/src/AskPage.tsx

@@ -1,52 +1,6 @@
 import React from 'react';
-import { useForm } from 'react-hook-form';
-
 import { Page } from './Page';
-import {
-  FieldInput,
-  FieldLabel,
-  Fieldset,
-  FieldContainer,
-  FieldTextArea,
-  FormButtonContainer,
-  PrimaryButton,
-} from './Styles';
 
-type FormData = {
-  title: string;
-  content: string;
-};
-
-export const AskPage = () => {
-  const { register } = useForm<FormData>();
-  return (
-    <Page title="Ask a question">
-      <form>
-        <Fieldset>
-          <FieldContainer>
-            <FieldLabel htmlFor="title">Title</FieldLabel>
-            <FieldInput
-              {...register('title')}
-              id="title"
-              name="title"
-              type="text"
-            />
-          </FieldContainer>
-          <FieldContainer>
-            <FieldLabel htmlFor="content">Content</FieldLabel>
-            <FieldTextArea
-              {...register('content')}
-              id="content"
-              name="content"
-            />
-          </FieldContainer>
-          <FormButtonContainer>
-            <PrimaryButton type="submit">Submit Your Question</PrimaryButton>
-          </FormButtonContainer>
-        </Fieldset>
-      </form>
-    </Page>
-  );
-};
+export const AskPage = () => <Page title="Ask a question">{null}</Page>;
 
 export default AskPage;

QandA/frontend/src/Header.tsx

@@ -1,23 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import React from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
-import { useForm } from 'react-hook-form';
+import { Link } from 'react-router-dom';
 
 import { UserIcon } from './Icons';
 import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
 
-type FormData = {
-  search: string;
-};
-
 export const Header = () => {
-  const { register } = useForm<FormData>();
-  const [searchParams] = useSearchParams();
-  const criteria = searchParams.get('criteria') || '';
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
+  const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(e.currentTarget.value);
   };
 
   return (
@@ -47,30 +38,26 @@ export const Header = () => {
       >
         Q & A
       </Link>
-      <form onSubmit={handleSubmit}>
-        <input
-          {...register('search')}
-          name="search"
-          type="text"
-          placeholder="Search ..."
-          defaultValue={criteria}
-          css={css`
-            box-sizing: border-box;
-            font-family: ${fontFamily};
-            font-size: ${fontSize};
-            padding: 8px 10px;
-            border: 1px solid ${gray5};
-            border-radius: 3px;
-            color: ${gray2};
-            background-color: white;
-            width: 200px;
-            height: 30px;
-            :focus {
-              outline-color: ${gray5};
-            }
-          `}
-        />
-      </form>
+      <input
+        type="text"
+        placeholder="Search ..."
+        onChange={handleSearchInputChange}
+        css={css`
+          box-sizing: border-box;
+          font-family: ${fontFamily};
+          font-size: ${fontSize};
+          padding: 8px 10px;
+          border: 1px solid ${gray5};
+          border-radius: 3px;
+          color: ${gray2};
+          background-color: white;
+          width: 200px;
+          height: 30px;
+          :focus {
+            outline-color: ${gray5};
+          }
+        `}
+      />
       <Link
         to="signin"
         css={css`

QandA/frontend/src/QuestionPage.tsx

@@ -1,32 +1,17 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import {
-  FieldContainer,
-  FieldLabel,
-  Fieldset,
-  FieldTextArea,
-  FormButtonContainer,
-  gray3,
-  gray6,
-  PrimaryButton,
-} from './Styles';
+import { gray3, gray6 } 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);
@@ -78,27 +63,6 @@ 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>

QandA/frontend/src/Styles.ts

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 
 export const gray1 = '#383737';
 export const gray2 = '#5c5a5a';
@@ -34,70 +33,3 @@ export const PrimaryButton = styled.button`
     cursor: not-allowed;
   }
 `;
-
-export const Fieldset = styled.fieldset`
-  margin: 10px auto 0 auto;
-  padding: 30px;
-  width: 350px;
-  background-color: ${gray6};
-  border-radius: 4px;
-  border: 1px solid ${gray5};
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
-`;
-
-export const FieldContainer = styled.label`
-  font-weight: 10px;
-`;
-
-const baseFieldCSS = css`
-  box-sizing: border-box;
-  font-family: ${fontFamily};
-  font-size: ${fontSize};
-  margin-bottom: 5px;
-  padding: 8px 10px;
-  border: 1px solid ${gray5};
-  border-radius: 3px;
-  color: ${gray2};
-  background-color: white;
-  width: 100%;
-  :focus {
-    outline-color: ${gray5};
-  }
-  :disabled {
-    background-color: ${gray6};
-  }
-`;
-
-export const FieldLabel = styled.label`
-  font-weight: bold;
-`;
-
-export const FieldInput = styled.input`
-  ${baseFieldCSS}
-`;
-
-export const FieldTextArea = styled.textarea`
-  ${baseFieldCSS}
-  height: 100px;
-`;
-
-export const FieldError = styled.div`
-  font-size: 12px;
-  color: red;
-`;
-
-export const FormButtonContainer = styled.div`
-  margin: 30px 0px 0px 0px;
-  padding: 20px 0px 0px 0px;
-  border-top: 1px solid ${gray5};
-`;
-
-export const SubmissionSussess = styled.div`
-  margin-top: 10px;
-  color: green;
-`;
-
-export const SubmissionFailure = styled.div`
-  margin-top: 10px;
-  color: red;
-`;