Chap04 -> Completing the home page styling -> Styling the Question component

QandA/frontend/package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",

QandA/frontend/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

QandA/frontend/src/App.tsx

@@ -1,11 +1,20 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import { Header } from './Header';
-import './App.css';
 import { HomePage } from './HomePage';
+import { fontFamily, fontSize, gray2 } from './Styles';
 
 function App() {
   return (
-    <div className="App">
+    <div
+      css={css`
+        font-family: ${fontFamily};
+        font-size: ${fontSize};
+        color: ${gray2};
+      `}
+    >
       <Header />
       <HomePage />
     </div>

QandA/frontend/src/Header.module.css

@@ -0,0 +1,13 @@
+.container {
+    position: fixed;
+    box-sizing: border-box;
+    top: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    background-color: #fff;
+    border-bottom: 1px solid #e3e2e2;
+    box-shadow: 0 3px 7px 0 rgba(110, 112, 114, 0.21);
+}

QandA/frontend/src/Header.tsx

@@ -1,13 +1,89 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
+
 import React from 'react';
 import { UserIcon } from './Icons';
 
-export const Header = () => (
-  <div>
-    <a href="./">Q & A</a>
-    <input type="text" placeholder="Search ..." />
-    <a href="./signin">
+export const Header = () => {
+  const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(e.currentTarget.value);
+  };
+
+  return (
+    <div
+      css={css`
+        position: fixed;
+        box-sizing: border-box;
+        top: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 20px;
+        background-color: #fff;
+        border-bottom: 1px solid ${gray5};
+        box-shadow: 0 3px 7px 0 rgba(100, 112, 114, 0.21);
+      `}
+    >
+      <a
+        href="./"
+        css={css`
+          font-size: 24px;
+          font-weight: bold;
+          color: ${gray1};
+          text-decoration: none;
+        `}
+      >
+        Q & A
+      </a>
+      <input
+        type="text"
+        placeholder="Search ..."
+        onChange={handleSearchInputChange}
+        css={css`
+          box-sizing: border-box;
+          font-family: ${fontFamily};
+          font-size: ${fontSize};
+          padding: 8px 10px;
+          border: 1px solid ${gray5};
+          border-radius: 3px;
+          color: ${gray2};
+          background-color: white;
+          width: 200px;
+          height: 30px;
+          :focus {
+            outline-color: ${gray5};
+          }
+        `}
+      />
+      <a
+        href="./signin"
+        css={css`
+          font-family: ${fontFamily};
+          font-size: ${fontSize};
+          padding: 5px 10px;
+          background-color: transparent;
+          color: ${gray2};
+          text-decoration: none;
+          cursor: pointer;
+          :focus {
+            outline-color: ${gray5};
+          }
+          span {
+            margin-left: 7px;
+          }
+        `}
+      >
         <UserIcon />
-      <span>Sign In</span>
+        <span
+          css={css`
+            margin-left: 7px;
+          `}
+        >
+          Sign In
+        </span>
       </a>
     </div>
   );
+};

QandA/frontend/src/HomePage.tsx

@@ -1,13 +1,49 @@
-import React from 'react';
-import { QuestionList } from './QuestionList';
-import { getUnansweredQuestions } from './QuestionsData';
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
 
-export const HomePage = () => (
-  <div>
-    <div>
-      <h2>Unanswered Questions</h2>
-      <button>Ask a question</button>
-    </div>
-    <QuestionList data={getUnansweredQuestions()} />
+import React from 'react';
+import { PageTitle } from './PageTitle';
+import { Page } from './Page';
+import { QuestionList } from './QuestionList';
+import { getUnansweredQuestions, QuestionData } from './QuestionsData';
+import { PrimaryButton } from './Styles';
+
+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
+        css={css`
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        `}
+      >
+        <PageTitle>Unanswered Questions</PageTitle>
+        <PrimaryButton onClick={handleAskQuestionClick}>
+          Ask a question
+        </PrimaryButton>
       </div>
+      {questionsLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <QuestionList data={questions || []} />
+      )}
+    </Page>
   );
+};

QandA/frontend/src/Icons.tsx

@@ -1,3 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import user from './user.svg';
-export const UserIcon = () => <img src={user} alt="User" width="12px" />;
+export const UserIcon = () => (
+  <img
+    src={user}
+    alt="User"
+    css={css`
+      width: 12px;
+      opacity: 0.6;
+    `}
+  />
+);

