From c7faa20002cd7568da7025a29eb27c74da541b9e Mon Sep 17 00:00:00 2001
From: Balaharisankar Lakshmanaperumal
 <114602603+BHS-Harish@users.noreply.github.com>
Date: Tue, 30 Jul 2024 19:13:46 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=80=20Bug:=20The=20Q&A=20option=20in?=
 =?UTF-8?q?=20nav=20bar=20fixed=20(#1088)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/Q&A/Q&A.jsx   | 72 +++++++++++++++++++-------------
 frontend/src/pages/Q&A/Ques.scss | 13 ++++++
 2 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/frontend/src/pages/Q&A/Q&A.jsx b/frontend/src/pages/Q&A/Q&A.jsx
index 686f1522..d9d2e1bb 100644
--- a/frontend/src/pages/Q&A/Q&A.jsx
+++ b/frontend/src/pages/Q&A/Q&A.jsx
@@ -123,10 +123,12 @@ function Ques(props) {
   };
 
   const [getQuestions, setQuestions] = useState([]);
-
   const fetchQuestions = () => {
     getAllQuestion(setToast).then((data) => {
       setLoading(false);
+      data = data.map((item) => {
+        return { ...item, tags: item.tags[0] };
+      });
       setQuestions(data);
     });
   };
@@ -154,38 +156,48 @@ function Ques(props) {
         <Loader />
       ) : (
         <div className="question-cards">
-          {getQuestions.map((item, key) => (
-            <div className="question-card" key={key}>
-              <div className="card-up">
-                <p>{item.title}</p>
-                <p>{item.description}</p>
-                {item.tags.map((i, key) => (
-                  <span className="tag-space" key={key}>
-                    #{i}
-                  </span>
-                ))}
-              </div>
-              <div className="card-down">
-                <div>
-                  <p>Created At {new Date(item.createdAt).toLocaleString()}</p>
+          {getQuestions?.map((item, key) => {
+            let tags = [...Object.values(item.tags)];
+            return (
+              <div className="question-card" key={key}>
+                <div className="card-up">
+                  <p>{item.title}</p>
+                  <p>{item.description}</p>
+                  <div className="tags-container">
+                    {tags.map((i, index) => {
+                      if (i == true)
+                        return (
+                          <span className="tag-space" key={index}>
+                            {i === true ? `#${Tags[index].value}` : ""}
+                          </span>
+                        );
+                    })}
+                  </div>
                 </div>
-                <div>
-                  <button
-                    className="vote-btn"
-                    onClick={() => handleUpvote(item._id)}
-                  >
-                    👍{item.upvotes}
-                  </button>
-                  <button
-                    className="vote-btn"
-                    onClick={() => handleDownvote(item._id)}
-                  >
-                    👎 {item.downvote}
-                  </button>
+                <div className="card-down">
+                  <div>
+                    <p>
+                      Created At {new Date(item.createdAt).toLocaleString()}
+                    </p>
+                  </div>
+                  <div>
+                    <button
+                      className="vote-btn"
+                      onClick={() => handleUpvote(item._id)}
+                    >
+                      👍{item.upvotes}
+                    </button>
+                    <button
+                      className="vote-btn"
+                      onClick={() => handleDownvote(item._id)}
+                    >
+                      👎 {item?.downvote}
+                    </button>
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       )}
 
diff --git a/frontend/src/pages/Q&A/Ques.scss b/frontend/src/pages/Q&A/Ques.scss
index 943c3016..6b531ff6 100644
--- a/frontend/src/pages/Q&A/Ques.scss
+++ b/frontend/src/pages/Q&A/Ques.scss
@@ -16,6 +16,19 @@
   align-content: center;
 }
 
+.tags-container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+.tag-space {
+  width: fit-content;
+}
+
 .close-popup {
   color: black;
   background: #69a9dd;