⚙️Relevant answer Feature added (#1113)

* Upvote and Downvotes fixed * Most relevant label added * label aligned and timestamp fixed
HITK-TECH-Community · Aug 6, 2024 · 980d9de · 980d9de
1 parent 526b35e
commit 980d9de
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx
@@ -9,6 +9,7 @@ export function AnswerModel(props) {
     const [answer, setAnswer] = useState("")
     const [author, setAuthor] = useState("")
     const [answers, setAnswers] = useState([])
+    const[maxUpvote,setMaxUpvote]=useState(0)
     const [toast, setToast] = useState({
         toastStatus: false,
         toastType: "",
@@ -19,6 +20,7 @@ export function AnswerModel(props) {
     }
     async function fetchAnswers() {
         const data = await getAnswers(props.data._id, setToast)
+        setMaxUpvote(data.map(function(o) { return o.upvotes; }).sort().reverse()[0])
         setAnswers(filterAnswers(data))
     }
     useEffect(() => {
@@ -28,7 +30,7 @@ export function AnswerModel(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'}`
+        return `${String(messageTime.getDate())} ${String(months[messageTime.getMonth()])} ${String(messageTime.getFullYear())}`
     }
     const Tags = [
         { value: "ml" },
@@ -126,6 +128,7 @@ export function AnswerModel(props) {
                                                     <div className="answer-header">
                                                         <h5>{ans.created_by || "Anonymous"}</h5>
                                                         <p>{timeStampFormatter(ans.created_on)}</p>
+                                                        {(maxUpvote!=0&&maxUpvote==ans.upvotes)&&<p className="most-relevant-label" style={{ backgroundColor: dark && "#69a9dd",color:dark&&"#fff"}}>Most relevant</p>}
                                                     </div>
                                                     <p>{ans.answer}</p>
                                                     <div>

diff --git a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss
@@ -123,7 +123,14 @@
     margin: 5px;
     cursor: pointer;
   }
-
+.most-relevant-label{
+    width: fit-content;
+    background-color: #243e74;
+    font-size: 12px !important;
+    color: white;
+    padding: 3px 8px;
+    border-radius: 8px;
+}  
 
 @media screen and (max-width:768px) {
     .modal-container {