Skip to content

Commit

Permalink
🍂[Frontend] Integrate delete for Questions and Answers in admin Fixed (…
Browse files Browse the repository at this point in the history 
…#924)

* delete QA

* ui change
  • Loading branch information
@Hemu21
Hemu21 authored May 18, 2024
1 parent 4c2dbad commit eaa5048
Show file tree
Hide file tree
Showing 3 changed files with 232 additions and 46 deletions.
239 changes: 200 additions & 39 deletions frontend/src/pages/Admin/Components/Faq/Q&A/ManageQ&A/ManageQ&A.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,34 @@
import { useEffect, useState } from "react";
import { END_POINT } from "../../../../../../config/api";
import style from "./manage.module.scss";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import { AiOutlineArrowLeft } from "react-icons/ai";
import { SimpleToast } from "../../../../../../components/util/Toast/Toast";
import Loader from "../../../../../../components/util/Loader";

const useStyles = makeStyles((theme) => ({
modal: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
paper: {
backgroundColor: theme.palette.background.paper,
border: "2px solid #000",
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
buttons: {
display: "flex",
marginTop: "10px",
justifyContent: "center",
gap: "10px",
},
}));

export function Manageqa({ setTab, qId }) {
const [ans, setAns] = useState([]);
const [qns, setQns] = useState();
Expand All @@ -15,6 +39,9 @@ export function Manageqa({ setTab, qId }) {
toastType: "",
toastMessage: "",
});
const [confirmDelete, setConfirmDelete] = useState(false);
const [questionToDelete, setQuestionToDelete] = useState(null);
const classes = useStyles();
const getQuestion = async (id) => {
setIsLoaded(true);
try {
Expand All @@ -39,6 +66,79 @@ export function Manageqa({ setTab, qId }) {
});
}
};

const handleOpenConfirmModal = (id) => {
setConfirmDelete(true);
setQuestionToDelete(id);
};

const handleCloseConfirmModal = () => {
setConfirmDelete(false);
};

const handleDeleteAnswer = async (answerId) => {
try {
const url = `${END_POINT}/answers/deleteanswer`;
const response = await fetch(url, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
body: JSON.stringify({ answerId }),
});

const data = await response.json();
setToast({
...toast,
toastMessage: "Successfully deleted answer",
toastStatus: true,
toastType: "success",
});
setToogle(!toogle);
} catch (error) {
console.log(error);
setToast({
...toast,
toastMessage: "Unable to delete answer",
toastStatus: true,
toastType: "error",
});
}
};

const handleDeleteQuestion = async () => {
try {
const url = `${END_POINT}/question/deletequestion`;
const response = await fetch(url, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
body: JSON.stringify({ questionId: questionToDelete }),
});

const data = await response.json();
setToast({
...toast,
toastMessage: "Successfully deleted question",
toastStatus: true,
toastType: "success",
});
setTab(18);
setToogle(!toogle);
} catch (error) {
console.log(error);
setToast({
...toast,
toastMessage: "Unable to delete question",
toastStatus: true,
toastType: "error",
});
}
};

const updateQuestion = async (id, status) => {
try {
const qUrl = `${END_POINT}/question/updateStatus`;
Expand Down Expand Up @@ -68,6 +168,7 @@ export function Manageqa({ setTab, qId }) {
});
}
};

const getAnswer = async (questionId) => {
try {
const aUrl = `${END_POINT}/answers/${questionId}`;
Expand All @@ -92,6 +193,7 @@ export function Manageqa({ setTab, qId }) {
});
}
};

const updateAnswer = async (id, status) => {
try {
const aUrl = `${END_POINT}/answers/updateStatus`;
Expand Down Expand Up @@ -121,16 +223,19 @@ export function Manageqa({ setTab, qId }) {
});
}
};

const handleCloseToast = (event, reason) => {
if (reason === "clickaway") {
return;
}
setToast({ ...toast, toastStatus: false });
};

useEffect(() => {
getQuestion(qId);
getAnswer(qId);
}, [toogle]);

