Chap06 -> Reducing boilerplate code with React Hook From -> Implementing the answer form

QandA/frontend/package.json

@@ -12,8 +12,11 @@
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.41",
     "@types/react-dom": "^17.0.14",
+    "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",
     "web-vitals": "^2.1.4"

QandA/frontend/src/Answer.tsx

@@ -0,0 +1,38 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import React from 'react';
+import { AnswerData } from './QuestionsData';
+import { gray3 } from './Styles';
+
+interface Props {
+  data: AnswerData;
+}
+
+export const Answer = ({ data }: Props) => (
+  <div
+    css={css`
+      padding: 10px 0px;
+    `}
+  >
+    <div
+      css={css`
+        padding: 10px 0px;
+        font-size: 13px;
+      `}
+    >
+      {data.content}
+    </div>
+    <div
+      css={css`
+        font-size: 12px;
+        font-style: italic;
+        color: ${gray3};
+      `}
+    >
+      {`Answered by ${
+        data.userName
+      } on ${data.created.toLocaleDateString()} ${data.created.toLocaleTimeString()}`}
+    </div>
+  </div>
+);

QandA/frontend/src/AnswerList.tsx

@@ -0,0 +1,31 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import React from 'react';
+import { AnswerData } from './QuestionsData';
+import { Answer } from './Answer';
+import { gray5 } from './Styles';
+
+interface Props {
+  data: AnswerData[];
+}
+
+export const AnswerList = ({ data }: Props) => (
+  <ul
+    css={css`
+      list-style: none;
+      margin: 10px 0 0 0;
+      padding: 0;
+    `}
+  >
+    {data.map((answer) => (
+      <li
+        css={css`
+          border-top: 1px solid ${gray5};
+        `}
+        key={answer.answertId}
+      >
+        <Answer data={answer} />
+      </li>
+    ))}
+  </ul>
+);

QandA/frontend/src/App.tsx

@@ -2,12 +2,22 @@
 import { css } from '@emotion/react';
 
 import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
 import { Header } from './Header';
 import { HomePage } from './HomePage';
 import { fontFamily, fontSize, gray2 } from './Styles';
