107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
import { useState } from "react";
|
||
import { Box, Modal, Typography, useTheme } from "@mui/material";
|
||
|
||
import { UploadFile } from "./UploadFile";
|
||
import { UploadedFile } from "./UploadedFile";
|
||
|
||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||
import { useQuizViewStore } from "@stores/quizView";
|
||
|
||
import { ACCEPT_SEND_FILE_TYPES_MAP } from "@/components/ViewPublicationPage/tools/fileUpload";
|
||
|
||
import type { QuizQuestionFile } from "@model/questionTypes/file";
|
||
|
||
export type ModalWarningType = "errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | null;
|
||
|
||
type FileProps = {
|
||
currentQuestion: QuizQuestionFile;
|
||
};
|
||
|
||
export const File = ({ currentQuestion }: FileProps) => {
|
||
const theme = useTheme();
|
||
const answers = useQuizViewStore((state) => state.answers);
|
||
const [modalWarningType, setModalWarningType] = useState<ModalWarningType>(null);
|
||
const [isSending, setIsSending] = useState<boolean>(false);
|
||
const isMobile = useRootContainerSize() < 500;
|
||
|
||
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string;
|
||
|
||
return (
|
||
<Box>
|
||
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
|
||
{currentQuestion.title}
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
width: "100%",
|
||
marginTop: "20px",
|
||
maxWidth: answer?.split("|")[0] ? "640px" : "600px",
|
||
}}
|
||
>
|
||
{answer?.split("|")[0] ? (
|
||
<UploadedFile currentQuestion={currentQuestion} setIsSending={setIsSending} />
|
||
) : (
|
||
<UploadFile
|
||
currentQuestion={currentQuestion}
|
||
setModalWarningType={setModalWarningType}
|
||
isSending={isSending}
|
||
setIsSending={setIsSending}
|
||
/>
|
||
)}
|
||
{answer && currentQuestion.content.type === "picture" && (
|
||
<img src={answer.split("|")[1]} style={{ marginTop: "15px", maxWidth: "300px", maxHeight: "300px" }} alt="" />
|
||
)}
|
||
{answer && currentQuestion.content.type === "video" && (
|
||
<video
|
||
src={answer.split("|")[1]}
|
||
style={{
|
||
marginTop: "15px",
|
||
maxWidth: "300px",
|
||
maxHeight: "300px",
|
||
objectFit: "cover",
|
||
}}
|
||
/>
|
||
)}
|
||
</Box>
|
||
<Modal open={modalWarningType !== null} onClose={() => setModalWarningType(null)}>
|
||
<Box
|
||
sx={{
|
||
position: "absolute",
|
||
top: "50%",
|
||
left: "50%",
|
||
transform: "translate(-50%, -50%)",
|
||
width: isMobile ? 300 : 400,
|
||
bgcolor: "background.paper",
|
||
borderRadius: 3,
|
||
boxShadow: 24,
|
||
p: 4,
|
||
}}
|
||
>
|
||
<CurrentModal status={modalWarningType} />
|
||
</Box>
|
||
</Modal>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
const CurrentModal = ({ status }: { status: ModalWarningType }) => {
|
||
switch (status) {
|
||
case null:
|
||
return null;
|
||
case "errorType":
|
||
return <Typography>Выбран некорректный тип файла</Typography>;
|
||
case "errorSize":
|
||
return <Typography>Файл слишком большой. Максимальный размер 50 МБ</Typography>;
|
||
|
||
default:
|
||
return (
|
||
<>
|
||
<Typography>Допустимые расширения файлов:</Typography>
|
||
<Typography>{ACCEPT_SEND_FILE_TYPES_MAP[status].join(" ")}</Typography>
|
||
</>
|
||
);
|
||
}
|
||
};
|