ожидание загрузки файла

This commit is contained in:
Nastya 2024-02-15 12:13:14 +03:00
parent 051e9ee4ac
commit 8e1ec4b30b
7 changed files with 237 additions and 172 deletions

@ -87,6 +87,7 @@ export function sendAnswer({ questionId, body, qid }: any) {
},
];
formData.append("answers", JSON.stringify(answers));
console.log("QID", qid)
formData.append("qid", qid);
return publicationMakeRequest({
@ -109,6 +110,7 @@ export function sendFile({ questionId, body, qid }: any) {
formData.append("answers", JSON.stringify(answers));
formData.append(body.name, body.file);
console.log("QID", qid)
formData.append("qid", qid);
return publicationMakeRequest({

@ -11,6 +11,7 @@ import { sendAnswer } from "@api/quizRelase";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizData } from "@contexts/QuizDataContext";
import { useState } from "react";
type DateProps = {
currentQuestion: QuizQuestionDate;
@ -24,6 +25,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
({ questionId }) => questionId === currentQuestion.id
)?.answer as string;
const currentAnswer = moment(answer) || moment();
const [readySend, setReadySend] = useState(true)
return (
<Box>
@ -51,7 +53,8 @@ export const Date = ({ currentQuestion }: DateProps) => {
}}
value={currentAnswer}
onChange={async (date) => {
console.log(date);
if (readySend) {
setReadySend(false)
if (!date) {
return;
}
@ -71,6 +74,8 @@ export const Date = ({ currentQuestion }: DateProps) => {
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
setReadySend(true)
}
}}
slotProps={{
openPickerButton: {

@ -18,6 +18,7 @@ import { sendAnswer } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack";
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
import { useQuizData } from "@contexts/QuizDataContext";
import { useState } from "react";
type EmojiProps = {
currentQuestion: QuizQuestionEmoji;
@ -25,12 +26,13 @@ type EmojiProps = {
export const Emoji = ({ currentQuestion }: EmojiProps) => {
const theme = useTheme();
const quizId = useQuizData();
const { quizId } = useQuizData();
const { answers } = useQuizViewStore();
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.id
) ?? {};
const [readySend, setReadySend] = useState(true)
return (
<Box>
@ -114,7 +116,8 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
value={index}
onClick={async (event) => {
event.preventDefault();
if (readySend) {
setReadySend(false)
try {
await sendAnswer({
@ -149,6 +152,9 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
enqueueSnackbar("ответ не был засчитан");
}
}
setReadySend(true)
}
}}
control={

@ -3,6 +3,7 @@ import {
ButtonBase,
IconButton,
Modal,
Skeleton,
Typography,
useTheme
} from "@mui/material";
@ -118,14 +119,17 @@ const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
export const File = ({ currentQuestion }: FileProps) => {
const theme = useTheme();
const { answers } = useQuizViewStore();
const quizId = useQuizData();
const { quizId } = useQuizData();
const [statusModal, setStatusModal] = useState<"errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | "">("");
const [readySend, setReadySend] = useState(true)
const answer = answers.find(
({ questionId }) => questionId === currentQuestion.id
)?.answer as string;
const isMobile = useRootContainerSize() < 500;
const uploadFile = async ({ target }: ChangeEvent<HTMLInputElement>) => {
if (readySend) {
setReadySend(false)
const file = target.files?.[0];
if (file) {
if (file.size <= 52428800) {
@ -179,6 +183,8 @@ export const File = ({ currentQuestion }: FileProps) => {
}
}
setReadySend(true)
}
};
return (
@ -219,8 +225,18 @@ export const File = ({ currentQuestion }: FileProps) => {
{answer?.split("|")[0]}</Typography>
<IconButton
sx={{ p: 0 }}
onClick={() => {
onClick={async () => {
if (answer.length > 0) {
setReadySend(false)
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
})
}
console.log(answer)
updateAnswer(currentQuestion.id, "", 0);
setReadySend(true)
}}
>
<CloseBold />
@ -234,6 +250,9 @@ export const File = ({ currentQuestion }: FileProps) => {
display: "flex",
alignItems: "center"
}}>
{
!readySend ? <>
<ButtonBase component="label" sx={{ justifyContent: "flex-start", width: "100%" }}>
<input
onChange={uploadFile}
@ -290,6 +309,18 @@ export const File = ({ currentQuestion }: FileProps) => {
</Box>
</Box>
</ButtonBase>
</> :
<Skeleton
variant="rounded"
sx={{
width: "100%",
height: "120px",
maxWidth: "560px",
}}
/>
}
<Info sx={{ width: "40px", height: "40px" }} color={theme.palette.primary.main} onClick={() => setStatusModal(currentQuestion.content.type)} />
</Box>
)}

@ -22,7 +22,7 @@ type ImagesProps = {
};
export const Images = ({ currentQuestion }: ImagesProps) => {
const quizId =useQuizData();
const { quizId } =useQuizData();
const { answers } = useQuizViewStore();
const theme = useTheme();
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer;
@ -69,6 +69,8 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
onClick={async (event) => {
event.preventDefault();
console.log("пытаюсь передать qid")
console.log(quizId)
try {
await sendAnswer({
@ -92,6 +94,8 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
deleteAnswer(currentQuestion.id);
try {
console.log("пытаюсь передать qid")
console.log(quizId)
await sendAnswer({
questionId: currentQuestion.id,
body: "",

@ -57,7 +57,7 @@ const buttonRatingForm = [
];
export const Rating = ({ currentQuestion }: RatingProps) => {
const quizId = useQuizData();
const { quizId } = useQuizData();
const { answers } = useQuizViewStore();
const theme = useTheme();
const isMobile = useRootContainerSize() < 650;

@ -10,7 +10,7 @@ import {
Typography,
useTheme
} from "@mui/material";
import { FC, useEffect } from "react";
import { FC, useEffect, useState } from "react";
import {
deleteAnswer,
@ -44,6 +44,8 @@ type VariantItemProps = {
answer: string | string[] | undefined;
index: number;
own?: boolean;
readySend: boolean;
setReadySend: (a: boolean) => void
};
export const Variant = ({ currentQuestion }: VariantProps) => {
@ -58,6 +60,8 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
(variant) => variant.id === currentQuestion.id
);
const [readySend, setReadySend] = useState(true)
const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
useEffect(() => {
@ -69,8 +73,10 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
<Box sx={{ display: "flex", gap: "20px",
flexDirection: isMobile ? "column-reverse" : undefined, alignItems: isMobile ? "center" : undefined}}>
<Box sx={{
display: "flex", gap: "20px",
flexDirection: isMobile ? "column-reverse" : undefined, alignItems: isMobile ? "center" : undefined
}}>
<Group
name={currentQuestion.id.toString()}
value={currentQuestion.content.variants.findIndex(
@ -102,6 +108,8 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
// @ts-ignore
answer={answer}
index={index}
readySend={readySend}
setReadySend={setReadySend}
/>
))}
{currentQuestion.content.own && ownVariant && (
@ -112,6 +120,8 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
// @ts-ignore
answer={answer}
index={currentQuestion.content.variants.length + 2}
readySend={readySend}
setReadySend={setReadySend}
/>
)}
</Box>
@ -137,6 +147,8 @@ const VariantItem = ({
answer,
index,
own = false,
readySend,
setReadySend
}: VariantItemProps) => {
const theme = useTheme();
const { settings, quizId } = useQuizData();
@ -185,6 +197,8 @@ const VariantItem = ({
label={own ? <TextField label="Другое..." /> : variant.answer}
onClick={async (event) => {
event.preventDefault();
if (readySend) {
setReadySend(false)
const variantId = currentQuestion.content.variants[index].id;
console.log(answer);
@ -248,6 +262,9 @@ const VariantItem = ({
}
deleteAnswer(currentQuestion.id);
}
setReadySend(true)
}
}}
/>
);