From 95ae8c6a835d34c0ac6f44f13adb8c81e4b77bd4 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Fri, 19 Jan 2024 14:22:48 +0300 Subject: [PATCH] feat: uploading skeletons --- .../OptionsAndPicture/OptionsAndPicture.tsx | 34 +- .../OptionsPicture/OptionsPicture.tsx | 34 +- src/pages/Questions/UploadImage/index.tsx | 71 +++-- src/pages/startPage/StartPageSettings.tsx | 294 +++++++++++------- src/ui_kit/MediaSelectionAndDisplay.tsx | 24 +- 5 files changed, 277 insertions(+), 180 deletions(-) diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx index e924aa41..72951890 100644 --- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx +++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx @@ -69,26 +69,24 @@ export default function OptionsAndPicture({ setPictureUploading(true); - try { - const url = await uploadQuestionImage( - question.id, - quizQid, - file, - (question, url) => { - if (!("variants" in question.content)) return; + const url = await uploadQuestionImage( + question.id, + quizQid, + file, + (question, url) => { + if (!("variants" in question.content)) return; - const variant = question.content.variants.find( - (variant) => variant.id === selectedVariantId, - ); - if (!variant) return; + const variant = question.content.variants.find( + (variant) => variant.id === selectedVariantId, + ); + if (!variant) return; - variant.extendedText = url; - variant.originalImageUrl = url; - }, - ); - closeImageUploadModal(); - openCropModal(file, url); - } catch {} + variant.extendedText = url; + variant.originalImageUrl = url; + }, + ); + closeImageUploadModal(); + openCropModal(file, url); setPictureUploading(false); }; diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx index c7f03074..c21a1e5d 100644 --- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx @@ -63,27 +63,25 @@ export default function OptionsPicture({ setPictureUploading(true); - try { - const url = await uploadQuestionImage( - question.id, - quizQid, - file, - (question, url) => { - if (!("variants" in question.content)) return; + const url = await uploadQuestionImage( + question.id, + quizQid, + file, + (question, url) => { + if (!("variants" in question.content)) return; - const variant = question.content.variants.find( - (variant) => variant.id === selectedVariantId, - ); - if (!variant) return; + const variant = question.content.variants.find( + (variant) => variant.id === selectedVariantId, + ); + if (!variant) return; - variant.extendedText = url; - variant.originalImageUrl = url; - }, - ); + variant.extendedText = url; + variant.originalImageUrl = url; + }, + ); - closeImageUploadModal(); - openCropModal(file, url); - } catch {} + closeImageUploadModal(); + openCropModal(file, url); setPictureUploading(false); }; diff --git a/src/pages/Questions/UploadImage/index.tsx b/src/pages/Questions/UploadImage/index.tsx index efd7f27b..ef531eba 100644 --- a/src/pages/Questions/UploadImage/index.tsx +++ b/src/pages/Questions/UploadImage/index.tsx @@ -1,5 +1,6 @@ +import { useState } from "react"; import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; -import { Box, ButtonBase, Typography, useTheme } from "@mui/material"; +import { Box, Skeleton, Typography, useTheme } from "@mui/material"; import { updateQuestion, uploadQuestionImage } from "@root/questions/actions"; import { useCurrentQuiz } from "@root/quizes/hooks"; import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal"; @@ -12,6 +13,7 @@ type UploadImageProps = { }; export default function UploadImage({ question }: UploadImageProps) { + const [pictureUploding, setPictureUploading] = useState(false); const theme = useTheme(); const quiz = useCurrentQuiz(); @@ -29,29 +31,50 @@ export default function UploadImage({ question }: UploadImageProps) { > Загрузить изображение - { - uploadQuestionImage(question.id, quiz.qid, file, (question, url) => { - question.content.back = url; - question.content.originalBack = url; - }); - }} - onDeleteClick={() => { - updateQuestion(question.id, (question) => { - question.content.back = null; - }); - }} - onImageSaveClick={(file) => { - uploadQuestionImage(question.id, quiz.qid, file, (question, url) => { - question.content.back = url; - }); - }} - /> + {pictureUploding ? ( + + ) : ( + { + setPictureUploading(true); + + await uploadQuestionImage( + question.id, + quiz.qid, + file, + (question, url) => { + question.content.back = url; + question.content.originalBack = url; + }, + ); + + setPictureUploading(false); + }} + onDeleteClick={() => { + updateQuestion(question.id, (question) => { + question.content.back = null; + }); + }} + onImageSaveClick={async (file) => { + setPictureUploading(true); + + await uploadQuestionImage( + question.id, + quiz.qid, + file, + (question, url) => { + question.content.back = url; + }, + ); + + setPictureUploading(false); + }} + /> + )} ); } diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index f867b188..9b5cd3d2 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -25,6 +25,7 @@ import { Select, Tooltip, Typography, + Skeleton, useMediaQuery, useTheme, } from "@mui/material"; @@ -75,6 +76,9 @@ export default function StartPageSettings() { const quiz = useCurrentQuiz(); const [formState, setFormState] = useState<"design" | "content">("design"); const [mobileVersion, setMobileVersion] = useState(false); + const [faviconUploding, setFaviconUploading] = useState(false); + const [backgroundUploding, setBackgroundUploading] = useState(false); + const [logoUploding, setLogoUploading] = useState(false); if (!quiz) return null; @@ -84,14 +88,20 @@ export default function StartPageSettings() { const designType = quiz?.config?.startpageType; - const favIconDropZoneElement = ( + const favIconDropZoneElement = faviconUploding ? ( + + ) : ( { + setFaviconUploading(true); const resizedImage = await resizeFavIcon(file); - uploadQuizImage(quiz.id, resizedImage, (quiz, url) => { + + await uploadQuizImage(quiz.id, resizedImage, (quiz, url) => { quiz.config.startpage.favIcon = url; }); + + setFaviconUploading(false); }} onDeleteClick={() => { updateQuiz(quiz.id, (quiz) => { @@ -330,30 +340,47 @@ export default function StartPageSettings() { > Изображение - { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.desktop = url; - quiz.config.startpage.background.originalDesktop = url; - }); - }} - onImageSaveClick={(file) => { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.desktop = url; - }); - }} - onDeleteClick={() => { - updateQuiz(quiz.id, (quiz) => { - quiz.config.startpage.background.desktop = null; - }); - }} - /> + {backgroundUploding ? ( + + ) : ( + { + setBackgroundUploading(true); + await uploadQuizImage(quiz.id, file, (quiz, url) => { + quiz.config.startpage.background.desktop = url; + quiz.config.startpage.background.originalDesktop = + url; + }); + + setBackgroundUploading(false); + }} + onImageSaveClick={async (file) => { + setBackgroundUploading(true); + await uploadQuizImage(quiz.id, file, (quiz, url) => { + quiz.config.startpage.background.desktop = url; + }); + + setBackgroundUploading(false); + }} + onDeleteClick={() => { + updateQuiz(quiz.id, (quiz) => { + quiz.config.startpage.background.desktop = null; + }); + }} + /> + )} @@ -386,47 +413,68 @@ export default function StartPageSettings() { )} - - { - const file = event.target.files?.[0]; - if (file) { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.video = url; - }); - // setVideo(URL.createObjectURL(file)); - } - }} - hidden - accept=".mp4" - multiple - type="file" - /> - } + {backgroundUploding ? ( + - - {quiz.config.startpage.background.video ? ( -