fix bugs

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -35,9 +35,11 @@ export default function OptionsAndPicture({
   const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
     null,
   );
-  const variant = useMemo(() => question.content.variants.find(
+  const variant = question.content.variants.find(
     (variant) => variant.id === selectedVariantId,
-  ),[selectedVariantId])
+  )
+  console.log("variant")
+  console.log(variant)
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const quizQid = useCurrentQuiz()?.qid;
@@ -48,6 +50,7 @@ export default function OptionsAndPicture({
 
     setPictureUploading(true);
 
+    closeImageUploadModal();
     const url = await uploadQuestionImage(
       question.id,
       quizQid,
@@ -64,7 +67,7 @@ export default function OptionsAndPicture({
         variant.originalImageUrl = url;
       },
     );
-    closeImageUploadModal();
+    setOpenCropModal(true)
 
     setPictureUploading(false);
   };

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -35,9 +35,9 @@ export default function OptionsPicture({
   const [openCropModal, setOpenCropModal] = useState(false);
 
   const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
-  const variant = useMemo(() => question.content.variants.find(
+  const variant = question.content.variants.find(
     (variant) => variant.id === selectedVariantId,
-  ),[selectedVariantId])
+  )
 
   const [switchState, setSwitchState] = useState("setting");
   const isMobile = useMediaQuery(theme.breakpoints.down(790));

src/pages/Questions/UploadImage/index.tsx

@@ -26,6 +26,7 @@ export default function UploadImage({
 
   if (!quiz) return null;
   console.log(question)
+  console.log(quiz)
 
   return (
     <Box sx={{ padding: "20px" }}>
@@ -72,6 +73,7 @@ export default function UploadImage({
             updateQuestion(question.id, (question) => {
               question.content.back = null;
               question.content.originalBack = null;
+                if ("editedUrlImagesList" in question.content) question.content.editedUrlImagesList = null;
             });
           }}
           onImageSavedClick={() => {
@@ -84,7 +86,7 @@ export default function UploadImage({
         editedUrlImagesList={question.content?.editedUrlImagesList}
         questionId={question.id.toString()}
         questionType={question.type}
-        quizId={quiz.id}
+        quizId={quiz.qid}
         open={openCropModal}
         selfClose={() => setOpenCropModal(false)}
         setPictureUploading={setPictureUploading}

src/pages/startPage/dropZone.tsx

@@ -97,7 +97,7 @@ export const DropZone = ({
         handleImageChange={handleImageUpload}
       />
       <ButtonBase
-        onClick={ () => onImageSavedClick ? onImageSavedClick() : openImageUploadModal()
+        onClick={ () => onImageSavedClick &&imageUrl ? onImageSavedClick() : openImageUploadModal()
         }
         sx={{
           width: "100%",

src/ui_kit/MediaSelectionAndDisplay.tsx

@@ -45,6 +45,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
   async function handleImageUpload(file: File) {
     setPictureUploading(true);
 
+    closeImageUploadModal();
     const url = await uploadQuestionImage(
       resultData.id,
       quizQid,
@@ -54,7 +55,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
         question.content.originalBack = url;
       },
     );
-    closeImageUploadModal();
+    setOpenCropModal(true)
 
     setPictureUploading(false);
   }

src/ui_kit/Modal/CropModal/index.tsx

@@ -50,9 +50,7 @@ export const CropModalInit: FC<CropOnOpenType> = ({
                 (async () => {
                     let newImageBlob = imageBlob;
                     if (originalImageUrl !== undefined) {
-                        const response = await fetch(originalImageUrl, {
+                        const response = await fetch(originalImageUrl);
-                            mode: 'no-cors',
-                        });
                         newImageBlob = await response.blob();
                         console.log(newImageBlob)
                     };
@@ -61,7 +59,7 @@ export const CropModalInit: FC<CropOnOpenType> = ({
                         const isGif = await isImageBlobAGifFile(newImageBlob);
                         if (isGif) {
                             saveImagesAndRules(newImageBlob);
-                            return;
+                            return setPictureUploading(false);
                         }
                         //Для работы нам нужны урлы. Оригинальной и редактированных картинок
                         let newOriginalImageUrl = originalImageUrl || URL.createObjectURL(newImageBlob)
@@ -157,48 +155,61 @@ export const CropModalInit: FC<CropOnOpenType> = ({
     const saveImagesAndRules = async () => {
         setPictureUploading(true)
         if (editedImages === null) return;
+        
+        closeModal();
+
+        //массив запросов
+        const requests: Promise<void>[] = [];
 
         //Преобразовываем и отправляем на бек картинки.
 
         if (variantId) {//Работаем с вариантом
             for (let k in editedImages) {
-                let key = k;
+                requests.push(new Promise(async (resolve) => {
 
-                const img = document.createElement("img");
+                    let key = k;
-                img.crossOrigin = 'anonymous';
-                img.src = editedImages[key].url;
-                const blob = await getModifiedImageBlob(img, editedImages[key].newRules.crop, editedImages[key].newRules.darken);
 
-                uploadQuestionImage(questionId, quizId, blob, (question, url) => {
+                    const img = document.createElement("img");
-                    if (!("variants" in question.content)) return;
+                    img.crossOrigin = 'anonymous';
+                    img.src = editedImages[key].url;
+                    const blob = await getModifiedImageBlob(img, editedImages[key].newRules.crop, editedImages[key].newRules.darken);
 
-                    const variant = question.content.variants.find(
+                    uploadQuestionImage(questionId, quizId, blob, (question, url) => {
-                        (variant) => variant.id === variantId,
+                        if (!("variants" in question.content)) return;
-                    );
-                    if (!variant) return;
-                    if (!("editedUrlImagesList" in variant)) variant.editedUrlImagesList = {}
 
-                    variant.editedUrlImagesList[key] = url;
+                        const variant = question.content.variants.find(
-                });
+                            (variant) => variant.id === variantId,
+                        );
+                        if (!variant) return;
+                        if (!variant.editedUrlImagesList) variant.editedUrlImagesList = {}
+
+                        variant.editedUrlImagesList[key] = url;
+                        resolve()
+                    });
+                }))
             }
         } else {//Работаем с контентом
 
             for (let k in editedImages) {
-                let key = k;
+                requests.push(new Promise(async (resolve) => {
 
-                const img = document.createElement("img");
+                    let key = k;
-                img.crossOrigin = 'anonymous';
-                img.src = editedImages[key].url;
-                const blob = await getModifiedImageBlob(img, editedImages[key].newRules.crop, editedImages[key].newRules.darken);
 
-                uploadQuestionImage(questionId, quizId, blob, (question, url) => {
+                    const img = document.createElement("img");
-                    if (!("editedUrlImagesList" in question.content)) question.content.editedUrlImagesList = {};
+                    img.crossOrigin = 'anonymous';
+                    img.src = editedImages[key].url;
+                    const blob = await getModifiedImageBlob(img, editedImages[key].newRules.crop, editedImages[key].newRules.darken);
 
-                    question.content.editedUrlImagesList[key] = url;
+                    uploadQuestionImage(questionId, quizId, blob, (question, url) => {
-                });
+                        if (!question.content.editedUrlImagesList) question.content.editedUrlImagesList = {};
+
+                        question.content.editedUrlImagesList[key] = url;
+                        resolve()
+                    });
+                }))
             }
         }
-        closeModal();
+        await Promise.all(requests)
         setPictureUploading(false);
     };