111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
import { useState } from "react";
|
|
import moment from "moment";
|
|
import { DatePicker } from "@mui/x-date-pickers";
|
|
import { Box, Typography, useTheme } from "@mui/material";
|
|
import { enqueueSnackbar } from "notistack";
|
|
|
|
import { sendAnswer } from "@api/quizRelase";
|
|
import { useQuizViewStore } from "@/stores/quizView";
|
|
import { useQuizData } from "@contexts/QuizDataContext";
|
|
|
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
|
|
|
import CalendarIcon from "@icons/CalendarIcon";
|
|
|
|
import type { Moment } from "moment";
|
|
import type { QuizQuestionDate } from "@model/questionTypes/date";
|
|
|
|
type DateProps = {
|
|
currentQuestion: QuizQuestionDate;
|
|
};
|
|
|
|
export const Date = ({ currentQuestion }: DateProps) => {
|
|
const [isSending, setIsSending] = useState<boolean>(false);
|
|
const { settings, 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 currentAnswer = moment(answer) || moment();
|
|
|
|
const onDateChange = async (date: Moment | null) => {
|
|
if (isSending || !date) return;
|
|
|
|
setIsSending(true);
|
|
try {
|
|
await sendAnswer({
|
|
questionId: currentQuestion.id,
|
|
body: moment(date).format("YYYY.MM.DD"),
|
|
qid: quizId,
|
|
preview,
|
|
});
|
|
|
|
updateAnswer(currentQuestion.id, date, 0);
|
|
} catch (error) {
|
|
enqueueSnackbar("ответ не был засчитан");
|
|
}
|
|
|
|
setIsSending(false);
|
|
};
|
|
|
|
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",
|
|
}}
|
|
>
|
|
<DatePicker
|
|
format="DD/MM/YYYY"
|
|
slots={{
|
|
openPickerIcon: () => (
|
|
<CalendarIcon
|
|
sx={{
|
|
"& path": { stroke: theme.palette.primary.main },
|
|
"& rect": { stroke: theme.palette.primary.main },
|
|
}}
|
|
/>
|
|
),
|
|
}}
|
|
value={currentAnswer}
|
|
onChange={onDateChange}
|
|
slotProps={{
|
|
openPickerButton: { sx: { p: 0 }, "data-cy": "open-datepicker" },
|
|
layout: {
|
|
sx: { backgroundColor: theme.palette.background.default },
|
|
},
|
|
}}
|
|
sx={{
|
|
"& .MuiInputBase-root": {
|
|
backgroundColor: settings.cfg.design
|
|
? quizThemes[settings.cfg.theme].isLight
|
|
? "#F2F3F7"
|
|
: "rgba(154,154,175, 0.2)"
|
|
: quizThemes[settings.cfg.theme].isLight
|
|
? "white"
|
|
: theme.palette.background.default,
|
|
borderRadius: "10px",
|
|
maxWidth: "250px",
|
|
pr: "30px",
|
|
"& input": { py: "11px", pl: "20px", lineHeight: "19px" },
|
|
"& fieldset": { borderColor: "#9A9AAF" },
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|