не стабильно, вернула запрос 100 вопросов

lib/api/quizRelase.ts

@@ -76,7 +76,52 @@ export const publicationMakeRequest = ({ url, body }: PublicationMakeRequestPara
 let globalStatus: string | null = null;
 let isFirstRequest = true;
 
-export async function getData({ quizId, page }: { quizId: string; page?: number }): Promise<{
+export async function getData({ quizId }: { quizId: string }): Promise<{
+  data: GetQuizDataResponse | null;
+  isRecentlyCompleted: boolean;
+  error?: AxiosError;
+}> {
+  try {
+    const { data, headers } = await axios<GetQuizDataResponse>(
+      domain + `/answer/v1.0.0/settings${window.location.search}`,
+      {
+        method: "POST",
+        headers: {
+          "X-Sessionkey": SESSIONS,
+          "Content-Type": "application/json",
+          DeviceType: DeviceType,
+          Device: Device,
+          OS: OSDevice,
+          Browser: userAgent,
+        },
+        data: {
+          quiz_id: quizId,
+          limit: 100,
+          page: 0,
+          need_config: true,
+        },
+      }
+    );
+    const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
+
+    //Тут ещё проверка на антифрод без парса конфига. Нам не интересно время если не нужно запрещать проходить чаще чем в сутки
+    if (typeof sessions[quizId] === "number" && data.settings.cfg.includes('antifraud":true')) {
+      // unix время. Если меньше суток прошло - выводить ошибку, иначе пустить дальше
+      if (Date.now() - sessions[quizId] < 86400000) {
+        return { data, isRecentlyCompleted: true };
+      }
+    }
+
+    SESSIONS = headers["x-sessionkey"] ? headers["x-sessionkey"] : SESSIONS;
+
+    return { data, isRecentlyCompleted: false };
+  } catch (nativeError) {
+    const error = nativeError as AxiosError;
+
+    return { data: null, isRecentlyCompleted: false, error: error };
+  }
+}
+export async function getDataSingle({ quizId, page }: { quizId: string; page?: number }): Promise<{
   data: GetQuizDataResponse | null;
   isRecentlyCompleted: boolean;
   error?: AxiosError;
@@ -179,6 +224,7 @@ export async function getData({ quizId, page }: { quizId: string; page?: number
     };
   }
 }
+
 export async function getQuizData({ quizId, status = "" }: { quizId: string; status?: string }) {
   if (!quizId) throw new Error("No quiz id");
 

lib/components/ViewPublicationPage/questions/Images/ImageCard.tsx

@@ -0,0 +1,122 @@
+import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
+import { useMemo, useState } from "react";
+import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
+import { useTranslation } from "react-i18next";
+import { enqueueSnackbar } from "notistack";
+import { ACCEPT_SEND_FILE_TYPES_MAP } from "@/components/ViewPublicationPage/tools/fileUpload";
+import UploadIcon from "@icons/UploadIcon";
+import { uploadFile } from "@/utils/fileUpload";
+import { useQuizStore } from "@/stores/useQuizStore";
+
+interface ImageCardProps {
+  questionId: string;
+  imageUrl: string;
+  isOwn?: boolean;
+  onImageUpload?: (fileUrl: string) => void;
+}
+
+const useFileUpload = (questionId: string, onImageUpload?: (fileUrl: string) => void) => {
+  const { t } = useTranslation();
+  const [isSending, setIsSending] = useState(false);
+  const [currentImageUrl, setCurrentImageUrl] = useState<string | null>(null);
+  const { quizId, preview } = useQuizStore();
+
+  const handleFileUpload = async (file: File | undefined) => {
+    if (isSending || !file) return;
+
+    const result = await uploadFile({
+      file,
+      questionId,
+      quizId,
+      fileType: "picture",
+      preview,
+      onSuccess: (fileUrl) => {
+        setCurrentImageUrl(URL.createObjectURL(file));
+        onImageUpload?.(fileUrl);
+      },
+      onError: (error) => {
+        console.error(error);
+        enqueueSnackbar(t(error.message));
+      },
+      onProgress: () => {
+        setIsSending(true);
+      },
+    });
+
+    setIsSending(false);
+  };
+
+  return {
+    isSending,
+    currentImageUrl,
+    handleFileUpload,
+  };
+};
+
+export const ImageCard = ({ questionId, imageUrl, isOwn, onImageUpload }: ImageCardProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const isMobile = useRootContainerSize() < 450;
+  const isTablet = useRootContainerSize() < 850;
+  const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState(false);
+  const { currentImageUrl, handleFileUpload } = useFileUpload(questionId, onImageUpload);
+
+  const onDrop = (event: React.DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    setIsDropzoneHighlighted(false);
+
+    const file = event.dataTransfer.files[0];
+    handleFileUpload(file);
+  };
+
+  return (
+    <Box sx={{ width: "100%", height: "300px", position: "relative" }}>
+      <img
+        src={currentImageUrl || imageUrl}
+        style={{
+          display: "block",
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          borderRadius: "12px 12px 0 0",
+        }}
+        alt=""
+      />
+      {isOwn && (
+        <Box
+          component="label"
+          sx={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            opacity: isDropzoneHighlighted ? 1 : 0,
+            transition: "opacity 0.2s",
+            "&:hover": {
+              opacity: 1,
+            },
+            borderRadius: "12px 12px 0 0",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          onDragEnter={() => setIsDropzoneHighlighted(true)}
+          onDragLeave={() => setIsDropzoneHighlighted(false)}
+          onDragOver={(event) => event.preventDefault()}
+          onDrop={onDrop}
+        >
+          <input
+            onChange={({ target }) => handleFileUpload(target.files?.[0])}
+            hidden
+            accept={ACCEPT_SEND_FILE_TYPES_MAP.picture.join(",")}
+            type="file"
+          />
+          <UploadIcon color="#FFFFFF" />
+        </Box>
+      )}
+    </Box>
+  );
+};

lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx

@@ -24,6 +24,7 @@ import { enqueueSnackbar } from "notistack";
 import { ACCEPT_SEND_FILE_TYPES_MAP, MAX_FILE_SIZE } from "@/components/ViewPublicationPage/tools/fileUpload";
 import UploadIcon from "@icons/UploadIcon";
 import { uploadFile } from "@/utils/fileUpload";
+import { ImageCard } from "./ImageCard";
 
 type ImagesProps = {
   questionId: string;
@@ -37,12 +38,11 @@ type ImagesProps = {
 };
 
 interface OwnInputProps {
-  questionId: string;
   variant: QuestionVariant;
   largeCheck: boolean;
   ownPlaceholder: string;
 }
-const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputProps) => {
+const OwnInput = ({ variant, largeCheck, ownPlaceholder }: OwnInputProps) => {
   const theme = useTheme();
   const ownVariants = useQuizViewStore((state) => state.ownVariants);
   const { updateOwnVariant } = useQuizViewStore((state) => state);
@@ -116,16 +116,16 @@ export const ImageVariant = ({
   const isMobile = useRootContainerSize() < 450;
   const isTablet = useRootContainerSize() < 850;
   const [isSending, setIsSending] = useState(false);
-  const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState(false);
+
   const { quizId, preview } = useQuizStore();
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
 
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const containerCanvasRef = useRef<HTMLDivElement | null>(null);
 
   const onVariantClick = async (event: MouseEvent<HTMLDivElement>) => {
     event.preventDefault();
 
+    if (own) return;
+
     const variantId = variant.id;
     if (isMulti) {
       const currentAnswer = typeof answer !== "string" ? answer || [] : [];
@@ -170,21 +170,13 @@ export const ImageVariant = ({
     setIsSending(false);
   };
 
-  const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    setIsDropzoneHighlighted(false);
-
-    const file = event.dataTransfer.files[0];
-    handleFileUpload(file);
-  };
-
   const choiceImgUrl = useMemo(() => {
     if (variant.editedUrlImagesList !== undefined && variant.editedUrlImagesList !== null) {
       return variant.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
     } else {
       return variant.extendedText;
     }
-  }, []);
+  }, [variant.editedUrlImagesList, isMobile, isTablet, variant.extendedText]);
 
   useEffect(() => {
     if (canvasRef.current !== null) {
@@ -207,11 +199,11 @@ export const ImageVariant = ({
     <Box
       sx={{
         position: "relative",
-        cursor: "pointer",
+        cursor: own ? "default" : "pointer",
         borderRadius: "12px",
         border: `1px solid`,
-        borderColor: !!answer?.includes(variant.id) ? theme.palette.primary.main : "#9A9AAF",
+        borderColor: !own && !!answer?.includes(variant.id) ? theme.palette.primary.main : "#9A9AAF",
-        "&:hover": { borderColor: theme.palette.primary.main },
+        "&:hover": { borderColor: !own ? theme.palette.primary.main : "#9A9AAF" },
         background:
           settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
             ? "rgba(255,255,255, 0.3)"
@@ -222,50 +214,13 @@ export const ImageVariant = ({
       onClick={onVariantClick}
     >
       <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-        <Box sx={{ width: "100%", height: "300px", position: "relative" }}>
+        {variant.extendedText && (
-          {variant.extendedText && (
+          <ImageCard
-            <>
+            questionId={questionId}
-              <img
+            imageUrl={choiceImgUrl}
-                src={imageUrl || choiceImgUrl}
+            isOwn={own}
-                style={{
+          />
-                  display: "block",
+        )}
-                  width: "100%",
-                  height: "100%",
-                  objectFit: "cover",
-                  borderRadius: "12px 12px 0 0",
-                }}
-                alt=""
-              />
-              {own && (
-                <ButtonBase
-                  component="label"
-                  sx={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: "100%",
-                    backgroundColor: "rgba(0, 0, 0, 0.5)",
-                    opacity: isDropzoneHighlighted ? 1 : 0,
-                    transition: "opacity 0.2s",
-                    "&:hover": {
-                      opacity: 1,
-                    },
-                    borderRadius: "12px 12px 0 0",
-                  }}
-                >
-                  <input
-                    onChange={({ target }) => handleFileUpload(target.files?.[0])}
-                    hidden
-                    accept={ACCEPT_SEND_FILE_TYPES_MAP.picture.join(",")}
-                    type="file"
-                  />
-                  <UploadIcon color="#FFFFFF" />
-                </ButtonBase>
-              )}
-            </>
-          )}
-        </Box>
       </Box>
       {own && (
         <Typography
@@ -335,7 +290,6 @@ export const ImageVariant = ({
         label={
           own ? (
             <OwnInput
-              questionId={questionId}
               variant={variant}
               largeCheck={questionLargeCheck}
               ownPlaceholder={ownPlaceholder || "|"}