121 lines
3.5 KiB
TypeScript
121 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>Incorrect file type selected</Typography>;
|
|
case "errorSize":
|
|
return <Typography>File is too big. Maximum size is 50 MB</Typography>;
|
|
|
|
default:
|
|
return (
|
|
<>
|
|
<Typography>Acceptable file extensions:</Typography>
|
|
<Typography>{ACCEPT_SEND_FILE_TYPES_MAP[status].join(" ")}</Typography>
|
|
</>
|
|
);
|
|
}
|
|
};
|