fix: Questions drag&drop

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) => (
   <Draggable draggableId={String(index)} index={index}>
     {(provided, snapshot) => (
       <ListItem
         ref={provided.innerRef}
         {...provided.draggableProps}
-        {...provided.dragHandleProps}
         sx={{ padding: 0 }}
       >
-        {item}
+        <QuestionsPageCard
+          key={index}
+          totalIndex={index}
+          DeleteClick={onDelete}
+          draggableProps={provided.dragHandleProps}
+        />
       </ListItem>
     )}
   </Draggable>

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) => {
       <StrictModeDroppable droppableId="droppable-list">
         {(provided) => (
           <Box ref={provided.innerRef} {...provided.droppableProps}>
-            {listItems.map((item, index) => (
-              <DraggableListItem key={index} item={item} index={index} />
+            {listItems.map(({ onDelete }, index) => (
+              <DraggableListItem
+                key={index}
+                index={index}
+                onDelete={onDelete}
+              />
             ))}
             {provided.placeholder}
           </Box>

src/pages/Questions/QuestionPageCard.tsx

@@ -1,7 +1,14 @@
-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";
@@ -14,60 +21,68 @@ 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
+  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);
+    event.dataTransfer.setData("text", event.target.id);
   }
 
-
   const theme = useTheme();
   const params = Number(useParams().quizId);
-    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
+  const { listQuestions, updateQuestionsList, createQuestion, removeQuestion } =
+    questionStore();
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
-    const switchState = listQuestions[params][totalIndex].type
+  const switchState = listQuestions[params][totalIndex].type;
   return (
     <Paper
-            draggable="true"
       id={String(totalIndex)}
       sx={{
         maxWidth: "796px",
         width: "100%",
         borderRadius: "12px",
         marginBottom: "20px",
-                backgroundColor: isExpanded ? "white" : "#333647"
+        backgroundColor: isExpanded ? "white" : "#333647",
       }}
       onDragStart={onDragStart}
     >
       <Box
-                sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
+        sx={{
+          width: "100%",
+          maxWidth: "760px",
+          display: "flex",
+          alignItems: "center",
+          gap: "10px",
+          padding: "20px",
+        }}
       >
-                <CustomTextField placeholder="Заголовок вопроса" text={""}
-                                 onChange={e => {updateQuestionsList(params, totalIndex, {title: e.target.value})
-                                     console.log(listQuestions[params][totalIndex].title)
-                                 }
-                                 }/>
+        <CustomTextField
+          placeholder="Заголовок вопроса"
+          text={""}
+          onChange={(e) => {
+            updateQuestionsList(params, totalIndex, { title: e.target.value });
+            console.log(listQuestions[params][totalIndex].title);
+          }}
+        />
         <IconButton onClick={() => setIsExpanded((prev) => !prev)}>
           {" "}
-                    {isExpanded ?
-                    <ExpandMoreIcon />
-                    :<ExpandLessIcon  fill="#7E2AEA"/>
-                    }
+          {isExpanded ? <ExpandMoreIcon /> : <ExpandLessIcon fill="#7E2AEA" />}
         </IconButton>
         <Box sx={{ display: "flex" }}>
           <FormControlLabel
             control={
-                            <Checkbox
-                                icon={<HideIcon/>}
-                                checkedIcon={<CrossedEyeIcon />}
-                            />}
+              <Checkbox icon={<HideIcon />} checkedIcon={<CrossedEyeIcon />} />
+            }
             label={""}
             sx={{
               color: theme.palette.grey2.main,
@@ -75,26 +90,38 @@ export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {
               mr: 0,
               userSelect: "none",
             }}
-
           />
-                    <IconButton><CopyIcon/></IconButton>
-                    <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={DeleteClick}>
+          <IconButton>
+            <CopyIcon />
+          </IconButton>
+          <IconButton
+            sx={{ borderRadius: "6px", padding: "2px" }}
+            onClick={DeleteClick}
+          >
             <DeleteIcon />
           </IconButton>
         </Box>
         <OneIcon />
+        <Box {...draggableProps}>
           <PointsIcon />
-
+        </Box>
       </Box>
       {isExpanded && (
-                <Box sx={{display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px"}}>
-                    {switchState.length === 0 ?
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            padding: 0,
+            borderRadius: "12px",
+          }}
+        >
+          {switchState.length === 0 ? (
             <TypeQuestions totalIndex={totalIndex} />
-                        :
-                        <SwitchQuestionsPage totalIndex={totalIndex}/>}
-                </Box>)
-            }
+          ) : (
+            <SwitchQuestionsPage totalIndex={totalIndex} />
+          )}
+        </Box>
+      )}
     </Paper>
-
-    )
+  );
 }

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() {
         </Link>
       </Box>
       <DraggableList
-        items={Object.values(listQuestions[params]).map((_, index) => (
-          <QuestionsPageCard
-            key={index}
-            totalIndex={index}
-            DeleteClick={() => removeQuestion(params, index)}
-          />
-        ))}
+        items={Object.values(listQuestions[params] as ExtendedQuizes[]).map(
+          (item, index) => ({
+            ...item,
+            onDelete: () => removeQuestion(params, index),
+          })
+        )}
       />
       <Box
         sx={{

src/stores/quizes.ts

@@ -8,7 +8,7 @@ interface QuizStore {
     createBlank: () => void;
 }
 
-interface Quizes {
+export interface Quizes {
     id: number,
     qid: string,
     deleted: boolean,