questions module

frontend/src/App.css

@@ -23,3 +23,25 @@
 .incorrect-input {
   background: red;
 }
+.container-question {
+  display: flex;
+  background: red;
+  width: 1500px;
+  margin: 0 auto;
+}
+
+.container-view-question {
+  background: lightcoral;
+  width: 400px;
+  height: 300px;
+  margin-left: 20px;
+  transition: all 0.25s ease-in-out;
+}
+.container-view-question textarea {
+  width: 200px;
+  height: 150px;
+}
+.container-view-question:hover {
+  transform: scale(1.2);
+  transition-delay: 0.11s;
+}

frontend/src/Components/Question/Question.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Question = (props) => {
+  return (
+    <div className="container-view-question">
+      <h4>Title: {props.title}</h4>
+      <h6>Area of Question:{props.area}</h6>
+      <p>{props.detail}</p>
+      <textarea placeholder="write your answer here"></textarea>
+      <button>Submit Your Asnwer!</button>
+    </div>
+  );
+};
+
+export default Question;

frontend/src/Components/Question/ViewQuestion.js

@@ -1,44 +1,54 @@
 import React, { useState, useEffect } from "react";
+import Question from "./Question";
 
-const ViewQuestion = () => {
+const ViewQuestion = (props) => {
   const [result, setResult] = useState([]);
 
-  const [title, setTitle] = useState([]);
-  const [area, setArea] = useState([]);
-  const [detail, setDetail] = useState([]);
+  // const [title, setTitle] = useState([]);
+  // const [area, setArea] = useState([]);
+  // const [detail, setDetail] = useState([]);
 
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     async function fetchData() {
       const databaseResult = await fetch("/answerquestion");
       const resultObj = await databaseResult.json();
-      const tempArray = [];
-      const tempTitle = [];
-      const tempArea = [];
-      const tempDetail = [];
+      const tempResult = [];
+      // const tempTitle = [];
+      // const tempArea = [];
+      // const tempDetail = [];
+
       // push title into result state
 
       await resultObj.forEach((element) => {
-        tempTitle.push(element.title);
-        tempArea.push(element.area);
-        tempDetail.push(element.detail);
+        // tempTitle.push(element.title);
+        // tempArea.push(element.area);
+        // tempDetail.push(element.detail);
+        tempResult.push(element);
       });
-      setTitle(tempTitle);
-      setArea(tempArea);
-      setDetail(tempDetail);
+      // setTitle(tempTitle);
+      // setArea(tempArea);
+      // setDetail(tempDetail);
+      setResult(tempResult);
       setLoading(false);
     }
     fetchData();
   }, []);
 
   return (
-    <div>
-      <h1>
-        {area.map((element) => (
-          <h1>{element}</h1>
-        ))}
-      </h1>
+    <div className="container-question">
+      {loading ? (
+        <h4>Loading ...</h4>
+      ) : (
+        result.map((element) => (
+          <Question
+            title={element.title}
+            area={element.area}
+            detail={element.detail}
+          />
+        ))
+      )}
     </div>
   );
 };

getquestion.js

@@ -3,8 +3,9 @@ const { MongoClient } = require("mongodb");
 module.exports = async function (questionArray) {
   const uri = process.env.DB_CREDENTIALS;
 
-  const client = new MongoClient(uri);
+  const client = new MongoClient(uri, { useUnifiedTopology: true });
   let successOrFail = false;
+
   try {
     await client.connect();
 
@@ -14,11 +15,10 @@ module.exports = async function (questionArray) {
     // create js obj received by /login
 
     const result = await collection.find();
-    const questionArray = [];
-    await result.forEach((result) => questionArray.push(result));
 
-    return questionArray;
+    await result.forEach((result) => questionArray.push(result));
   } finally {
     await client.close();
+    return questionArray;
   }
 };