diff --git a/src/pages/Questions/DraggableList/DraggableListItem.tsx b/src/pages/Questions/DraggableList/DraggableListItem.tsx
index a9bb2c78..bb5b481f 100644
--- a/src/pages/Questions/DraggableList/DraggableListItem.tsx
+++ b/src/pages/Questions/DraggableList/DraggableListItem.tsx
@@ -1,23 +1,30 @@
import { Draggable } from "react-beautiful-dnd";
import { ListItem } from "@mui/material";
-import type { ReactNode } from "react";
+import QuestionsPageCard from "../QuestionPageCard";
type DraggableListItemProps = {
- item: ReactNode;
index: number;
+ onDelete: () => void;
};
-export const DraggableListItem = ({ item, index }: DraggableListItemProps) => (
+export const DraggableListItem = ({
+ index,
+ onDelete,
+}: DraggableListItemProps) => (
{(provided, snapshot) => (
- {item}
+
)}
diff --git a/src/pages/Questions/DraggableList/index.tsx b/src/pages/Questions/DraggableList/index.tsx
index c0df1edb..1ad73710 100644
--- a/src/pages/Questions/DraggableList/index.tsx
+++ b/src/pages/Questions/DraggableList/index.tsx
@@ -7,11 +7,15 @@ import { DraggableListItem } from "./DraggableListItem";
import { reorder } from "./helper";
-import type { ReactNode } from "react";
import type { DropResult } from "react-beautiful-dnd";
+import type { Quizes } from "../../../stores/quizes";
+
+export type ExtendedQuizes = Quizes & {
+ onDelete: () => void;
+};
type DraggableListProps = {
- items: ReactNode[];
+ items: ExtendedQuizes[];
};
export const DraggableList = ({ items }: DraggableListProps) => {
@@ -34,8 +38,12 @@ export const DraggableList = ({ items }: DraggableListProps) => {
{(provided) => (
- {listItems.map((item, index) => (
-
+ {listItems.map(({ onDelete }, index) => (
+
))}
{provided.placeholder}
diff --git a/src/pages/Questions/QuestionPageCard.tsx b/src/pages/Questions/QuestionPageCard.tsx
index 14aef5eb..eff88525 100644
--- a/src/pages/Questions/QuestionPageCard.tsx
+++ b/src/pages/Questions/QuestionPageCard.tsx
@@ -1,100 +1,127 @@
-import {Box, Checkbox, FormControlLabel, IconButton, Paper, useTheme} from "@mui/material";
+import {
+ Box,
+ Checkbox,
+ FormControlLabel,
+ IconButton,
+ Paper,
+ useTheme,
+} from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import OneIcon from "@icons/questionsPage/OneIcon";
import PointsIcon from "@icons/questionsPage/PointsIcon";
import TypeQuestions from "./TypeQuestions";
import SwitchQuestionsPage from "./SwitchQuestionsPage";
-import React, {useState} from "react";
+import React, { useState } from "react";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
-import {useParams} from "react-router-dom";
-import {questionStore} from "@root/questions";
+import { useParams } from "react-router-dom";
+import { questionStore } from "@root/questions";
import CopyIcon from "@icons/questionsPage/CopyIcon";
import CrossedEyeIcon from "@icons/CrossedEyeIcon";
import HideIcon from "@icons/questionsPage/hideIcon";
+import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
+
interface Props {
- DeleteClick: () => void;
- totalIndex: number
+ DeleteClick: () => void;
+ totalIndex: number;
+ draggableProps: DraggableProvidedDragHandleProps | null | undefined;
}
-export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {
+export default function QuestionsPageCard({
+ totalIndex,
+ DeleteClick,
+ draggableProps,
+}: Props) {
+ function onDragStart(event: any) {
+ event.dataTransfer.setData("text", event.target.id);
+ }
- function onDragStart(event: any) {
- event
- .dataTransfer
- .setData('text', event.target.id);
- }
-
-
- const theme = useTheme();
- const params = Number(useParams().quizId);
- const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
- const [isExpanded, setIsExpanded] = useState(false);
- const switchState = listQuestions[params][totalIndex].type
- return (
-
-
- {updateQuestionsList(params, totalIndex, {title: e.target.value})
- console.log(listQuestions[params][totalIndex].title)
- }
- }/>
- setIsExpanded((prev) => !prev)}>
- {" "}
- {isExpanded ?
-
- :
- }
-
-
- }
- checkedIcon={}
- />}
- label={""}
- sx={{
- color: theme.palette.grey2.main,
- ml: "-9px",
- mr: 0,
- userSelect: "none",
- }}
-
- />
-
-
-
-
-
-
-
-
-
- {isExpanded && (
-
- {switchState.length === 0 ?
-
- :
- }
- )
+ const theme = useTheme();
+ const params = Number(useParams().quizId);
+ const { listQuestions, updateQuestionsList, createQuestion, removeQuestion } =
+ questionStore();
+ const [isExpanded, setIsExpanded] = useState(false);
+ const switchState = listQuestions[params][totalIndex].type;
+ return (
+
+
+ {
+ updateQuestionsList(params, totalIndex, { title: e.target.value });
+ console.log(listQuestions[params][totalIndex].title);
+ }}
+ />
+ setIsExpanded((prev) => !prev)}>
+ {" "}
+ {isExpanded ? : }
+
+
+ } checkedIcon={} />
}
-
-
- )
-}
\ No newline at end of file
+ label={""}
+ sx={{
+ color: theme.palette.grey2.main,
+ ml: "-9px",
+ mr: 0,
+ userSelect: "none",
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ {isExpanded && (
+
+ {switchState.length === 0 ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+ );
+}
diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx
index b24df186..7ca276d6 100755
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/src/pages/Questions/QuestionsPage.tsx
@@ -12,12 +12,13 @@ import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";
-import QuestionsPageCard from "./QuestionPageCard";
import { questionStore } from "@root/questions";
// import { DraggableList } from "./DraggableList";
import QuizCard from "../createQuize/QuizCard";
import { DraggableList } from "./DraggableList";
+import type { ExtendedQuizes } from "./DraggableList";
+
export default function QuestionsPage() {
const { listQuizes, updateQuizesList } = quizStore();
const params = Number(useParams().quizId);
@@ -59,13 +60,12 @@ export default function QuestionsPage() {
(
- removeQuestion(params, index)}
- />
- ))}
+ items={Object.values(listQuestions[params] as ExtendedQuizes[]).map(
+ (item, index) => ({
+ ...item,
+ onDelete: () => removeQuestion(params, index),
+ })
+ )}
/>
void;
}
-interface Quizes {
+export interface Quizes {
id: number,
qid: string,
deleted: boolean,