SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/api/quizRelase.ts
View File

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

41
lib/components/ViewPublicationPage/questions/Date.tsx
View File

@ -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,25 +53,28 @@ export const Date = ({ currentQuestion }: DateProps) => {
}}
value={currentAnswer}
onChange={async (date) => {
console.log(date);
if (!date) {
return;
}
if (readySend) {
setReadySend(false)
if (!date) {
return;
}
try {
await sendAnswer({
questionId: currentQuestion.id,
body: moment(date).format("YYYY.MM.DD"),
qid: quizId,
});
try {
await sendAnswer({
questionId: currentQuestion.id,
body: moment(date).format("YYYY.MM.DD"),
qid: quizId,
});
updateAnswer(
currentQuestion.id,
date,
0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
updateAnswer(
currentQuestion.id,
date,
0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
setReadySend(true)
}
}}
slotProps={{

12
lib/components/ViewPublicationPage/questions/Emoji.tsx
View File

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

225
lib/components/ViewPublicationPage/questions/File.tsx
View File

@ -3,6 +3,7 @@ import {
ButtonBase,
IconButton,
Modal,
Skeleton,
Typography,
useTheme
} from "@mui/material";
@ -118,73 +119,78 @@ 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>) => {
const file = target.files?.[0];
if (file) {
if (file.size <= 52428800) {
//проверяем на соответствие
console.log(file.name.toLowerCase());
if (ACCEPT_SEND_FILE_TYPES_MAP[currentQuestion.content.type].find((ednding => {
console.log(ednding);
console.log(file.name.toLowerCase().endsWith(ednding));
return file.name.toLowerCase().endsWith(ednding);
}))) {
if (readySend) {
setReadySend(false)
const file = target.files?.[0];
if (file) {
if (file.size <= 52428800) {
//проверяем на соответствие
console.log(file.name.toLowerCase());
if (ACCEPT_SEND_FILE_TYPES_MAP[currentQuestion.content.type].find((ednding => {
console.log(ednding);
console.log(file.name.toLowerCase().endsWith(ednding));
return file.name.toLowerCase().endsWith(ednding);
}))) {
//Нужный формат
console.log(file);
try {
//Нужный формат
console.log(file);
try {
const data = await sendFile({
questionId: currentQuestion.id,
body: {
file: file,
name: file.name
},
qid: quizId,
});
console.log(data);
const data = await sendFile({
questionId: currentQuestion.id,
body: {
file: file,
name: file.name
},
qid: quizId,
});
console.log(data);
await sendAnswer({
questionId: currentQuestion.id,
body: `https://storage.yandexcloud.net/squizanswer/${quizId}/${currentQuestion.id}/${data.data.fileIDMap[currentQuestion.id]}`,
qid: quizId,
});
await sendAnswer({
questionId: currentQuestion.id,
body: `https://storage.yandexcloud.net/squizanswer/${quizId}/${currentQuestion.id}/${data.data.fileIDMap[currentQuestion.id]}`,
qid: quizId,
});
updateAnswer(
currentQuestion.id,
`${file.name}|${URL.createObjectURL(file)}`,
0
);
updateAnswer(
currentQuestion.id,
`${file.name}|${URL.createObjectURL(file)}`,
0
);
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");
}
} else {
//неподходящий формат
setStatusModal("errorType");
}
} else {
//неподходящий формат
setStatusModal("errorType");
setStatusModal("errorSize");
}
} else {
setStatusModal("errorSize");
}
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,62 +250,77 @@ export const File = ({ currentQuestion }: FileProps) => {
display: "flex",
alignItems: "center"
}}>
<ButtonBase component="label" sx={{ justifyContent: "flex-start", width: "100%" }}>
<input
onChange={uploadFile}
hidden
accept={ACCEPT_SEND_FILE_TYPES_MAP[currentQuestion.content.type].join(",")}
multiple
type="file"
/>
<Box
onDragOver={(event: DragEvent<HTMLDivElement>) =>
event.preventDefault()
}
sx={{
width: "100%",
height: isMobile ? undefined : "120px",
display: "flex",
gap: "50px",
justifyContent: "flex-start",
alignItems: "center",
padding: "33px 44px 33px 55px",
backgroundColor: theme.palette.background.default,
border: `1px solid #9A9AAF`,
// border: `1px solid ${theme.palette.grey2.main}`,
borderRadius: "8px",
}}
>
<UploadIcon />
<Box>
<Typography
{
!readySend ? <>
<ButtonBase component="label" sx={{ justifyContent: "flex-start", width: "100%" }}>
<input
onChange={uploadFile}
hidden
accept={ACCEPT_SEND_FILE_TYPES_MAP[currentQuestion.content.type].join(",")}
multiple
type="file"
/>
<Box
onDragOver={(event: DragEvent<HTMLDivElement>) =>
event.preventDefault()
}
sx={{
color: "#9A9AAF",
// color: theme.palette.grey2.main,
fontWeight: 500,
width: "100%",
height: isMobile ? undefined : "120px",
display: "flex",
gap: "50px",
justifyContent: "flex-start",
alignItems: "center",
padding: "33px 44px 33px 55px",
backgroundColor: theme.palette.background.default,
border: `1px solid #9A9AAF`,
// border: `1px solid ${theme.palette.grey2.main}`,
borderRadius: "8px",
}}
>
{
UPLOAD_FILE_DESCRIPTIONS_MAP[currentQuestion.content.type]
.title
}
</Typography>
<Typography
sx={{
color: "#9A9AAF",
// color: theme.palette.grey2.main,
fontSize: "16px",
lineHeight: "19px",
}}
>
{
UPLOAD_FILE_DESCRIPTIONS_MAP[currentQuestion.content.type]
.description
}
</Typography>
</Box>
</Box>
</ButtonBase>
<UploadIcon />
<Box>
<Typography
sx={{
color: "#9A9AAF",
// color: theme.palette.grey2.main,
fontWeight: 500,
}}
>
{
UPLOAD_FILE_DESCRIPTIONS_MAP[currentQuestion.content.type]
.title
}
</Typography>
<Typography
sx={{
color: "#9A9AAF",
// color: theme.palette.grey2.main,
fontSize: "16px",
lineHeight: "19px",
}}
>
{
UPLOAD_FILE_DESCRIPTIONS_MAP[currentQuestion.content.type]
.description
}
</Typography>
</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>
)}

6
lib/components/ViewPublicationPage/questions/Images.tsx
View File

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

2
lib/components/ViewPublicationPage/questions/Rating.tsx
View File

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

121
lib/components/ViewPublicationPage/questions/Variant.tsx
View File

@ -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>
<Box sx={{ display: "flex", gap: "20px",
flexDirection: isMobile ? "column-reverse" : undefined, alignItems: isMobile ? "center" : undefined}}>
<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
}}>
<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,69 +197,74 @@ const VariantItem = ({
label={own ? <TextField label="Другое..." /> : variant.answer}
onClick={async (event) => {
event.preventDefault();
const variantId = currentQuestion.content.variants[index].id;
console.log(answer);
if (readySend) {
setReadySend(false)
const variantId = currentQuestion.content.variants[index].id;
console.log(answer);
if (currentQuestion.content.multi) {
const currentAnswer = typeof answer !== "string" ? answer || [] : [];
if (currentQuestion.content.multi) {
const currentAnswer = typeof answer !== "string" ? answer || [] : [];
try {
await sendAnswer({
questionId: currentQuestion.id,
body: currentAnswer.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId],
qid: quizId,
});
updateAnswer(
currentQuestion.id,
currentAnswer.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId],
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");
}
return;
}
try {
await sendAnswer({
questionId: currentQuestion.id,
body: currentAnswer.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId],
body: currentQuestion.content.variants[index].answer,
qid: quizId,
});
updateAnswer(
currentQuestion.id,
currentAnswer.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId],
currentQuestion.content.variants[index].points || 0
updateAnswer(currentQuestion.id, variantId,
answer === variantId ? 0
:
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");
}
return;
}
try {
await sendAnswer({
questionId: currentQuestion.id,
body: currentQuestion.content.variants[index].answer,
qid: quizId,
});
updateAnswer(currentQuestion.id, variantId,
answer === variantId ? 0
:
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");
}
if (answer === variantId) {
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");
}
deleteAnswer(currentQuestion.id);
if (answer === variantId) {
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");
}
deleteAnswer(currentQuestion.id);
}
setReadySend(true)
}
}}
/>
);