diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx index 69cee478..5fcdf4fa 100644 --- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx +++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx @@ -35,9 +35,11 @@ export default function OptionsAndPicture({ const [selectedVariantId, setSelectedVariantId] = useState( 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); }; diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx index 3cda16ce..29afa729 100644 --- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx @@ -35,9 +35,9 @@ export default function OptionsPicture({ const [openCropModal, setOpenCropModal] = useState(false); const [selectedVariantId, setSelectedVariantId] = useState(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)); diff --git a/src/pages/Questions/UploadImage/index.tsx b/src/pages/Questions/UploadImage/index.tsx index 5ccc9ace..6c3c2d65 100644 --- a/src/pages/Questions/UploadImage/index.tsx +++ b/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 ( @@ -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} diff --git a/src/pages/startPage/dropZone.tsx b/src/pages/startPage/dropZone.tsx index 6b8ad79f..d19acf5d 100644 --- a/src/pages/startPage/dropZone.tsx +++ b/src/pages/startPage/dropZone.tsx @@ -97,7 +97,7 @@ export const DropZone = ({ handleImageChange={handleImageUpload} /> onImageSavedClick ? onImageSavedClick() : openImageUploadModal() + onClick={ () => onImageSavedClick &&imageUrl ? onImageSavedClick() : openImageUploadModal() } sx={{ width: "100%", diff --git a/src/ui_kit/MediaSelectionAndDisplay.tsx b/src/ui_kit/MediaSelectionAndDisplay.tsx index bb49399d..8761e852 100644 --- a/src/ui_kit/MediaSelectionAndDisplay.tsx +++ b/src/ui_kit/MediaSelectionAndDisplay.tsx @@ -45,6 +45,7 @@ export const MediaSelectionAndDisplay: FC = ({ async function handleImageUpload(file: File) { setPictureUploading(true); + closeImageUploadModal(); const url = await uploadQuestionImage( resultData.id, quizQid, @@ -54,7 +55,7 @@ export const MediaSelectionAndDisplay: FC = ({ question.content.originalBack = url; }, ); - closeImageUploadModal(); + setOpenCropModal(true) setPictureUploading(false); } diff --git a/src/ui_kit/Modal/CropModal/index.tsx b/src/ui_kit/Modal/CropModal/index.tsx index ee2acf38..61a455ba 100644 --- a/src/ui_kit/Modal/CropModal/index.tsx +++ b/src/ui_kit/Modal/CropModal/index.tsx @@ -50,9 +50,7 @@ export const CropModalInit: FC = ({ (async () => { let newImageBlob = imageBlob; if (originalImageUrl !== undefined) { - const response = await fetch(originalImageUrl, { - mode: 'no-cors', - }); + const response = await fetch(originalImageUrl); newImageBlob = await response.blob(); console.log(newImageBlob) }; @@ -61,7 +59,7 @@ export const CropModalInit: FC = ({ 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 = ({ const saveImagesAndRules = async () => { setPictureUploading(true) if (editedImages === null) return; + + closeModal(); + + //массив запросов + const requests: Promise[] = []; //Преобразовываем и отправляем на бек картинки. if (variantId) {//Работаем с вариантом for (let k in editedImages) { - let key = k; + requests.push(new Promise(async (resolve) => { - const img = document.createElement("img"); - img.crossOrigin = 'anonymous'; - img.src = editedImages[key].url; - const blob = await getModifiedImageBlob(img, editedImages[key].newRules.crop, editedImages[key].newRules.darken); + let key = k; - uploadQuestionImage(questionId, quizId, blob, (question, url) => { - if (!("variants" in question.content)) return; + const img = document.createElement("img"); + 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( - (variant) => variant.id === variantId, - ); - if (!variant) return; - if (!("editedUrlImagesList" in variant)) variant.editedUrlImagesList = {} + uploadQuestionImage(questionId, quizId, blob, (question, url) => { + if (!("variants" in question.content)) return; - 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"); - img.crossOrigin = 'anonymous'; - img.src = editedImages[key].url; - const blob = await getModifiedImageBlob(img, editedImages[key].newRules.crop, editedImages[key].newRules.darken); + let key = k; - uploadQuestionImage(questionId, quizId, blob, (question, url) => { - if (!("editedUrlImagesList" in question.content)) question.content.editedUrlImagesList = {}; + const img = document.createElement("img"); + 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); };