From 33a9c76f9372857701a656bfff1ee1554ac9966d Mon Sep 17 00:00:00 2001 From: Balaharisankar Lakshmanaperumal <114602603+BHS-Harish@users.noreply.github.com> Date: Sun, 4 Aug 2024 07:11:26 +0530 Subject: [PATCH] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20UI=20to=20answer=20the=20q?= =?UTF-8?q?uestions=20in=20Q&A=20Section=20Added=20(#1104)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Upvote and Downvotes fixed * Feat: Post answer added in Q&A Section --- .../src/pages/Q&A/AnswerModel/AnswerModel.jsx | 92 +++++++++++++++++++ .../pages/Q&A/AnswerModel/AnswerModel.scss | 84 +++++++++++++++++ frontend/src/pages/Q&A/AnswerModel/index.js | 1 + frontend/src/pages/Q&A/Q&A.jsx | 17 +++- frontend/src/pages/Q&A/Ques.scss | 14 +++ frontend/src/service/Faq.jsx | 23 +++++ 6 files changed, 227 insertions(+), 4 deletions(-) create mode 100644 frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx create mode 100644 frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss create mode 100644 frontend/src/pages/Q&A/AnswerModel/index.js diff --git a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx new file mode 100644 index 00000000..a0f7bfc4 --- /dev/null +++ b/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 ( +
+ {toast.toastStatus && ( + {setToast({toastMessage:"",toastStatus:false,toastType:""})}} + severity={toast.toastType} + /> + )} + + +
+
+ { + setAnswer("") + props.handleClose(false) + }}> + + +
+

{props.data?.title}

+

{props.data?.description}

+
+ { + props && props.data?.tags?.map((tag, index) => { + if (tag) + return ( +

#{Tags[index].value}

+ ) + }) + } +
+
+ { setAnswer(e.target.value) }} value={answer} type="text" placeholder="Post your answer" /> + +
+
+ + +
+ ) +} diff --git a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss new file mode 100644 index 00000000..a087fd0f --- /dev/null +++ b/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%; + } +} \ No newline at end of file diff --git a/frontend/src/pages/Q&A/AnswerModel/index.js b/frontend/src/pages/Q&A/AnswerModel/index.js new file mode 100644 index 00000000..6d8342de --- /dev/null +++ b/frontend/src/pages/Q&A/AnswerModel/index.js @@ -0,0 +1 @@ +export * from './AnswerModel' \ No newline at end of file diff --git a/frontend/src/pages/Q&A/Q&A.jsx b/frontend/src/pages/Q&A/Q&A.jsx index f3d92d0b..26698e49 100644 --- a/frontend/src/pages/Q&A/Q&A.jsx +++ b/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 (
+ className="popup-creator" + style={{ background: dark ? "#171717" : "white" }} + > + { !loading ? : @@ -204,8 +208,13 @@ function Ques(props) {
+ - ))} + ) + )}; } {toast.toastStatus && ( diff --git a/frontend/src/pages/Q&A/Ques.scss b/frontend/src/pages/Q&A/Ques.scss index 6b531ff6..cb60ecde 100644 --- a/frontend/src/pages/Q&A/Ques.scss +++ b/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; +} \ No newline at end of file diff --git a/frontend/src/service/Faq.jsx b/frontend/src/service/Faq.jsx index d3ee876c..981fe9cc 100644 --- a/frontend/src/service/Faq.jsx +++ b/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"); + } +}