From 8c125e4d21b94c740e74f9e4e335bc87f2a53df7 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Tue, 17 Oct 2023 16:24:37 +0300
Subject: [PATCH] fix: preview block

---
 src/ui_kit/QuizPreview/QuizPreview.tsx       | 222 ++++++++---------
 src/ui_kit/QuizPreview/QuizPreviewLayout.tsx | 236 +++++++++++--------
 2 files changed, 245 insertions(+), 213 deletions(-)

diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx
index f4cf528c..b6d5f57b 100644
--- a/src/ui_kit/QuizPreview/QuizPreview.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreview.tsx
@@ -1,130 +1,132 @@
-import { PointsIcon } from "@icons/questionsPage/PointsIcon";
 import { Box, IconButton } from "@mui/material";
 import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
 import { useLayoutEffect, useRef } from "react";
 import { Rnd } from "react-rnd";
 import QuizPreviewLayout from "./QuizPreviewLayout";
 import ResizeIcon from "./ResizeIcon";
-import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityIcon from "@mui/icons-material/Visibility";
 
-
-const DRAG_PARENT_MARGIN = 25;
-const NAVBAR_HEIGHT = 81;
-const DRAG_PARENT_BOTTOM_MARGIN = 65;
+const DRAG_PARENT_MARGIN = 0;
+const NAVBAR_HEIGHT = 0;
+const DRAG_PARENT_BOTTOM_MARGIN = 0;
 
 interface RndPositionAndSize {
-    x: number;
-    y: number;
-    width: string;
-    height: string;
+  x: number;
+  y: number;
+  width: string;
+  height: string;
 }
 
 export default function QuizPreview() {
-    const isPreviewShown = useQuizPreviewStore(state => state.isPreviewShown);
-    const rndParentRef = useRef<HTMLDivElement>(null);
-    const rndRef = useRef<Rnd | null>(null);
-    const rndPositionAndSizeRef = useRef<RndPositionAndSize>({ x: 0, y: 0, width: "340", height: "480" });
-    const isFirstShowRef = useRef<boolean>(true);
+  const isPreviewShown = useQuizPreviewStore((state) => state.isPreviewShown);
+  const rndParentRef = useRef<HTMLDivElement>(null);
+  const rndRef = useRef<Rnd | null>(null);
+  const rndPositionAndSizeRef = useRef<RndPositionAndSize>({
+    x: 0,
+    y: 0,
+    width: "340",
+    height: "480",
+  });
+  const isFirstShowRef = useRef<boolean>(true);
 
-    useLayoutEffect(function stickPreviewToBottomRight() {
-        const rnd = rndRef.current;
-        const rndSelfElement = rnd?.getSelfElement();
-        if (!rnd || !rndSelfElement || !rndParentRef.current || !isFirstShowRef.current) return;
+  useLayoutEffect(
+    function stickPreviewToBottomRight() {
+      const rnd = rndRef.current;
+      const rndSelfElement = rnd?.getSelfElement();
+      if (
+        !rnd ||
+        !rndSelfElement ||
+        !rndParentRef.current ||
+        !isFirstShowRef.current
+      )
+        return;
 
-        const rndParentRect = rndParentRef.current.getBoundingClientRect();
-        const rndRect = rndSelfElement.getBoundingClientRect();
+      const rndParentRect = rndParentRef.current.getBoundingClientRect();
+      const rndRect = rndSelfElement.getBoundingClientRect();
 
-        const x = rndParentRect.width - rndRect.width;
-        const y = rndParentRect.height - rndRect.height;
+      const x = rndParentRect.width - rndRect.width;
+      const y = rndParentRect.height - rndRect.height;
 
-        rnd.updatePosition({ x, y });
-        rndPositionAndSizeRef.current.x = x;
-        rndPositionAndSizeRef.current.y = y;
+      rnd.updatePosition({ x, y });
+      rndPositionAndSizeRef.current.x = x;
+      rndPositionAndSizeRef.current.y = y;
 
-        isFirstShowRef.current = false;
-    }, [isPreviewShown]);
+      isFirstShowRef.current = false;
+    },
+    [isPreviewShown]
+  );
 
-    return (
-        <Box
-            ref={rndParentRef}
-            sx={{
-                position: "fixed",
-                top: NAVBAR_HEIGHT + DRAG_PARENT_MARGIN,
-                left: DRAG_PARENT_MARGIN,
-                bottom: DRAG_PARENT_BOTTOM_MARGIN,
-                right: DRAG_PARENT_MARGIN,
-                // backgroundColor: "rgba(0, 100, 0, 0.2)",
-                pointerEvents: "none",
-                zIndex: 100,
-            }}
+  return (
+    <Box
+      ref={rndParentRef}
+      sx={{
+        position: "fixed",
+        top: NAVBAR_HEIGHT + DRAG_PARENT_MARGIN,
+        left: DRAG_PARENT_MARGIN,
+        bottom: DRAG_PARENT_BOTTOM_MARGIN,
+        right: DRAG_PARENT_MARGIN,
+        // backgroundColor: "rgba(0, 100, 0, 0.2)",
+        pointerEvents: "none",
+        zIndex: 100,
+      }}
+    >
+      {isPreviewShown && (
+        <Rnd
+          minHeight={20}
+          minWidth={20}
+          bounds="parent"
+          ref={rndRef}
+          dragHandleClassName="quiz-preview-draghandle"
+          default={{
+            x: rndPositionAndSizeRef.current.x,
+            y: rndPositionAndSizeRef.current.y,
+            width: rndPositionAndSizeRef.current.width,
+            height: rndPositionAndSizeRef.current.height,
+          }}
+          onResizeStop={(e, direction, ref, delta, position) => {
+            rndPositionAndSizeRef.current.x = position.x;
+            rndPositionAndSizeRef.current.y = position.y;
+            rndPositionAndSizeRef.current.width = ref.style.width;
+            rndPositionAndSizeRef.current.height = ref.style.height;
+          }}
+          onDragStop={(e, d) => {
+            rndPositionAndSizeRef.current.x = d.x;
+            rndPositionAndSizeRef.current.y = d.y;
+          }}
+          onDragStart={(e, d) => {
+            e.preventDefault();
+          }}
+          enableResizing={{
+            topLeft: isPreviewShown,
+          }}
+          resizeHandleComponent={{
+            topLeft: <ResizeIcon />,
+          }}
+          resizeHandleStyles={{
+            topLeft: {
+              top: "-1px",
+              left: "-1px",
+            },
+          }}
+          style={{
+            overflow: "hidden",
+            pointerEvents: "auto",
+          }}
         >
-            {isPreviewShown &&
-                <Rnd
-                    minHeight={300}
-                    minWidth={340}
-                    bounds="parent"
-                    ref={rndRef}
-                    dragHandleClassName="quiz-preview-draghandle"
-                    default={{
-                        x: rndPositionAndSizeRef.current.x,
-                        y: rndPositionAndSizeRef.current.y,
-                        width: rndPositionAndSizeRef.current.width,
-                        height: rndPositionAndSizeRef.current.height
-                    }}
-                    onResizeStop={(e, direction, ref, delta, position) => {
-                        rndPositionAndSizeRef.current.x = position.x;
-                        rndPositionAndSizeRef.current.y = position.y;
-                        rndPositionAndSizeRef.current.width = ref.style.width;
-                        rndPositionAndSizeRef.current.height = ref.style.height;
-                    }}
-                    onDragStop={(e, d) => {
-                        rndPositionAndSizeRef.current.x = d.x;
-                        rndPositionAndSizeRef.current.y = d.y;
-                    }}
-                    onDragStart={(e, d) => {
-                        e.preventDefault();
-                    }}
-                    enableResizing={{
-                        topLeft: isPreviewShown,
-                    }}
-                    resizeHandleComponent={{
-                        topLeft: <ResizeIcon />
-                    }}
-                    resizeHandleStyles={{
-                        topLeft: {
-                            top: "-1px",
-                            left: "-1px",
-                        }
-                    }}
-                    style={{
-                        pointerEvents: "auto",
-                    }}
-                >
-                    <QuizPreviewLayout />
-                    <IconButton
-                        className="quiz-preview-draghandle"
-                        sx={{
-                            position: "absolute",
-                            bottom: -54,
-                            right: 46,
-                            cursor: "move",
-                        }}
-                    >
-                        <PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
-                    </IconButton>
-                </Rnd>
-            }
-            <IconButton
-                onClick={toggleQuizPreview}
-                sx={{
-                    position: "absolute",
-                    right: 0,
-                    bottom: -54,
-                    pointerEvents: "auto",
-                }}
-            >
-                <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
-            </IconButton>
-        </Box>
-    );
+          <QuizPreviewLayout />
+        </Rnd>
+      )}
+      <IconButton
+        onClick={toggleQuizPreview}
+        sx={{
+          position: "absolute",
+          right: 0,
+          bottom: -54,
+          pointerEvents: "auto",
+        }}
+      >
+        <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
+      </IconButton>
+    </Box>
+  );
 }
