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

lib/api/quizRelase.ts

@@ -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({

lib/components/ViewPublicationPage/questions/Date.tsx

@@ -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,10 +25,11 @@ export const Date = ({ currentQuestion }: DateProps) => {
         ({ questionId }) => questionId === currentQuestion.id
     )?.answer as string;
     const currentAnswer = moment(answer) || moment();
+    const [readySend, setReadySend] = useState(true)
 
     return (
         <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>
+            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
                 {currentQuestion.title}
             </Typography>
             <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: {

lib/components/ViewPublicationPage/questions/Emoji.tsx

@@ -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,16 +26,17 @@ 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>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
+            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
             <RadioGroup
                 name={currentQuestion.id}
                 value={currentQuestion.content.variants.findIndex(
@@ -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={

lib/components/ViewPublicationPage/questions/File.tsx

@@ -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,12 +183,14 @@ export const File = ({ currentQuestion }: FileProps) => {
                 }
 
             }
+            setReadySend(true)
+        }
     };
 
     return (
         <>
             <Box>
-                <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
+                <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
                 <Box
                     sx={{
                         display: "flex",
@@ -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>
                     )}

lib/components/ViewPublicationPage/questions/Images.tsx

@@ -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: "",

lib/components/ViewPublicationPage/questions/Rating.tsx

@@ -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;

lib/components/ViewPublicationPage/questions/Variant.tsx

@@ -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(() => {
@@ -68,9 +72,11 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
 
     return (
         <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
+            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
-            <Box sx={{ display: "flex", gap: "20px",
+            <Box sx={{
-                flexDirection: isMobile ? "column-reverse" : undefined, alignItems: isMobile ? "center" : undefined}}>
+                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)
+                }
+
             }}
         />
     );