From 64ec511f21b741148087fe7f671f15598f903b78 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Tue, 8 Aug 2023 14:01:37 +0300
Subject: [PATCH] fix: Questions drag&drop

---
 .../DraggableList/DraggableListItem.tsx       |  17 +-
 src/pages/Questions/DraggableList/index.tsx   |  16 +-
 src/pages/Questions/QuestionPageCard.tsx      | 195 ++++++++++--------
 src/pages/Questions/QuestionsPage.tsx         |  16 +-
 src/stores/quizes.ts                          |   2 +-
 5 files changed, 144 insertions(+), 102 deletions(-)

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) => (
   <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>
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) => {
       <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>
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<boolean>(false);
-    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"
-            }}
-            onDragStart={onDragStart}
-        >
-            <Box
-                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)
-                                 }
-                                 }/>
-                <IconButton onClick={() => setIsExpanded((prev) => !prev)}>
-                    {" "}
-                    {isExpanded ?
-                    <ExpandMoreIcon />
-                    :<ExpandLessIcon  fill="#7E2AEA"/>
-                    }
-                </IconButton>
-                <Box sx={{display: "flex"}}>
-                    <FormControlLabel
-                        control={
-                            <Checkbox
-                                icon={<HideIcon/>}
-                                checkedIcon={<CrossedEyeIcon />}
-                            />}
-                        label={""}
-                        sx={{
-                            color: theme.palette.grey2.main,
-                            ml: "-9px",
-                            mr: 0,
-                            userSelect: "none",
-                        }}
-
-                    />
-                    <IconButton><CopyIcon/></IconButton>
-                    <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={DeleteClick}>
-                        <DeleteIcon />
-                    </IconButton>
-                </Box>
-                <OneIcon />
-                <PointsIcon />
-
-            </Box>
-            {isExpanded && (
-                <Box sx={{display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px"}}>
-                    {switchState.length === 0 ?
-                        <TypeQuestions totalIndex={totalIndex}/>
-                        :
-                        <SwitchQuestionsPage totalIndex={totalIndex}/>}
-                </Box>)
+  const theme = useTheme();
+  const params = Number(useParams().quizId);
+  const { listQuestions, updateQuestionsList, createQuestion, removeQuestion } =
+    questionStore();
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const switchState = listQuestions[params][totalIndex].type;
+  return (
+    <Paper
+      id={String(totalIndex)}
+      sx={{
+        maxWidth: "796px",
+        width: "100%",
+        borderRadius: "12px",
+        marginBottom: "20px",
+        backgroundColor: isExpanded ? "white" : "#333647",
+      }}
+      onDragStart={onDragStart}
+    >
+      <Box
+        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);
+          }}
+        />
+        <IconButton onClick={() => setIsExpanded((prev) => !prev)}>
+          {" "}
+          {isExpanded ? <ExpandMoreIcon /> : <ExpandLessIcon fill="#7E2AEA" />}
+        </IconButton>
+        <Box sx={{ display: "flex" }}>
+          <FormControlLabel
+            control={
+              <Checkbox icon={<HideIcon />} checkedIcon={<CrossedEyeIcon />} />
             }
-        </Paper>
-
-    )
-}
\ No newline at end of file
+            label={""}
+            sx={{
+              color: theme.palette.grey2.main,
+              ml: "-9px",
+              mr: 0,
+              userSelect: "none",
+            }}
+          />
+          <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 ? (
+            <TypeQuestions totalIndex={totalIndex} />
+          ) : (
+            <SwitchQuestionsPage totalIndex={totalIndex} />
+          )}
+        </Box>
+      )}
+    </Paper>
+  );
+}
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() {
         </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={{
diff --git a/src/stores/quizes.ts b/src/stores/quizes.ts
index 029c8a1a..15829363 100644
--- a/src/stores/quizes.ts
+++ b/src/stores/quizes.ts
@@ -8,7 +8,7 @@ interface QuizStore {
     createBlank: () => void;
 }
 
-interface Quizes {
+export interface Quizes {
     id: number,
     qid: string,
     deleted: boolean,