diff --git a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
index 520ada76..a83f1bc1 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
@@ -1,6 +1,10 @@
 import { Box, Button, LinearProgress, Paper, Typography } from "@mui/material";
 import { questionStore } from "@root/questions";
-import { decrementCurrentQuestionIndex, incrementCurrentQuestionIndex, useQuizPreviewStore } from "@root/quizPreview";
+import {
+  decrementCurrentQuestionIndex,
+  incrementCurrentQuestionIndex,
+  useQuizPreviewStore,
+} from "@root/quizPreview";
 import { DefiniteQuestionType } from "model/questionTypes/shared";
 import { FC, useEffect } from "react";
 import { useParams } from "react-router-dom";
@@ -17,117 +21,143 @@ import Text from "./QuizPreviewQuestionTypes/Text";
 import Variant from "./QuizPreviewQuestionTypes/Variant";
 import Varimg from "./QuizPreviewQuestionTypes/Varimg";
 
-
 const QuestionPreviewComponentByType: Record<DefiniteQuestionType, FC<any>> = {
-    variant: Variant,
-    images: Images,
-    varimg: Varimg,
-    emoji: Emoji,
-    text: Text,
-    select: Select,
-    date: Date,
-    number: Number,
-    file: File,
-    page: Page,
-    rating: Rating,
+  variant: Variant,
+  images: Images,
+  varimg: Varimg,
+  emoji: Emoji,
+  text: Text,
+  select: Select,
+  date: Date,
+  number: Number,
+  file: File,
+  page: Page,
+  rating: Rating,
 };
 
 export default function QuizPreviewLayout() {
-    const quizId = useParams().quizId ?? 0;
-    const listQuestions = questionStore(state => state.listQuestions);
-    const currentQuizStep = useQuizPreviewStore(state => state.currentQuestionIndex);
+  const quizId = useParams().quizId ?? 0;
+  const listQuestions = questionStore((state) => state.listQuestions);
+  const currentQuizStep = useQuizPreviewStore(
+    (state) => state.currentQuestionIndex
+  );
 
-    const quizQuestions = listQuestions[quizId] ?? [];
-    const nonDeletedQuizQuestions = quizQuestions.filter(question => !question.deleted);
-    const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
-    const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100);
+  const quizQuestions = listQuestions[quizId] ?? [];
+  const nonDeletedQuizQuestions = quizQuestions.filter(
+    (question) => !question.deleted
+  );
+  const maxCurrentQuizStep =
+    nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
+  const currentProgress = Math.floor(
+    (currentQuizStep / maxCurrentQuizStep) * 100
+  );
 
