Feat/delete question

components/admin/taskSteps/quizStep.tsx

@@ -7,6 +7,8 @@ import { TEXT_TYPE } from "@constants/typography";
 import InputCard from "../inputCard";
 import Dropdown from "@components/UI/dropdown";
 import { SelectChangeEvent } from "@mui/material";
+import { FaTrash } from "react-icons/fa";
+import { AdminService } from "@services/authService";
 
 type QuizStepProps = {
   handleTasksInputChange: (
@@ -150,6 +152,35 @@ const QuizStep: FunctionComponent<QuizStepProps> = ({
     setSteps(updatedSteps);
   }, [steps]);
 
+  const handleDeleteQuestion = useCallback(
+    (questionId: number, quizId: number, questionIndex: number) => {
+      AdminService.deleteQuizQuestion({
+        id: questionId,
+        quiz_id: quizId,
+      });
+
+      const updatedSteps = steps.map((step, i) => {
+        if (i === index && step.type === "Quiz") {
+          const updatedQuestions = step.data.questions.filter(
+            (_: any, qIndex: number) => qIndex !== questionIndex
+          );
+          return {
+            ...step,
+            data: {
+              ...step.data,
+              questions: updatedQuestions,
+            },
+          };
+        }
+        return step;
+      });
+
+      setSteps(updatedSteps);
+    },
+    [steps]
+  );
+
+
   return (
     <div className="flex flex-col gap-8 pt-2">
       <div className="flex flex-col gap-1">
@@ -222,17 +253,23 @@ const QuizStep: FunctionComponent<QuizStepProps> = ({
         {step.data.questions?.map(
           (
             eachQuestion: typeof QuizQuestionDefaultInput,
-            questionIndex: number
+            questionIndex: number,
           ) => (
             <InputCard key={"questionCategory-" + questionIndex}>
               <div className="flex flex-col gap-1">
-                <TextInput
-                  onChange={(e) => handleQuestionChange(e, questionIndex)}
-                  value={eachQuestion.question}
-                  name="question"
-                  label={`Describe your question`}
-                  placeholder={`Question ${questionIndex + 1}`}
-                />
+                <div className="flex justify-between items-center">
+                  <TextInput
+                    onChange={(e) => handleQuestionChange(e, questionIndex)}
+                    value={eachQuestion.question}
+                    name="question"
+                    label={`Describe your question`}
+                    placeholder={`Question ${questionIndex + 1}`}
+                  />
+                  <FaTrash
+                    onClick={() => handleDeleteQuestion(eachQuestion.id, step.data.quiz_id, questionIndex)}
+                    className="text-red-500 cursor-pointer"
+                  />  
+                </div>
                 <Typography type={TEXT_TYPE.BODY_MICRO} color="textGray">
                   Write the question&apos;s description.
                 </Typography>

services/authService.ts

@@ -15,6 +15,7 @@ import {
   UpdateQuest,
   UpdateQuiz,
   UpdateQuizQuestion,
+  DeleteQuizQuestion,
   UpdateTwitterFw,
   UpdateTwitterRw,
   CreateNftUri,
@@ -492,6 +493,25 @@ const updateQuizQuestion = async (params: UpdateQuizQuestion) => {
   }
 };
 
+const deleteQuizQuestion = async (params: DeleteQuizQuestion) => {
+  try {
+    const response = await fetch(
+      `${baseurl}/admin/tasks/quiz/question/delete`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+        body: JSON.stringify(params),
+      }
+    );
+    return await response.json();
+  } catch (err) {
+    console.log("Error while deleting quiz question", err);
+  }
+}; 
+
 const deleteTask = async (params: { id: number }) => {
   try {
     const response = await fetch(`${baseurl}/admin/tasks/remove_task`, {
@@ -595,6 +615,7 @@ export const AdminService = {
   updateTwitterRw,
   updateTwitterFw,
   updateQuizQuestion,
+  deleteQuizQuestion,
   updateQuiz,
   updateCustom,
   updateDiscord,

types/backTypes.d.ts

@@ -466,6 +466,11 @@ export type UpdateQuizQuestion = {
   quiz_id: number;
 };
 
+export type DeleteQuizQuestion = {
+  id: number;
+  quiz_id: number;
+};
+
 export type NFTUri = {
   name: string;
   description: string;