return (
<div>
<h1 className={style["head"]}>Manage Q&A</h1>
Expand All @@ -139,36 +244,57 @@ export function Manageqa({ setTab, qId }) {
</div>
<div className={style["data-loader"]}>{isLoaded ? <Loader /> : null}</div>
{isLoaded || (
<div className={style["card-item"]}>
<div className={style["card-info"]}>
<h1>{qns?.title}</h1>
<h2>Question</h2>
<div className={style["questionBox"]}>
<h3 className={style["card-question"]}>{qns?.description}</h3>
<div className={style["button-group"]}>
<button
className={
qns?.isApproved
? style["button-delete"]
: style["button-approve"]
}
id={`${qns?._id}`}
onClick={(e) => {
updateQuestion(e.currentTarget.id, !qns?.isApproved);
}}
>
{qns?.isApproved ? "DisApprove" : "Approve"}
</button>
<button className={style["button-delete"]}>Delete</button>
<>
<h1 className={style["head"]}>Question</h1>
<div className={style["question"]}>
<div className={style["card-item"]}>
<div className={style["card-info"]}>
<h1>{qns?.title}</h1>
<div className={style["questionBox"]}>
<h3 className={style["card-question"]}>{qns?.description}</h3>
<div className={style["button-group"]}>
<button
className={
qns?.isApproved
? style["button-delete"]
: style["button-approve"]
}
id={`${qns?._id}`}
onClick={(e) => {
updateQuestion(e.currentTarget.id, !qns?.isApproved);
}}
>
{qns?.isApproved ? "Reject" : "Approve"}
</button>
<button
name={`${qns?._id}`}
onClick={(e) =>
handleOpenConfirmModal(e.currentTarget.name)
}
className={style["button-delete"]}
>
Delete
</button>
</div>
<div style={{ display: "flex", padding: "10px 30px 10px 30px" }}>
{qns?.tags?.map((tag) => (
<p className={style["tags"]}>{tag}</p>
))}
</div>
</div>

</div>
</div>
</div>
<h1 className={style["head"]}>Answers</h1>

{ans?.length === 0 ? (
<span>No answers Found</span>
) : (
ans?.map((a) => (
<>
<h2>Answers</h2>
{ans?.length === 0 ? (
<span>No answers Found</span>
) : (
<div className={ans?.length==1?style["question"]:style["answer"]}>
{ans?.map((a) => (
<div className={style["card-item"]}>
<div className={style["card-info"]}>
<div className={style["answerBox"]}>
<h3 className={style["card-answer"]}>{a.answer}</h3>
<div className={style["button-group"]}>
Expand All @@ -178,28 +304,63 @@ export function Manageqa({ setTab, qId }) {
? style["button-delete"]
: style["button-approve"]
}
id={`${a._id}`}
id={`${a?._id}`}
onClick={(e) => {
updateAnswer(e.currentTarget.id, !a?.isApproved);
}}
>
{a?.isApproved ? "DisApprove" : "Approve"}
{a?.isApproved ? "Reject" : "Approve"}
</button>
<button
name={`${a?._id}`}
onClick={(e) =>
handleDeleteAnswer(e.currentTarget.name)
}
className={style["button-delete"]}
>
Delete
</button>
<button className={style["button-delete"]}>Delete</button>
</div>
</div>
</>
))
)}

<div style={{ display: "flex", padding: "10px 30px 10px 30px" }}>
{qns?.tags?.map((tag) => (
<p className={style["tags"]}>{tag}</p>
</div>
</div>
))}
</div>
</div>
</div>
)}
</>
)}
{
<Modal
open={confirmDelete}
onClose={handleCloseConfirmModal}
className={classes.modal}
>
<div className={classes.paper}>
<Typography variant="h6" component="h2">
Confirm Delete
</Typography>
<Typography sx={{ mt: 2 }}>
Are you sure you want to delete this question and all its answers?
</Typography>
<div className={classes.buttons}>
<Button
onClick={handleDeleteQuestion}
variant="contained"
color="secondary"
>
Confirm
</Button>
<Button
onClick={handleCloseConfirmModal}
variant="contained"
color="primary"
>
Cancel
</Button>
</div>
</div>
</Modal>
}
{toast.toastStatus && (
<SimpleToast
open={toast.toastStatus}
Expand Down
Loading

0 comments on commit eaa5048

Please sign in to comment.