-    const currentQuestion = nonDeletedQuizQuestions[currentQuizStep];
-    const QuestionComponent = currentQuestion
-        ? QuestionPreviewComponentByType[currentQuestion.type as DefiniteQuestionType]
-        : null;
+  const currentQuestion = nonDeletedQuizQuestions[currentQuizStep];
+  const QuestionComponent = currentQuestion
+    ? QuestionPreviewComponentByType[
+        currentQuestion.type as DefiniteQuestionType
+      ]
+    : null;
 
-    const questionElement = QuestionComponent
-        ? <QuestionComponent key={currentQuestion.id} question={currentQuestion} />
-        : null;
+  const questionElement = QuestionComponent ? (
+    <QuestionComponent key={currentQuestion.id} question={currentQuestion} />
+  ) : null;
 
-    useEffect(function resetCurrentQuizStep() {
-        if (currentQuizStep > maxCurrentQuizStep) {
-            decrementCurrentQuestionIndex();
-        }
-    }, [currentQuizStep, maxCurrentQuizStep]);
+  useEffect(
+    function resetCurrentQuizStep() {
+      if (currentQuizStep > maxCurrentQuizStep) {
+        decrementCurrentQuestionIndex();
+      }
+    },
+    [currentQuizStep, maxCurrentQuizStep]
+  );
 
