76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import { Box, IconButton, Typography, useTheme } from "@mui/material";
|
|
|
|
import { sendAnswer } from "@api/quizRelase";
|
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
|
import { useQuizViewStore } from "@stores/quizView";
|
|
|
|
import CloseBold from "@icons/CloseBold";
|
|
|
|
import type { QuizQuestionFile } from "@model/questionTypes/file";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type UploadedFileProps = {
|
|
currentQuestion: QuizQuestionFile;
|
|
setIsSending: (isSending: boolean) => void;
|
|
};
|
|
|
|
export const UploadedFile = ({ currentQuestion, setIsSending }: UploadedFileProps) => {
|
|
const { quizId, preview } = useQuizSettings();
|
|
const answers = useQuizViewStore((state) => state.answers);
|
|
const { updateAnswer } = useQuizViewStore((state) => state);
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
|
|
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}>{t("You have uploaded")}:</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>
|
|
);
|
|
};
|