71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import { Box, IconButton, Typography, useTheme } from "@mui/material";
|
||
|
||
import { sendAnswer } from "@api/quizRelase";
|
||
import { useQuizData } from "@contexts/QuizDataContext";
|
||
import { useQuizViewStore } from "@stores/quizView";
|
||
|
||
import CloseBold from "@icons/CloseBold";
|
||
|
||
import type { QuizQuestionFile } from "@model/questionTypes/file";
|
||
|
||
type UploadedFileProps = {
|
||
currentQuestion: QuizQuestionFile;
|
||
setIsSending: (isSending: boolean) => void;
|
||
};
|
||
|
||
export const UploadedFile = ({ currentQuestion, setIsSending }: UploadedFileProps) => {
|
||
const { quizId, preview } = useQuizData();
|
||
const answers = useQuizViewStore((state) => state.answers);
|
||
const { updateAnswer } = useQuizViewStore((state) => state);
|
||
const theme = useTheme();
|
||
|
||
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string;
|
||
|
||
const deleteFile = async () => {
|
||
if (answer.length > 0) {
|
||
setIsSending(true);
|
||
|
||
await sendAnswer({
|
||
questionId: currentQuestion.id,
|
||
body: "",
|
||
qid: quizId,
|
||
preview,
|
||
});
|
||
}
|
||
|
||
updateAnswer(currentQuestion.id, "", 0);
|
||
setIsSending(false);
|
||
};
|
||
|
||
return (
|
||
<Box sx={{ display: "flex", alignItems: "center", gap: "15px" }}>
|
||
<Typography color={theme.palette.text.primary}>Вы загрузили:</Typography>
|
||
<Box
|
||
sx={{
|
||
padding: "5px 5px 5px 16px",
|
||
backgroundColor: theme.palette.primary.main,
|
||
borderRadius: "8px",
|
||
color: "#FFFFFF",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
overflow: "hidden",
|
||
gap: "15px",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
whiteSpace: "nowrap",
|
||
textOverflow: "ellipsis",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
{answer?.split("|")[0]}
|
||
</Typography>
|
||
<IconButton sx={{ p: 0 }} onClick={deleteFile}>
|
||
<CloseBold />
|
||
</IconButton>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|