Chap03 -> Handling events -> Handling an input change event

QandA/frontend/src/Header.tsx

@@ -1,13 +1,23 @@
 import React from 'react';
 import { UserIcon } from './Icons';
 
-export const Header = () => (
+export const Header = () => {
+  const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(e.currentTarget.value);
+  };
+
+  return (
     <div>
       <a href="./">Q & A</a>
-    <input type="text" placeholder="Search ..." />
+      <input
+        type="text"
+        placeholder="Search ..."
+        onChange={handleSearchInputChange}
+      />
       <a href="./signin">
         <UserIcon />
         <span>Sign In</span>
       </a>
     </div>
-);
+  );
+};

QandA/frontend/src/HomePage.tsx

@@ -1,13 +1,37 @@
 import React from 'react';
+import { PageTitle } from './PageTitle';
+import { Page } from './Page';
 import { QuestionList } from './QuestionList';
-import { getUnansweredQuestions } from './QuestionsData';
+import { getUnansweredQuestions, QuestionData } from './QuestionsData';
 
-export const HomePage = () => (
+export const HomePage = () => {
+  const [questions, setQuestions] = React.useState<QuestionData[]>([]);
+  const [questionsLoading, setQuestionsLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    const doGetUnansweredQuestion = async () => {
+      const unanswereedQuestions = await getUnansweredQuestions();
+      setQuestions(unanswereedQuestions);
+      setQuestionsLoading(false);
+    };
+    doGetUnansweredQuestion();
+  }, []);
+
+  const handleAskQuestionClick = () => {
+    console.log('TODO - move to the AskPage');
+  };
+
+  return (
+    <Page>
       <div>
-    <div>
+        <PageTitle>Unanswered Questions</PageTitle>
-      <h2>Unanswered Questions</h2>
+        <button onClick={handleAskQuestionClick}>Ask a question</button>
-      <button>Ask a question</button>
       </div>
-    <QuestionList data={getUnansweredQuestions()} />
+      {questionsLoading ? (
-  </div>
+        <div>Loading...</div>
-);
+      ) : (
+        <QuestionList data={questions || []} />
+      )}
+    </Page>
+  );
+};

QandA/frontend/src/Page.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PageTitle } from './PageTitle';
+
+interface Props {
+  title?: string;
+  children: React.ReactNode;
+}
+
+export const Page = ({ title, children }: Props) => (
+  <div>
+    {title && <PageTitle>{title}</PageTitle>}
+    {children}
+    {/* Component nested within Page component will be rendere here */}
+  </div>
+);

QandA/frontend/src/PageTitle.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+interface Props {
+  children: React.ReactNode;
+}
+export const PageTitle = ({ children }: Props) => <h2>{children}</h2>;

QandA/frontend/src/QuestionsData.ts

@@ -48,6 +48,11 @@ const questions: QuestionData[] = [
   },
 ];
 
-export const getUnansweredQuestions = (): QuestionData[] => {
+export const getUnansweredQuestions = async (): Promise<QuestionData[]> => {
+  await wait(500);
   return questions.filter((q) => q.answers.length === 0);
 };
+
+const wait = (ms: number): Promise<void> => {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};