diff --git a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx
index a0f7bfc4..aaf075af 100644
--- a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx
+++ b/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 (
-
#{Tags[index].value}
+ #{tag}
)
})
}
@@ -84,6 +100,27 @@ export function AnswerModel(props) {
{ setAnswer(e.target.value) }} value={answer} type="text" placeholder="Post your answer" />
+ Answers ({answers.length})
+ {
+ answers.length==0?
+ No answers found...
+ :
+
+ {
+ answers.map((ans,index)=>{
+ return(
+
+
+
{ans.created_by}
+
{timeStampFormatter(ans.created_on)}
+
+
{ans.answer}
+
+ )
+ })
+ }
+
+ }
diff --git a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss
index a087fd0f..3524d2a8 100644
--- a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss
+++ b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss
@@ -1,6 +1,7 @@
-:root{
+:root {
font-family: "Futura LT Book";
}
+
.modal-container {
width: 70%;
height: auto;
@@ -8,9 +9,13 @@
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%;
}
}
\ No newline at end of file