diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index c07a5ad2..2de92467 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -22,7 +22,7 @@ import { useMediaQuery, useTheme, } from "@mui/material"; -import { incrementCurrentStep, updateQuiz } from "@root/quizes/actions"; +import { incrementCurrentStep, updateQuiz, uploadQuizImage } from "@root/quizes/actions"; import { useCurrentQuiz } from "@root/quizes/hooks"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; @@ -307,8 +307,15 @@ export default function StartPageSettings() { heightImg={"110px"} sx={{ maxWidth: "300px" }} imageUrl={quiz.config.startpage.background.desktop} - onImageUpload={(quiz, url) => { - quiz.config.startpage.background.desktop = url; + onFileChange={file => { + uploadQuizImage(quiz.id, file, (quiz, url) => { + quiz.config.startpage.background.desktop = url; + }); + }} + onDeleteClick={() => { + updateQuiz(quiz.id, quiz => { + quiz.config.startpage.background.desktop = null; + }); }} /> @@ -361,8 +368,15 @@ export default function StartPageSettings() { text={"5 MB максимум"} heightImg={"110px"} imageUrl={quiz.config.startpage.background.mobile} - onImageUpload={(quiz, url) => { - quiz.config.startpage.background.mobile = url; + onFileChange={file => { + uploadQuizImage(quiz.id, file, (quiz, url) => { + quiz.config.startpage.background.mobile = url; + }); + }} + onDeleteClick={() => { + updateQuiz(quiz.id, quiz => { + quiz.config.startpage.background.mobile = null; + }); }} /> @@ -450,8 +464,15 @@ export default function StartPageSettings() { text={"5 MB максимум"} heightImg={"110px"} imageUrl={quiz.config.startpage.background.mobile} - onImageUpload={(quiz, url) => { - quiz.config.startpage.background.mobile = url; + onFileChange={file => { + uploadQuizImage(quiz.id, file, (quiz, url) => { + quiz.config.startpage.background.mobile = url; + }); + }} + onDeleteClick={() => { + updateQuiz(quiz.id, quiz => { + quiz.config.startpage.background.mobile = null; + }); }} /> @@ -518,8 +539,15 @@ export default function StartPageSettings() { heightImg={"110px"} sx={{ maxWidth: "300px" }} imageUrl={quiz.config.logo} - onImageUpload={(quiz, url) => { - quiz.config.logo = url; + onFileChange={file => { + uploadQuizImage(quiz.id, file, (quiz, url) => { + quiz.config.logo = url; + }); + }} + onDeleteClick={() => { + updateQuiz(quiz.id, quiz => { + quiz.config.logo = null; + }); }} /> @@ -592,8 +620,15 @@ export default function StartPageSettings() { heightImg={"110px"} sx={{ maxWidth: "300px" }} imageUrl={quiz.config.logo} - onImageUpload={(quiz, url) => { - quiz.config.logo = url; + onFileChange={file => { + uploadQuizImage(quiz.id, file, (quiz, url) => { + quiz.config.logo = url; + }); + }} + onDeleteClick={() => { + updateQuiz(quiz.id, quiz => { + quiz.config.logo = null; + }); }} /> @@ -704,7 +739,7 @@ export default function StartPageSettings() { })} /> updateQuiz(quiz.id, quiz => { diff --git a/src/pages/startPage/dropZone.tsx b/src/pages/startPage/dropZone.tsx index 010aa2f0..70be382d 100644 --- a/src/pages/startPage/dropZone.tsx +++ b/src/pages/startPage/dropZone.tsx @@ -1,14 +1,14 @@ import UploadIcon from "@icons/UploadIcon"; -import { Quiz } from "@model/quiz/quiz"; +import DeleteIcon from '@mui/icons-material/Delete'; import { Box, ButtonBase, + IconButton, SxProps, Theme, Typography, useTheme, } from "@mui/material"; -import { uploadQuizImage } from "@root/quizes/actions"; import { useCurrentQuiz } from "@root/quizes/hooks"; import { enqueueSnackbar } from "notistack"; import { useState } from "react"; @@ -19,12 +19,13 @@ interface Props { sx?: SxProps; heightImg: string; widthImg?: string; - onImageUpload: (quiz: Quiz, url: string) => void; + onFileChange?: (file: File) => void; + onDeleteClick?: () => void; imageUrl: string | null; } //Научи функцию принимать данные для валидации -export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUrl }: Props) => { +export const DropZone = ({ text, sx, heightImg, widthImg, onFileChange, onDeleteClick, imageUrl }: Props) => { const theme = useTheme(); const quiz = useCurrentQuiz(); const [ready, setReady] = useState(false); @@ -39,7 +40,7 @@ export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUr if (!file) return; if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик"); - uploadQuizImage(quiz.id, file, onImageUpload); + onFileChange?.(file); }; const dragenterHC = () => { @@ -57,14 +58,57 @@ export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUr const file = event.dataTransfer.files[0]; if (file.size < 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик"); - uploadQuizImage(quiz.id, file, onImageUpload); + onFileChange?.(file); }; const dragOverHC = (event: React.DragEvent) => { event.preventDefault(); }; - return ( + return imageUrl ? ( + + img + + + + + ) : ( imgHC(event.target)} @@ -106,19 +150,6 @@ export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUr > {text} - {imageUrl && ( - img - )} );