Skip to content

Commit

Permalink
βš™οΈ UI to answer the questions in Q&A Section Added (#1104)
Browse files Browse the repository at this point in the history
* Upvote and Downvotes fixed

* Feat: Post answer added in Q&A Section
  • Loading branch information
BHS-Harish authored Aug 4, 2024
1 parent 934ae7f commit 33a9c76
Show file tree
Hide file tree
Showing 6 changed files with 227 additions and 4 deletions.
92 changes: 92 additions & 0 deletions frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
84 changes: 84 additions & 0 deletions frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss
Original file line number Diff line number Diff line change
@@ -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%;
}
}
1 change: 1 addition & 0 deletions frontend/src/pages/Q&A/AnswerModel/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './AnswerModel'
17 changes: 13 additions & 4 deletions frontend/src/pages/Q&A/Q&A.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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: "",
Expand Down Expand Up @@ -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 /> :
Expand Down Expand Up @@ -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 && (
Expand Down
14 changes: 14 additions & 0 deletions frontend/src/pages/Q&A/Ques.scss
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}

.card-up {
Expand Down Expand 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;
}
23 changes: 23 additions & 0 deletions frontend/src/service/Faq.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
}

0 comments on commit 33a9c76

Please sign in to comment.