Answers Integrated in Q&A page

frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx

@@ -1,16 +1,32 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Modal, Backdrop, Fade } from '@material-ui/core';
 import { SimpleToast } from '../../../components/util/Toast'
-import {postAnswer} from '../../../service/Faq'
+import {postAnswer,getAnswers} from '../../../service/Faq'
 import style from './AnswerModel.scss'
 
 export function AnswerModel(props) {
     const [answer, setAnswer] = useState("")
+    const[answers,setAnswers]=useState([])
     const [toast, setToast] = useState({
         toastStatus: false,
         toastType: "",
         toastMessage: "",
     });
+    const filterAnswers=(fetchedAnswers)=>{
+        return fetchedAnswers.filter((ans)=>{return ans.isApproved==true})
+    }
+    async function fetchAnswers(){
+        const data=await getAnswers(props.data._id,setToast)
+        setAnswers(filterAnswers(data))
+    }
+    useEffect(()=>{
+        fetchAnswers()
+    },[props])
+    function timeStampFormatter(time){
+        const months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
+        const messageTime=new Date(time)
+        return `${String(messageTime.getDate())} ${String(months[messageTime.getMonth()])} ${String(messageTime.getFullYear())} ${String(messageTime.getHours()%12 || 12).padStart(2,'0')}:${String(messageTime.getMinutes()).padStart(2,'0')} ${messageTime.getHours()>=12?'pm':'am'}`
+    }
     const Tags = [
         { value: "ml" },
         { value: "open-source" },
@@ -75,7 +91,7 @@ export function AnswerModel(props) {
                                 props && props.data?.tags?.map((tag, index) => {
                                     if (tag)
                                         return (
-                                            <p key={index}>#{Tags[index].value}</p>
+                                            <p key={index}>#{tag}</p>
                                         )
                                 })
                             }
@@ -84,6 +100,27 @@ export function AnswerModel(props) {
                             <input className="answer-field" onChange={(e) => { setAnswer(e.target.value) }} value={answer} type="text" placeholder="Post your answer" />
                             <button className="post-answer-btn">Post</button>
                         </form>
+                        <h3 className="answer-title">Answers ({answers.length})</h3>
+                        {
+                            answers.length==0?
+                            <p>No answers found...</p>
+                            :
+                            <div>
+                                {
+                                    answers.map((ans,index)=>{
+                                        return(
+                                            <div className="answer-container">
+                                                <div className="answer-header">
+                                                    <h5>{ans.created_by}</h5>
+                                                    <p>{timeStampFormatter(ans.created_on)}</p>
+                                                </div>
+                                                <p>{ans.answer}</p>
+                                            </div>
+                                        )
+                                    })
+                                }
+                            </div>
+                        }
                     </div>
                 </Fade>
             </Modal>

frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss

@@ -1,16 +1,21 @@
-:root{
+:root {
     font-family: "Futura LT Book";
 }
+
 .modal-container {
     width: 70%;
     height: auto;
     background-color: white;
     outline: none !important;
     padding: 20px 20px;
     border-radius: 12px;
-    h2{
+
+    h2 {
         margin: 0;
     }
+
+    max-height: 100%;
+    overflow-y: scroll;
 }
 
 .modal {
@@ -22,44 +27,52 @@
     overflow-y: scroll;
     outline: none !important;
 }
-.close-icon-container{
+
+.close-icon-container {
     display: flex;
     justify-content: end;
 }
-.close-icon{
+
+.close-icon {
     font-size: 24px;
     padding-right: 20px;
     cursor: pointer;
-    color:#243e74;
+    color: #243e74;
 }
-.ques-title{
-    color:#243e74;
+
+.ques-title {
+    color: #243e74;
 }
-.ques-description{
+
+.ques-description {
     font-size: 16px;
     margin: 10px auto;
 }
-.tag-container{
+
+.tag-container {
     width: 100%;
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }
-.answer-form{
+
+.answer-form {
     width: 100%;
     margin: 14px auto;
     display: flex;
     justify-content: space-between;
     gap: 8px;
 }
-.answer-field{
+
+.answer-field {
     width: 85%;
     padding: 10px 20px;
     outline: none;
     border: 1px solid #ccc;
     border-radius: 8px;
 }
-.post-answer-btn{
+
+.post-answer-btn {
     width: 15%;
     padding: 10px 20px;
     background-color: #243e74;
@@ -68,17 +81,52 @@
     border-radius: 8px;
     outline: none;
 }
+
+.answer-title {
+    color: #243e74;
+}
+
+.answer-container {
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 20px;
+    margin-top: 20px;
+
+    p {
+        margin-top: 8px;
+        font-size: 16px;
+    }
+}
+
+.answer-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    h5 {
+        margin: 0;
+    }
+
+    p {
+        font-size: 12px;
+        margin: 0;
+    }
+}
+
 @media screen and (max-width:768px) {
-    .modal-container{
+    .modal-container {
         width: 90%;
     }
-    .close-icon{
+
+    .close-icon {
         padding-right: 5px;
     }
-    .answer-field{
+
+    .answer-field {
         width: 70%;
     }
-    .post-answer-btn{
+
+    .post-answer-btn {
         width: 25%;
     }
 }