+import { SearchPage } from './SearchPage';
+import { SignInPage } from './SignInPage';
+import { NotFoundPage } from './NotFoundPage';
+import { QuestionPage } from './QuestionPage';
+
+const AskPage = React.lazy(() => import('./AskPage'));
 
 function App() {
   return (
+    <BrowserRouter>
+      <Header />
       <div
         css={css`
           font-family: ${fontFamily};
@@ -15,16 +25,35 @@ function App() {
           color: ${gray2};
         `}
       >
-      <Header />
+        <Routes>
-      <HomePage />
+          <Route path="" element={<HomePage />} />
+          <Route path="search" element={<SearchPage />} />
+          <Route
+            path="ask"
+            element={
+              <React.Suspense
+                fallback={
+                  <div
+                    css={css`
+                      margin-top: 100px;
+                      text-align: center;
+                    `}
+                  >
+                    Loading...
                   </div>
+                }
+              >
+                <AskPage />
+              </React.Suspense>
+            }
+          />
+          <Route path="signin" element={<SignInPage />} />
+          <Route path="questions/:questionId" element={<QuestionPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
   );
 }
 
-class ProblemComponent extends React.Component {
-  render() {
-    return <div ref="div" />;
-  }
-}
-
 export default App;

QandA/frontend/src/AskPage.tsx

@@ -0,0 +1,52 @@
+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 default AskPage;

QandA/frontend/src/Header.tsx

@@ -1,13 +1,23 @@
 /** @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 { UserIcon } from './Icons';
 import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
 
-import React from 'react';
+type FormData = {
-import { UserIcon } from './Icons';
+  search: string;
+};
 
 export const Header = () => {
-  const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const { register } = useForm<FormData>();
-    console.log(e.currentTarget.value);
+  const [searchParams] = useSearchParams();
+  const criteria = searchParams.get('criteria') || '';
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
   };
 
   return (
@@ -26,8 +36,8 @@ export const Header = () => {
         box-shadow: 0 3px 7px 0 rgba(100, 112, 114, 0.21);
       `}
     >
-      <a
+      <Link
-        href="./"
+        to="/"
         css={css`
           font-size: 24px;
           font-weight: bold;
@@ -36,11 +46,14 @@ export const Header = () => {
         `}
       >
         Q & A
-      </a>
+      </Link>
+      <form onSubmit={handleSubmit}>
         <input
+          {...register('search')}
+          name="search"
           type="text"
           placeholder="Search ..."
-        onChange={handleSearchInputChange}
+          defaultValue={criteria}
           css={css`
             box-sizing: border-box;
             font-family: ${fontFamily};
@@ -57,8 +70,9 @@ export const Header = () => {
             }
           `}
         />
-      <a
+      </form>
-        href="./signin"
+      <Link
+        to="signin"
         css={css`
           font-family: ${fontFamily};
           font-size: ${fontSize};
@@ -76,14 +90,8 @@ export const Header = () => {
         `}
       >
         <UserIcon />
-        <span
+        <span>Sign In</span>
-          css={css`
+      </Link>
-            margin-left: 7px;
-          `}
-        >
-          Sign In
-        </span>
-      </a>
     </div>
   );
 };

QandA/frontend/src/HomePage.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
+import { useNavigate } from 'react-router-dom';
 
 import React from 'react';
 import { PageTitle } from './PageTitle';
@@ -21,8 +22,9 @@ export const HomePage = () => {
     doGetUnansweredQuestion();
   }, []);
 
+  const navigate = useNavigate();
   const handleAskQuestionClick = () => {
-    console.log('TODO - move to the AskPage');
+    navigate('ask');
   };
 
   return (

QandA/frontend/src/NotFoundPage.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Page } from './Page';
+
+export const NotFoundPage = () => <Page title="Page Not Found">{null}</Page>;

QandA/frontend/src/Question.tsx

@@ -1,8 +1,9 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { gray2, gray3 } from './Styles';
+import { Link } from 'react-router-dom';
-
 import React from 'react';
+
+import { gray2, gray3 } from './Styles';
 import { QuestionData } from './QuestionsData';
 
 interface Props {
@@ -17,8 +18,16 @@ export const Question = ({ data, showContent }: Props) => (
         padding: 10px 0px;
         font-size: 19px;
       `}
+    >
+      <Link
+        css={css`
+          text-decoration: none;
+          color: ${gray2};
+        `}
+        to={`/questions/${data.questionId}`}
       >
         {data.title}
+      </Link>
     </div>
     {showContent && (
       <div

QandA/frontend/src/QuestionPage.tsx

@@ -0,0 +1,108 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+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);
+      setQuestion(foundQuestion);
+    };
+    if (questionId) {
+      doGetQuestion(Number(questionId));
+    }
+  }, [questionId]);
+  return (
+    <Page>
+      <div
+        css={css`
+          background-color: white;
+          padding: 15px 20px 20px 20px;
+          border-radius: 4px;
+          border: 1px solid ${gray6};
+          box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
+        `}
+      >
+        <div
+          css={css`
+            font-size: 19px;
+            font-weight: bold;
+            margin: 10px 0px 5px;
+          `}
+        >
+          {question === null ? '' : question.title}
+        </div>
+        {question !== null && (
+          <React.Fragment>
+            <p
+              css={css`
+                margin-top: 0px;
+                background-color: white;
+              `}
+            >
+              {question.content}
+            </p>
+            <div
+              css={css`
+                font-size: 12px;
+                font-style: italic;
+                color: ${gray3};
+              `}
+            >
+              {`Asked by ${
+                question.userName
+              } 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>
+      Question Page {questionId}
+    </Page>
+  );
+};

QandA/frontend/src/QuestionsData.ts

@@ -56,3 +56,22 @@ export const getUnansweredQuestions = async (): Promise<QuestionData[]> => {
 const wait = (ms: number): Promise<void> => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
+
+export const getQuestion = async (
+  questionId: number,
+): Promise<QuestionData | null> => {
+  await wait(500);
+  const results = questions.filter((q) => q.questionId === questionId);
+  return results.length === 0 ? null : results[0];
+};
+
+export const searchQuestions = async (
+  criteria: string,
+): Promise<QuestionData[]> => {
+  await wait(500);
+  return questions.filter(
+    (q) =>
+      q.title.toLowerCase().indexOf(criteria.toLowerCase()) >= 0 ||
+      q.content.toLowerCase().indexOf(criteria.toLowerCase()) >= 0,
+  );
+};

QandA/frontend/src/SearchPage.tsx

@@ -0,0 +1,38 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { Page } from './Page';
+import { QuestionList } from './QuestionList';
+import { searchQuestions, QuestionData } from './QuestionsData';
+
+export const SearchPage = () => {
+  const [searchParams] = useSearchParams();
+  const [questions, setQuestions] = React.useState<QuestionData[]>([]);
+  const search = searchParams.get('criteria') || '';
+  React.useEffect(() => {
+    const doSearch = async (criteria: string) => {
+      const foundResults = await searchQuestions(criteria);
+      setQuestions(foundResults);
+    };
+    doSearch(search);
+  }, [search]);
+
+  return (
+    <Page title="Search Results">
+      {search && (
+        <p
+          css={css`
+            font-size: 16px;
+            font-style: italic;
+            margin-top: 0px;
+          `}
+        >
+          <QuestionList data={questions} />
+        </p>
+      )}
+    </Page>
+  );
+};

QandA/frontend/src/SignInPage.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Page } from './Page';
+
+export const SignInPage = () => <Page title="Sign In">{null}</Page>;

QandA/frontend/src/Styles.ts

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 export const gray1 = '#383737';
 export const gray2 = '#5c5a5a';
@@ -33,3 +34,70 @@ 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;
+`;