Added some page for forum

app/src/components/Answer/index.scss

@@ -0,0 +1,52 @@
+@import "../../assets/styles/main.scss";
+
+.answer-container {
+  margin-top: 2.5rem;
+  width: 100%;
+  height: 20%;
+  display: flex;
+  padding-left: 5rem;
+  box-sizing: border-box;
+  justify-content: space-between;
+  padding-right: 3rem;
+
+  &__content {
+    width: 85%;
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
+      rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+    border-radius: 7px;
+    background-color: rgb(235, 252, 252);
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    padding-left: 3rem;
+    padding-right: 3rem;
+
+    &--text {
+      font-size: 1.4rem;
+      width: 80%;
+      text-align: left;
+    }
+
+    &--date {
+      text-align: right;
+      width: 20%;
+      font-size: 1.3rem;
+    }
+  }
+
+  &__wrap {
+    &--img {
+      background-image: url("../../assets/images/programmer.png");
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      width: 6rem;
+      height: 6rem;
+    }
+
+    &--name {
+      font-size: 1.3rem;
+    }
+  }
+}

app/src/components/Answer/index.tsx

@@ -0,0 +1,80 @@
+import "./index.scss";
+
+interface AnswerProps {
+  name: string;
+  text: string;
+  date: [];
+}
+
+function getMonthName(monthNumber: number) {
+  var monthName;
+
+  switch (monthNumber) {
+    case 1:
+      monthName = "January";
+      break;
+    case 2:
+      monthName = "February";
+      break;
+    case 3:
+      monthName = "March";
+      break;
+    case 4:
+      monthName = "April";
+      break;
+    case 5:
+      monthName = "May";
+      break;
+    case 6:
+      monthName = "June";
+      break;
+    case 7:
+      monthName = "July";
+      break;
+    case 8:
+      monthName = "August";
+      break;
+    case 9:
+      monthName = "September";
+      break;
+    case 10:
+      monthName = "October";
+      break;
+    case 11:
+      monthName = "November";
+      break;
+    case 12:
+      monthName = "December";
+      break;
+    default:
+      monthName = "Invalid month";
+  }
+
+  return monthName;
+}
+
+const converDate = (data: []) => {
+  const datetime = `${data.at(3)}:${data.at(4)} - ${data.at(2)} ${getMonthName(
+    Number(data.at(1))
+  )}, ${data.at(0)}`;
+  return datetime;
+};
+
+const Answer: React.FC<AnswerProps> = (props: AnswerProps) => {
+  return (
+    <div className="answer-container">
+      <div className="answer-container__wrap">
+        <div className="answer-container__wrap--img"></div>
+        <div className="answer-container__wrap--name">{props.name}</div>
+      </div>
+      <div className="answer-container__content">
+        <div className="answer-container__content--text">{props.text}</div>
+        <div className="answer-container__content--date">
+          {converDate(props.date)}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Answer;

app/src/pages/Topic/index.scss

@@ -7,4 +7,62 @@
   justify-content: center;
   padding-top: 5vh;
   box-sizing: border-box;
+
+  &__topic {
+    height: 30%;
+    width: 100%;
+    padding-top: 1rem;
+    padding-left: 1rem;
+    box-sizing: border-box;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid lightgray;
+    display: flex;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
+      rgba(0, 0, 0, 0.23) 0px 6px 6px;
+    border-radius: 10px;
+    background-color: gainsboro;
+
+    &__content {
+      font-size: 2rem;
+      padding-top: 4rem;
+      padding-left: 5rem;
+      padding-right: 3rem;
+      box-sizing: border-box;
+      text-align: left;
+    }
+
+    &__left {
+      width: 15%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background-color: aliceblue;
+      border-radius: 10px;
+      box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
+        rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+      &--img {
+        background-image: url("../../assets/images/user.png");
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 90%;
+        width: 100%;
+      }
+      &--name {
+        font-size: 2rem;
+      }
+    }
+  }
+
+  &__answers {
+    width: 100%;
+    height: 55%;
+    overflow-y: auto;
+  }
+
+  &__add {
+    background-color: blue;
+    width: 100%;
+    height: 15%;
+  }
 }

app/src/pages/Topic/index.tsx

@@ -1,11 +1,76 @@
+import { useContext, useEffect, useState } from "react";
+import Answer from "../../components/Answer";
 import Card from "../../components/Card";
 import "./index.scss";
+import AuthContext from "../../utils/store/AuthContext";
+import { useParams } from "react-router-dom";
+import { findAllByTopicId, findByTopicId } from "../../services/forumService";
+import { WarningMessage } from "../../utils/toastService/toastService";
 
 const TopicPage = () => {
+  const [answers, setAnswers] = useState([]);
+  const [topic, setTopic] = useState({});
+  const context = useContext(AuthContext);
+  const { id } = useParams();
+
+  const fetchAnswers = async () => {
+    if (id != undefined) {
+      let res: any;
+      res = await findAllByTopicId(+id);
+      if (!res || !res.data) {
+        WarningMessage("Something went wrong.");
+        return;
+      }
+      setAnswers(res.data);
+    }
+  };
+
+  const fetchTopic = async () => {
+    if (id != undefined) {
+      let res: any;
+      res = await findByTopicId(+id);
+      if (!res || !res.data) {
+        WarningMessage("Something went wrong.");
+        return;
+      }
+      setTopic(res.data);
+    }
+  };
+
+  useEffect(() => {
+    fetchTopic();
+    fetchAnswers();
+  }, [context.user.id]);
+
+  const getAnswers = () => {
+    let retVal = [];
+    for (let a of answers) {
+      retVal.push(
+        <Answer
+          key={Math.random()}
+          name={(a as any).name}
+          text={(a as any).text}
+          date={(a as any).dateTime}
+        ></Answer>
+      );
+    }
+    return retVal;
+  };
+
   return (
     <div className="topic-page">
       <Card width="80vw" height="80vh" backgroundColor="rgba(240, 248, 255)">
-        a
+        <div className="topic-page__topic">
+          <div className="topic-page__topic__left">
+            <div className="topic-page__topic__left--img"></div>
+            <div className="topic-page__topic__left--name">Zika</div>
+          </div>
+          <div className="topic-page__topic__content">
+            {topic && (topic as any).text}
+          </div>
+        </div>
+        <div className="topic-page__answers">{answers && getAnswers()}</div>
+        <div className="topic-page__add"></div>
       </Card>
     </div>
   );

app/src/services/forumService.tsx

@@ -3,3 +3,11 @@ import { request } from "./HTTP";
 export async function findAllByStatus(status: string) {
   return await request("/topic/accepted");
 }
+
+export async function findAllByTopicId(id: number) {
+  return await request("/answer/topic/" + id);
+}
+
+export async function findByTopicId(id: number) {
+  return await request("/topic/" + id);
+}