From 0f31f492ccd5520d0327b9a9f8db2b2d2487cc94 Mon Sep 17 00:00:00 2001
From: Yiqing Zhu <793831308@qq.com>
Date: Sat, 26 Mar 2022 16:46:05 +1100
Subject: [PATCH] Chap03 -> Implementing component state -> Using useState to
 implement component state

---
 QandA/frontend/src/HomePage.tsx     | 26 +++++++++++++++++++-------
 QandA/frontend/src/QuestionList.tsx |  5 ++---
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/QandA/frontend/src/HomePage.tsx b/QandA/frontend/src/HomePage.tsx
index 108d798..774e66e 100644
--- a/QandA/frontend/src/HomePage.tsx
+++ b/QandA/frontend/src/HomePage.tsx
@@ -1,14 +1,24 @@
-import React, { useEffect } from 'react';
+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 = () => {
-  useEffect(() => {
-    console.log('first rendered');
+  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();
   }, []);
 
+  console.log('rendered');
+
   return (
     <Page>
       <div>
@@ -16,9 +26,11 @@ export const HomePage = () => {
         <button>Ask a question</button>{' '}
         {/* This button component is passed as children of Page */}
       </div>
-      {/* <QuestionList
-        data={getUnansweredQuestions()}
-      /> */}
+      {questionsLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <QuestionList data={questions || []} />
+      )}
     </Page>
   );
 };
diff --git a/QandA/frontend/src/QuestionList.tsx b/QandA/frontend/src/QuestionList.tsx
index d9f85fe..636d484 100644
--- a/QandA/frontend/src/QuestionList.tsx
+++ b/QandA/frontend/src/QuestionList.tsx
@@ -4,14 +4,13 @@ import { QuestionData } from './QuestionsData';
 
 interface Props {
   data: QuestionData[];
-  renderItem?: (item: QuestionData) => JSX.Element;
 }
 
-export const QuestionList = ({ data, renderItem }: Props) => (
+export const QuestionList = ({ data }: Props) => (
   <ul>
     {data.map((question) => (
       <li key={question.questionId}>
-        {renderItem ? renderItem(question) : <Question data={question} />}
+        <Question data={question} />
       </li>
     ))}
   </ul>