From 219ffad0107be7e821c9052d2f23b207f3704a9b Mon Sep 17 00:00:00 2001
From: tejasnasre <tejasnasre120@gmail.com>
Date: Mon, 20 May 2024 22:18:09 +0530
Subject: [PATCH] Integrate-Answers-in-QA-Page - Added Small Code

---
 backend/.env                                  |  2 +-
 frontend/src/app.js                           |  6 ++
 .../Q&A/Components/GetAnswer/GetAnswer.jsx    | 74 +++++++++++++++++++
 .../Q&A/Components/GetAnswer/GetAnswer.scss   |  9 +++
 frontend/src/pages/Q&A/Q&A.jsx                | 31 ++++----
 5 files changed, 107 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/pages/Q&A/Components/GetAnswer/GetAnswer.jsx
 create mode 100644 frontend/src/pages/Q&A/Components/GetAnswer/GetAnswer.scss

diff --git a/backend/.env b/backend/.env
index b2ab43ac..1e4900f7 100644
--- a/backend/.env
+++ b/backend/.env
@@ -1,4 +1,4 @@
-MONGO_DB_URL=<mongoDB_URL>
+MONGO_DB_URL=mongodb://localhost:27017/testdb
 JWT_SECRET_KEY=<JWT_sceret>
 JWT_EXPIRES_IN=6h
 BASE_URL=https://community-website-backend.herokuapp.com
diff --git a/frontend/src/app.js b/frontend/src/app.js
index 88e73909..6e58ba0e 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -36,6 +36,7 @@ import { Broadcast } from "./pages/Broadcast/index";
 import { AllBroadcasts } from "./pages/Broadcast/Component/AllBroadcasts/index";
 import { GetInvolved } from "./pages/GetInvolved";
 import { ForgotPasswordRecovery } from "./pages/ForgotPasswordRecovery/index";
+import GetAnswer from "./pages/Q&A/Components/GetAnswer/GetAnswer.jsx";
 
 import { useSelector } from "react-redux";
 
@@ -132,6 +133,11 @@ const App = () => {
                 path="/Q&A"
                 render={() => <Ques theme={theme} />}
               />
+              <Route
+                exact={true}
+                path="/getanswers/:answerId"
+                render={() => <GetAnswer theme={theme} />}
+              />
               <Route
                 exact={true}
                 path="/admin"
diff --git a/frontend/src/pages/Q&A/Components/GetAnswer/GetAnswer.jsx b/frontend/src/pages/Q&A/Components/GetAnswer/GetAnswer.jsx
new file mode 100644
index 00000000..ed645ed0
--- /dev/null
+++ b/frontend/src/pages/Q&A/Components/GetAnswer/GetAnswer.jsx
@@ -0,0 +1,74 @@
+import React, { useEffect } from "react";
+import { useState } from "react";
+import "./GetAnswer.scss";
+import "../../../Q&A/Ques.scss";
+import { END_POINT } from "../../../../config/api";
+import { useParams } from "react-router-dom";
+
+function GetAnswer() {
+  const { answerId } = useParams();
+  // console.log(answerId);
+
+  const [answer, setAnswer] = useState([]);
+
+  //Get Answer
+  const GetAnswer = (answerId) => {
+    try {
+      fetch(`${END_POINT}/answers/${answerId}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          console.log(data);
+          setAnswer(data.data);
+        });
+    } catch (error) {
+      console.error("Error fetching answer:", error);
+    }
+  };
+  useEffect(() => {
+    GetAnswer(answerId);
+  }, []);
+
+  console.log(answer);
+
+  return (
+    <>
+      <div className="main">
+        <div className="question">question</div>
+        <div className="answers">
+          {answer.length > 0 ? (
+            answer.map((item, key) => (
+              <div className="question-cards" key={key}>
+                <div className="question-card">
+                  <div className="card-up">
+                    <p>{item.answer}</p>
+                    <span className="tag-space">#</span>
+                  </div>
+                  <div className="card-down">
+                    <div>
+                      <p>
+                        Created At {new Date(item.createdAt).toLocaleString()}
+                      </p>
+                      <p>Created By {item.created_by}</p>
+                    </div>
+                    <div>
+                      <button className="vote-btn">👍</button>
+                      <button className="vote-btn">👎</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          ) : (
+            <h1>No Answer</h1>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+export default GetAnswer;
diff --git a/frontend/src/pages/Q&A/Components/GetAnswer/GetAnswer.scss b/frontend/src/pages/Q&A/Components/GetAnswer/GetAnswer.scss
new file mode 100644
index 00000000..7c038e5b
--- /dev/null
+++ b/frontend/src/pages/Q&A/Components/GetAnswer/GetAnswer.scss
@@ -0,0 +1,9 @@
+.main {
+  height: 100vh;
+  width: 100%;
+  background-color: #171717;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/frontend/src/pages/Q&A/Q&A.jsx b/frontend/src/pages/Q&A/Q&A.jsx
index f3be734e..754a96b0 100644
--- a/frontend/src/pages/Q&A/Q&A.jsx
+++ b/frontend/src/pages/Q&A/Q&A.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import { Link } from "react-router-dom";
 import { Button2, Button1 } from "../../components/util/Button";
 import style from "../Resources/components/ResourceSharingForm/resource-sharing-form.module.scss";
 import "./Ques.scss";
@@ -7,11 +8,6 @@ import Joi from "joi-browser";
 import Loader from "../../components/util/Loader/index";
 import { SimpleToast } from "../../components/util/Toast";
 import { END_POINT } from "../../config/api";
-import {
-  AirplayTwoTone,
-  ErrorSharp,
-  SettingsBluetoothSharp,
-} from "@material-ui/icons";
 
 function Ques(props) {
   let dark = props.theme;
@@ -124,17 +120,17 @@ function Ques(props) {
         body: JSON.stringify(formdata),
       });
       const data = await response.json();
-      if(data.errStack){
+      if (data.errStack) {
         setToastMessage(`${data.errStack}`);
         setOpenToast(true);
         setSeverity("error");
-      }else{
+      } else {
         setToastMessage("Q&A added successfully!");
         setOpenToast(true);
         setSeverity("success");
       }
       setIsUploadingData(false);
-     
+
       setFormData({
         title: "",
         description: "",
@@ -273,6 +269,9 @@ function Ques(props) {
                   >
                     👎 {item.downvote}
                   </button>
+                  <button>
+                    <Link to={`/getanswers/${item._id}`}>Get Answer</Link>
+                  </button>
                 </div>
               </div>
             </div>
@@ -428,12 +427,16 @@ function Ques(props) {
                 style={{ justifyContent: "space-around" }}
               >
                 <div className="data-loader">
-                  {isUploadingData ? <Loader /> :  <Button2
-                  style={{ marginRight: "3%" }}
-                  className={style["submit-btn-text"]}
-                  label="Submit"
-                  type="submit"
-                />}
+                  {isUploadingData ? (
+                    <Loader />
+                  ) : (
+                    <Button2
+                      style={{ marginRight: "3%" }}
+                      className={style["submit-btn-text"]}
+                      label="Submit"
+                      type="submit"
+                    />
+                  )}
                 </div>
               </div>
             </div>