QandA/frontend/src/Page.tsx

@@ -0,0 +1,24 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import React from 'react';
+import { PageTitle } from './PageTitle';
+
+interface Props {
+  title?: string;
+  children: React.ReactNode;
+}
+
+export const Page = ({ title, children }: Props) => (
+  <div
+    css={css`
+      margin: 50px auto 20px auto;
+      padding: 30px 20px;
+      max-width: 600px;
+    `}
+  >
+    {title && <PageTitle>{title}</PageTitle>}
+    {children}
+    {/* Component nested within Page component will be rendere here */}
+  </div>
+);

QandA/frontend/src/PageTitle.tsx

@@ -0,0 +1,20 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import React from 'react';
+interface Props {
+  children: React.ReactNode;
+}
+export const PageTitle = ({ children }: Props) => (
+  <h2
+    css={css`
+      font-size: 15px;
+      font-weight: bold;
+      margin: 10px 0px 5px;
+      text-align: center;
+      text-transform: uppercase;
+    `}
+  >
+    {children}
+  </h2>
+);

QandA/frontend/src/Question.tsx

@@ -1,3 +1,7 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { gray2, gray3 } from './Styles';
+
 import React from 'react';
 import { QuestionData } from './QuestionsData';
 
@@ -8,15 +12,34 @@ interface Props {
 
 export const Question = ({ data, showContent }: Props) => (
   <div>
-    <div>{data.title}</div>
+    <div
+      css={css`
+        padding: 10px 0px;
+        font-size: 19px;
+      `}
+    >
+      {data.title}
+    </div>
     {showContent && (
-      <div>
+      <div
+        css={css`
+          padding-bottom: 10px;
+          font-size: 15px;
+          color: ${gray2};
+        `}
+      >
         {data.content.length > 50
           ? `${data.content.substring(0, 50)}`
           : data.content}
       </div>
     )}
-    <div>
+    <div
+      css={css`
+        font-size: 12px;
+        font-style: italic;
+        color: ${gray3};
+      `}
+    >
       {`Ask by ${
         data.userName
       } on ${data.created.toLocaleDateString()} ${data.created.toLocaleTimeString()}`}

QandA/frontend/src/QuestionList.tsx

@@ -1,15 +1,38 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import { Question } from './Question';
 import { QuestionData } from './QuestionsData';
+import { accent2, gray5 } from './Styles';
 
 interface Props {
   data: QuestionData[];
 }
 
 export const QuestionList = ({ data }: Props) => (
-  <ul>
+  <ul
+    css={css`
+      list-style: none;
+      margin: 10px 0 0 0;
+      padding: 0px 20px;
+      background-color: #fff;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      border-top: 3px solid ${accent2};
+      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
+    `}
+  >
     {data.map((question) => (
-      <li key={question.questionId}>
+      <li
+        key={question.questionId}
+        css={css`
+          border-top: 1px solid ${gray5};
+          :first-of-type {
+            border-top: none;
+          }
+        `}
+      >
         <Question data={question} />
       </li>
     ))}

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));
+};

QandA/frontend/src/Styles.ts

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+
+export const gray1 = '#383737';
+export const gray2 = '#5c5a5a';
+export const gray3 = '#857c81';
+export const gray4 = '#b9b9b9';
+export const gray5 = '#e3e2e2';
+export const gray6 = '#f7f8fa';
+export const primary1 = '#681c41';
+export const primary2 = '#824c67';
+export const accent1 = '#dbb365';
+export const accent2 = '#efd197';
+export const fontFamily = "'Segoe UI', 'Helvetica Neue',sans-serif";
+export const fontSize = '16px';
+export const PrimaryButton = styled.button`
+  background-color: ${primary2};
+  border-color: ${primary2};
+  border-style: solid;
+  border-radius: 5px;
+  font-family: ${fontFamily};
+  font-family: ${fontSize};
+  padding: 5px 10px;
+  color: white;
+  cursor: pointer;
+  :hover {
+    background-color: ${primary1};
+  }
+  :focus {
+    outline-color: ${primary2};
+  }
+  :disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;

QandA/frontend/src/index.css

@@ -1,13 +1,4 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  background-color: #f7f8fa;
 }