From 2afb204673ec78b0af4072781839105758c4c89c Mon Sep 17 00:00:00 2001
From: Yiqing Zhu <793831308@qq.com>
Date: Sat, 26 Mar 2022 16:03:57 +1100
Subject: [PATCH] Chap03 -> Implementing component state -> Using useEffect to
 execute logic

---
 QandA/frontend/src/HomePage.tsx     | 33 +++++++++++++++++------------
 QandA/frontend/src/QuestionsData.ts |  6 +++---
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/QandA/frontend/src/HomePage.tsx b/QandA/frontend/src/HomePage.tsx
index 6498c5c..108d798 100644
--- a/QandA/frontend/src/HomePage.tsx
+++ b/QandA/frontend/src/HomePage.tsx
@@ -1,19 +1,24 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PageTitle } from './PageTitle';
 import { Page } from './Page';
 import { QuestionList } from './QuestionList';
 import { getUnansweredQuestions } from './QuestionsData';
 
-export const HomePage = () => (
-  <Page>
-    <div>
-      <PageTitle>Unanswered Questions</PageTitle>
-      <button>Ask a question</button>{' '}
-      {/* This button component is passed as children of Page */}
-    </div>
-    <QuestionList
-      data={getUnansweredQuestions()}
-      renderItem={(question) => <div>{question.title}</div>}
-    />
-  </Page>
-);
+export const HomePage = () => {
+  useEffect(() => {
+    console.log('first rendered');
+  }, []);
+
+  return (
+    <Page>
+      <div>
+        <PageTitle>Unanswered Questions</PageTitle>
+        <button>Ask a question</button>{' '}
+        {/* This button component is passed as children of Page */}
+      </div>
+      {/* <QuestionList
+        data={getUnansweredQuestions()}
+      /> */}
+    </Page>
+  );
+};
diff --git a/QandA/frontend/src/QuestionsData.ts b/QandA/frontend/src/QuestionsData.ts
index 135c2ee..8bac88a 100644
--- a/QandA/frontend/src/QuestionsData.ts
+++ b/QandA/frontend/src/QuestionsData.ts
@@ -48,11 +48,11 @@ const questions: QuestionData[] = [
   },
 ];
 
-export const getUnansweredQuestions = async(): Promise<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))
-}
\ No newline at end of file
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};