QandA/frontend/src/Header.tsx

@@ -1,23 +1,13 @@
 import React from 'react';
 import { UserIcon } from './Icons';
 
-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 ..."
-        onChange={handleSearchInputChange}
-      />
-      <a href="./signin">
-        <UserIcon />
-        <span>Sign In</span>
-      </a>
-    </div>
-  );
-};
+export const Header = () => (
+  <div>
+    <a href="./">Q & A</a>
+    <input type="text" placeholder="Search ..." />
+    <a href="./signin">
+      <UserIcon />
+      <span>Sign In</span>
+    </a>
+  </div>
+);

QandA/frontend/src/HomePage.tsx

@@ -1,37 +1,13 @@
 import React from 'react';
-import { PageTitle } from './PageTitle';
-import { Page } from './Page';
 import { QuestionList } from './QuestionList';
-import { getUnansweredQuestions, QuestionData } from './QuestionsData';
+import { getUnansweredQuestions } from './QuestionsData';
 
-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>
-        <PageTitle>Unanswered Questions</PageTitle>
-        <button onClick={handleAskQuestionClick}>Ask a question</button>
-      </div>
-      {questionsLoading ? (
-        <div>Loading...</div>
-      ) : (
-        <QuestionList data={questions || []} />
-      )}
-    </Page>
-  );
-};
+export const HomePage = () => (
+  <div>
+    <div>
+      <h2>Unanswered Questions</h2>
+      <button>Ask a question</button>
+    </div>
+    <QuestionList data={getUnansweredQuestions()} />
+  </div>
+);

QandA/frontend/src/Page.tsx

@@ -1,15 +0,0 @@
-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

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

QandA/frontend/src/QuestionsData.ts

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