-    return (
-        <Paper sx={{
-            height: "100%",
+  return (
+    <Paper
+      className="quiz-preview-draghandle"
+      sx={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        flexGrow: 1,
+        borderRadius: "12px",
+        pointerEvents: "auto",
+      }}
+    >
+      <Box
+        sx={{
+          p: "16px",
+          whiteSpace: "break-spaces",
+          overflowY: "auto",
+          flexGrow: 1,
+          "&::-webkit-scrollbar": { width: 0 },
+        }}
+      >
+        {questionElement}
+      </Box>
+      <Box
+        sx={{
+          mt: "auto",
+          p: "16px",
+          display: "flex",
+          borderTop: "1px solid #E3E3E3",
+          alignItems: "center",
+        }}
+      >
+        <Box
+          sx={{
+            flexGrow: 1,
             display: "flex",
             flexDirection: "column",
-            flexGrow: 1,
-            borderRadius: "12px",
-            pointerEvents: "auto",
-        }}>
-            <Box sx={{
-                p: "16px",
-                whiteSpace: "break-spaces",
-                overflowY: "auto",
-                flexGrow: 1,
-            }}>
-                {questionElement}
-            </Box>
-            <Box sx={{
-                mt: "auto",
-                p: "16px",
-                display: "flex",
-                borderTop: "1px solid #E3E3E3",
-                alignItems: "center",
-            }}>
-                <Box sx={{
-                    flexGrow: 1,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 1,
-                }}>
-                    <Typography>
-                        {nonDeletedQuizQuestions.length > 0
-                            ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}`
-                            : "Нет вопросов"
-                        }
-                    </Typography>
-                    {nonDeletedQuizQuestions.length > 0 &&
-                        <LinearProgress
-                            variant="determinate"
-                            value={currentProgress}
-                            sx={{
-                                "&.MuiLinearProgress-colorPrimary": {
-                                    backgroundColor: "fadePurple.main",
-                                },
-                                "& .MuiLinearProgress-barColorPrimary": {
-                                    backgroundColor: "brightPurple.main",
-                                },
-                            }}
-                        />
-                    }
-                </Box>
-                <Box sx={{
-                    ml: 2,
-                    display: "flex",
-                    gap: 1,
-                }}>
-                    <Button
-                        variant="outlined"
-                        onClick={decrementCurrentQuestionIndex}
-                        disabled={currentQuizStep === 0}
-                        sx={{ px: 1, minWidth: 0 }}
-                    >
-                        <ArrowLeft />
-                    </Button>
-                    <Button
-                        variant="contained"
-                        onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
-                        disabled={currentQuizStep >= maxCurrentQuizStep}
-                    >Далее</Button>
-                </Box>
-            </Box>
-        </Paper>
-    );
+            gap: 1,
+          }}
+        >
+          <Typography>
+            {nonDeletedQuizQuestions.length > 0
+              ? `Вопрос ${currentQuizStep + 1} из ${
+                  nonDeletedQuizQuestions.length
+                }`
+              : "Нет вопросов"}
+          </Typography>
+          {nonDeletedQuizQuestions.length > 0 && (
+            <LinearProgress
+              variant="determinate"
+              value={currentProgress}
+              sx={{
+                "&.MuiLinearProgress-colorPrimary": {
+                  backgroundColor: "fadePurple.main",
+                },
+                "& .MuiLinearProgress-barColorPrimary": {
+                  backgroundColor: "brightPurple.main",
+                },
+              }}
+            />
+          )}
+        </Box>
+        <Box
+          sx={{
+            ml: 2,
+            display: "flex",
+            gap: 1,
+          }}
+        >
+          <Button
+            variant="outlined"
+            onClick={decrementCurrentQuestionIndex}
+            disabled={currentQuizStep === 0}
+            sx={{ px: 1, minWidth: 0 }}
+          >
+            <ArrowLeft />
+          </Button>
+          <Button
+            variant="contained"
+            onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
+            disabled={currentQuizStep >= maxCurrentQuizStep}
+          >
+            Далее
+          </Button>
+        </Box>
+      </Box>
+    </Paper>
+  );
 }