SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix bugs

Browse Source
This commit is contained in:
Nastya 2024-11-16 01:42:19 +03:00
commit 0cd932ec45
6 changed files with 53 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
View File

@ -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);
};

4
src/pages/Questions/OptionsPicture/OptionsPicture.tsx
View File

@ -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));

4
src/pages/Questions/UploadImage/index.tsx
View File

@ -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}

2
src/pages/startPage/dropZone.tsx
View File

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

3
src/ui_kit/MediaSelectionAndDisplay.tsx
View File

@ -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);
}

67
src/ui_kit/Modal/CropModal/index.tsx
View File

@ -50,9 +50,7 @@ export const CropModalInit: FC<CropOnOpenType> = ({
(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<CropOnOpenType> = ({
const isGif = await isImageBlobAGifFile(newImageBlob);
if (isGif) {
saveImagesAndRules(newImageBlob);
return;
return setPictureUploading(false);
}
//Для работы нам нужны урлы. Оригинальной и редактированных картинок
let newOriginalImageUrl = originalImageUrl || URL.createObjectURL(newImageBlob)
@ -158,47 +156,60 @@ export const CropModalInit: FC<CropOnOpenType> = ({
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");
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);
};