UI to answer the questions in Q&A Section Added

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

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import { Modal, Backdrop, Fade } from '@material-ui/core';
+import { SimpleToast } from '../../../components/util/Toast'
+import {postAnswer} from '../../../service/Faq'
+import style from './AnswerModel.scss'
+
+export function AnswerModel(props) {
+    const [answer, setAnswer] = useState("")
+    const [toast, setToast] = useState({
+        toastStatus: false,
+        toastType: "",
+        toastMessage: "",
+    });
+    const Tags = [
+        { value: "ml" },
+        { value: "open-source" },
+        { value: "deap-learning" },
+        { value: "cp" },
+        { value: "block-chain" },
+        { value: "mern" },
+        { value: "android" },
+        { value: "mean" },
+        { value: "javascript" },
+        { value: "java" },
+        { value: "c++" },
+        { value: "python" },
+    ];
+    function handleSubmit(e) {
+        e.preventDefault()
+        if(answer!=""){
+            let data={question_id:props.data._id,answer,created_on:new Date(),created_by:"Anonymous"}
+            postAnswer(data,setToast)
+            setAnswer("")
+            props.handleClose(false)
+        }else{
+            setToast({toastStatus:true,toastMessage:"Please enter your answer",toastType:"error"})
+        }
+    }
+    return (
+        <div>
+            {toast.toastStatus && (
+                <SimpleToast
+                    open={toast.toastStatus}
+                    message={toast.toastMessage}
+                    handleCloseToast={()=>{setToast({toastMessage:"",toastStatus:false,toastType:""})}}
+                    severity={toast.toastType}
+                />
+            )}
+            <Modal
+                aria-labelledby="transition-modal-title"
+                aria-describedby="transition-modal-description"
+                className="modal"
+                open={props.open}
+                onClose={props.handleClose}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                }}
+            >
+                <Fade in={props.open}>
+                    <div className={"modal-container"}>
+                        <div className="close-icon-container">
+                            <span onClick={() => { 
+                                setAnswer("")
+                                props.handleClose(false)
+                             }}>
+                                <i class="fas fa-times close-icon"></i>
+                            </span>
+                        </div>
+                        <h2 className="ques-title">{props.data?.title}</h2>
+                        <p className="ques-description">{props.data?.description}</p>
+                        <div className="tag-container">
+                            {
+                                props && props.data?.tags?.map((tag, index) => {
+                                    if (tag)
+                                        return (
+                                            <p key={index}>#{Tags[index].value}</p>
+                                        )
+                                })
+                            }
+                        </div>
+                        <form className="answer-form" onSubmit={handleSubmit}>
+                            <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>
+                    </div>
+                </Fade>
+            </Modal>
+        </div>
+    )
+}

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

@@ -0,0 +1,84 @@
+: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{
+        margin: 0;
+    }
+}
+
+.modal {
+    display: flex;
+    position: fixed;
+    align-items: center;
+    justify-content: center;
+    align-items: center;
+    overflow-y: scroll;
+    outline: none !important;
+}
+.close-icon-container{
+    display: flex;
+    justify-content: end;
+}
+.close-icon{
+    font-size: 24px;
+    padding-right: 20px;
+    cursor: pointer;
+    color:#243e74;
+}
+.ques-title{
+    color:#243e74;
+}
+.ques-description{
+    font-size: 16px;
+    margin: 10px auto;
+}
+.tag-container{
+    width: 100%;
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+.answer-form{
+    width: 100%;
+    margin: 14px auto;
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+}
+.answer-field{
+    width: 85%;
+    padding: 10px 20px;
+    outline: none;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+}
+.post-answer-btn{
+    width: 15%;
+    padding: 10px 20px;
+    background-color: #243e74;
+    border: none;
+    color: #fff;
+    border-radius: 8px;
+    outline: none;
+}
+@media screen and (max-width:768px) {
+    .modal-container{
+        width: 90%;
+    }
+    .close-icon{
+        padding-right: 5px;
+    }
+    .answer-field{
+        width: 70%;
+    }
+    .post-answer-btn{
+        width: 25%;
+    }
+}

frontend/src/pages/Q&A/AnswerModel/index.js

@@ -0,0 +1 @@
+export * from './AnswerModel'

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

@@ -12,6 +12,7 @@ import {
   downvote,
 } from "../../service/Faq";
 import { showToast, hideToast } from "../../service/toastService";
+import { AnswerModel } from './AnswerModel/index'
 
 function Ques(props) {
   let dark = props.theme;
@@ -36,6 +37,8 @@ function Ques(props) {
   const [checkedState, setCheckedState] = useState(
     new Array(Tags.length).fill(false)
   );
+  const [open, setOpen] = useState(false)
+  const [currentQuestion, setCurrentQuestion] = useState({})
   const [toast, setToast] = useState({
     toastStatus: false,
     toastType: "",
@@ -160,9 +163,10 @@ function Ques(props) {
 
   return (
     <div
-    className="popup-creator"
-    style={{ background: dark ? "#171717" : "white" }}
-  >
+      className="popup-creator"
+      style={{ background: dark ? "#171717" : "white" }}
+    >
+      <AnswerModel theme={dark} open={open} data={currentQuestion} handleClose={setOpen} />
     {
       !loading ?
         <Loader /> :
@@ -204,8 +208,13 @@ function Ques(props) {
                     </button>
                   </div>
                 </div>
+                <button className="answer-btn" onClick={() => {
+                  setCurrentQuestion(item)
+                  setOpen(true)
+                }}>Answers</button>
               </div>
-            ))}
+            )
+            )};
         </div>
       }
       {toast.toastStatus && (

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

@@ -69,6 +69,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  position: relative;
 }
 
 .card-up {
@@ -137,3 +138,16 @@
   justify-content: center;
   align-items: center;
 }
+.answer-btn{
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  padding: 5px 8px;
+  border: none;
+  outline: none !important;
+  background-color: white;
+  font-family: "Futura LT Book";
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 12px;
+}

frontend/src/service/Faq.jsx

@@ -326,3 +326,26 @@ export const downvote = async (questionId, handleToast) => {
     throw new Error("Failed to downvote question");
   }
 };
+
+export const postAnswer = async (data, setToast) => {
+  try {
+    showToast(setToast,"Posting...","info")
+    const url = `${END_POINT}/answers/`;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+    const res = await response.json();
+    if(response.status==200)
+      showToast(setToast, "Thanks for answering, it has been sent to admins for review and will appear here on approval","success");
+    else
+      showToast(setToast, "Failed to Post Answer", "error");
+    return res;
+  } catch (error) {
+    showToast(setToast, "Failed to Post Answer", "error");
+    throw new Error("Failed to post answer");
+  }
+}