121 lines
4.1 KiB
TypeScript
121 lines
4.1 KiB
TypeScript
"use client";
|
||
import QuizQuestion from "./QuizQuestion";
|
||
import { Queries } from "@/api/queries";
|
||
import { v4 } from "uuid";
|
||
import { Dispatch, useContext, useEffect, useState } from "react";
|
||
import { IQuizQuestions, Question } from "@/models/quizQuestions.model";
|
||
import QuizContext from "@/context/QuizContext";
|
||
import { useSteps } from "@/store/store";
|
||
|
||
interface IProps {
|
||
setQuizFinished: Dispatch<boolean>;
|
||
quizFinished: boolean;
|
||
initialQuestionsData: IQuizQuestions;
|
||
paramsId?: string;
|
||
}
|
||
|
||
const QuizQuestionList = ({
|
||
setQuizFinished,
|
||
quizFinished,
|
||
initialQuestionsData,
|
||
paramsId,
|
||
}: IProps) => {
|
||
const { quizSearchData } = useContext(QuizContext).quizSearchContext;
|
||
const { step } = useSteps();
|
||
const [questionData, setQuestionsData] = useState<Question[] | undefined>(
|
||
initialQuestionsData.data.questions
|
||
? initialQuestionsData.data.questions
|
||
: initialQuestionsData.data.steps
|
||
? initialQuestionsData.data.steps[0].questions
|
||
: []
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (paramsId && !quizFinished) {
|
||
const interval = setInterval(() => {
|
||
Queries.getQuiz(paramsId).then((res) => {
|
||
if (res.data.questions) {
|
||
setQuestionsData(res.data.questions);
|
||
res.data.questions.map((question) =>
|
||
question.status === "active" || question.status === "new"
|
||
? setQuizFinished(false)
|
||
: setQuizFinished(true)
|
||
);
|
||
} else if (res.data.steps && res.data.steps?.length > 0) {
|
||
setQuestionsData(res.data.steps[0].questions);
|
||
for (let i = 0; i < res.data.steps.length; i++) {
|
||
res.data.steps[i].questions.map((question) =>
|
||
question.status === "active" || question.status === "new"
|
||
? setQuizFinished(false)
|
||
: setQuizFinished(true)
|
||
);
|
||
}
|
||
}
|
||
});
|
||
}, 60000);
|
||
return () => clearInterval(interval);
|
||
}
|
||
|
||
if (!paramsId && !quizFinished) {
|
||
const interval = setInterval(() => {
|
||
Queries.getQuizQuestions().then((res) => {
|
||
if (res.data.questions) {
|
||
setQuestionsData(res.data.questions);
|
||
res.data.questions.map((question) =>
|
||
question.status === "active" || question.status === "new"
|
||
? setQuizFinished(false)
|
||
: setQuizFinished(true)
|
||
);
|
||
} else if (res.data.steps && res.data.steps?.length > 0) {
|
||
setQuestionsData(res.data.steps[0].questions);
|
||
for (let i = 0; i < res.data.steps.length; i++) {
|
||
res.data.steps[i].questions.map((question) =>
|
||
question.status === "active" || question.status === "new"
|
||
? setQuizFinished(false)
|
||
: setQuizFinished(true)
|
||
);
|
||
}
|
||
}
|
||
});
|
||
}, 60000);
|
||
return () => clearInterval(interval);
|
||
}
|
||
}, [quizFinished]);
|
||
|
||
useEffect(() => {
|
||
if (initialQuestionsData.data.steps) {
|
||
const tapgyrQuestions = initialQuestionsData.data.steps.find(
|
||
(item) => item.tapgyr === step
|
||
);
|
||
setQuestionsData(tapgyrQuestions?.questions);
|
||
}
|
||
}, [step]);
|
||
|
||
return (
|
||
<div className="flex flex-col gap-[40px] md:gap-[160px]">
|
||
{quizSearchData && Object.values(quizSearchData.data).length === 0 ? (
|
||
<h2 className="text-textDarkt text-center text-[28px] ms:text-[32px] flex items-center justify-center bg-fillBGBlockbg px-[20px] py-[40px] md:px-[40px] md:py-[80px] rounded-[24px]">
|
||
Вы не участвовали ни в одном вопросе
|
||
</h2>
|
||
) : questionData ? (
|
||
questionData.map((question, id) =>
|
||
question.status !== "new" ? (
|
||
<QuizQuestion
|
||
score={question.score}
|
||
questionId={question.id}
|
||
questionNumber={id}
|
||
finished={question.status}
|
||
question={question.question}
|
||
key={v4()}
|
||
startsAt={question.starts_at}
|
||
endsAt={question.ends_at}
|
||
/>
|
||
) : null
|
||
)
|
||
) : null}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default QuizQuestionList;
|