Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Frontend] Integrate delete for Questions and Answers in admin Fixed #924

Merged
merged 3 commits into from
May 18, 2024
Merged

[Frontend] Integrate delete for Questions and Answers in admin Fixed #924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be1f5f4
delete QA
Hemu21 May 18, 2024
741bb11
Merge branch 'HITK-TECH-Community:main' into FDQA
Hemu21 May 18, 2024
3d1e3ba
ui change
Hemu21 May 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 200 additions & 39 deletions frontend/src/pages/Admin/Components/Faq/Q&A/ManageQ&A/ManageQ&A.jsx
View file
Open in desktop
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
Loading