fix: DraggableListItem with memo

src/pages/Questions/ButtonsOptions.tsx

@@ -51,7 +51,6 @@ export default function ButtonsOptions({
 
   const openedModal = () => {
     resetSomeField({ openedModalSettings: "open" });
-    console.log(openedModalSettings);
   };
 
   const theme = useTheme();

src/pages/Questions/DraggableList/DraggableListItem.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { useParams } from "react-router-dom";
 import { Draggable } from "react-beautiful-dnd";
 import { Box, ListItem, Typography, useTheme } from "@mui/material";
@@ -6,18 +7,23 @@ import QuestionsPageCard from "./QuestionPageCard";
 
 import { questionStore, updateQuestionsList } from "@root/questions";
 
+import {Question} from "@root/questions"
+
 type DraggableListItemProps = {
   index: number;
   isDragging: boolean;
+  questionData: Question;
 };
 
-export const DraggableListItem = ({
+export default memo(({
   index,
   isDragging,
+  questionData
 }: DraggableListItemProps) => {
   const quizId = Number(useParams().quizId);
-  const { listQuestions } = questionStore();
   const theme = useTheme();
+  console.log("Мой индекс "+index)
+  console.log(questionData)
 
   return (
     <Draggable draggableId={String(index)} index={index}>
@@ -27,7 +33,7 @@ export const DraggableListItem = ({
           {...provided.draggableProps}
           sx={{ userSelect: "none", padding: 0 }}
         >
-          {listQuestions[quizId][index].deleted ? (
+          {questionData.deleted ? (
             <Box
               {...provided.dragHandleProps}
               sx={{
@@ -50,7 +56,7 @@ export const DraggableListItem = ({
               <Typography
                 onClick={() => {
                   updateQuestionsList(quizId, index, {
-                    ...listQuestions[quizId][index],
+                    ...questionData,
                     deleted: false,
                   });
                 }}
@@ -79,4 +85,4 @@ export const DraggableListItem = ({
       )}
     </Draggable>
   );
-};
+});

src/pages/Questions/DraggableList/index.tsx

@@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
 import { Box } from "@mui/material";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 
-import { DraggableListItem } from "./DraggableListItem";
+import DraggableListItem from "./DraggableListItem";
 
 import { questionStore, updateQuestionsListDragAndDrop } from "@root/questions";
 
@@ -36,6 +36,7 @@ export const DraggableList = () => {
                 key={index}
                 index={index}
                 isDragging={snapshot.isDraggingOver}
+                questionData={_}
               />
             ))}
             {provided.placeholder}

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -53,7 +53,6 @@ export default function OptionsPicture({ totalIndex }: Props) {
     }
   };
 
-  console.log();
 
   return (
     <>

src/pages/Questions/QuestionsPage.tsx

@@ -77,7 +77,6 @@ export default function QuestionsPage() {
         <IconButton
           onClick={() => {
             createQuestion(quizId);
-            console.log(listQuestions);
           }}
         >
           <AddPlus />

src/pages/Questions/TypeQuestions.tsx

@@ -101,7 +101,6 @@ export default function TypeQuestions({ totalIndex }: Props) {
         <QuestionsMiniButton
           key={title}
           onClick={() => {
-            console.log(value);
             updateQuestionsList(quizId, totalIndex, { type: value });
           }}
           icon={icon}

src/pages/startPage/StartPageSettings.tsx

@@ -68,7 +68,6 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
   const theme = useTheme();
   const designType = listQuizes[params].startpage;
   const StartPageClone = listQuizes[params];
-  console.log(StartPageClone);
   const [backgroundType, setBackgroundType] = useState(
     listQuizes[params].config.startpage.background.type
   );
@@ -616,7 +615,6 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
             label="Кликабельный"
             checked={listQuizes[params].config.info.clickable}
             handleChange={(e) => {
-              console.log(e.target.checked);
               let SPageClone = listQuizes[params].config;
               SPageClone.info.clickable = e.target.checked;
               updateQuizesList(params, { config: SPageClone });

src/pages/startPage/dropZone.tsx

@@ -28,22 +28,18 @@ export default ({ text, sx, heightImg, widthImg }: Props) => {
   const [ready, setReady] = useState(false);
 
   const dragenterHC = () => {
-    // console.log("onDragEnter")
     setReady(true);
   };
 
   const dragexitHC = () => {
-    // console.log("onDragExit")
     setReady(false);
   };
 
   const dropHC = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
-    // console.log("onDrop")
     setReady(false);
 
     const file = event.dataTransfer.files[0];
-    console.log(event.dataTransfer.files[0]);
     if (file.size < 5242880) {
       setData(URL.createObjectURL(file));
     } else {
@@ -53,7 +49,6 @@ export default ({ text, sx, heightImg, widthImg }: Props) => {
 
   const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
-    // console.log("onDragOver")
   };
 
   return (

src/pages/startPage/dropfavicon.tsx

@@ -146,14 +146,11 @@ export default ({ text, sx, heightImg, widthImg }: Props) => {
   const [favList, setFavList] = useState<string[]>([]);
 
   useEffect(() => {
-    console.log(favList);
     if (favList.length === 18) {
-      console.log("сейчас я сработаю");
 
       const zip = new JSZip(); //создание зип архива
 
       favList.forEach((uri, i) => {
-        console.log(i);
         const idx = uri.indexOf("base64,") + "base64,".length; //обработка строки картинки
         const content = uri.substring(idx); //обработка строки картинки
         zip.file(`fav${i}.jpg`, content, { base64: true }); //сохранение картинки в архив с именем "fav.jpg"
@@ -201,46 +198,26 @@ export default ({ text, sx, heightImg, widthImg }: Props) => {
   const [ready, setReady] = useState(false);
 
   const dragenterHC = () => {
-    // console.log("onDragEnter")
     setReady(true);
   };
 
   const dragexitHC = () => {
-    // console.log("onDragExit")
     setReady(false);
   };
 
   const dropHC = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
-    // console.log("onDrop")
     setReady(false);
     const file = event.dataTransfer.files[0];
-    console.log(event.dataTransfer.files[0]);
     if (file.size < 5242880) {
       setData(URL.createObjectURL(file));
     } else {
       enqueueSnackbar("Размер картинки слишком велик");
     }
-    // try {
-    //     Resizer.imageFileResizer(
-    //         file,
-    //         50,
-    //         50,
-    //         "JPEG",
-    //         100,
-    //         0,
-    //         callback,
-    //     );
-    //
-    // } catch (err) {
-    //     console.log(err);
-    // }
-    //
   };
 
   const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
-    // console.log("onDragOver")
   };
 
   return (

src/pages/startPage/stepOne.tsx

@@ -13,10 +13,8 @@ export default function StepOne({ handleNext }: HandleNext) {
   const theme = useTheme();
 
   const params = Number(useParams().quizId);
-  console.log(params)
 
   const {listQuizes, updateQuizesList,} = quizStore()
-    console.log(listQuizes)
   return (
     <>
       <Box

src/ui_kit/Modal/CropModal.tsx

@@ -155,9 +155,6 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture }) => {
 
       const aspect = imageWidth / imageHeight;
 
-      console.log(aspect);
-
-      console.log(width);
 
       if (aspect <= 1.333) {
         setWidth(240);

src/ui_kit/reactImageFileResizer.ts

@@ -51,7 +51,6 @@ class Resizer {
         Yoffset = Math.round((size - height) / 2)
       }
 
-      console.log(height, width)
 
       ctx.drawImage(image, Xoffset, Yoffset, width, height);