299 lines
15 KiB
TypeScript
299 lines
15 KiB
TypeScript
'use client';
|
||
import { Queries } from '@/api/queries';
|
||
|
||
import { v4 } from 'uuid';
|
||
import { useState, useEffect, useContext } from 'react';
|
||
import { IQuizQuestionsWinners } from '@/models/quizQuestionsWinners.model';
|
||
import QuizContext from '@/context/QuizContext';
|
||
|
||
interface IProps {
|
||
quizId: number;
|
||
quizFinished: boolean;
|
||
}
|
||
|
||
const QuizWinnerTable = ({ quizId, quizFinished }: IProps) => {
|
||
// const [questionsData, setQuestionsData] = useState<IQuizQuestions>();
|
||
const [winnersData, setWinnersData] = useState<IQuizQuestionsWinners>();
|
||
const { questionsData } = useContext(QuizContext).quizQuestionsContext;
|
||
|
||
useEffect(() => {
|
||
if (quizFinished) {
|
||
// Queries.getQuizQuestions().then((res) => {
|
||
// setQuestionsData(res);
|
||
// });
|
||
Queries.getQuizWinners(quizId).then((res) => {
|
||
setWinnersData(res);
|
||
});
|
||
}
|
||
}, []);
|
||
// const { data, error, isFetching } = useQuery({
|
||
// queryKey: ['quiz_questions_winners'],
|
||
// queryFn: () => Queries.getQuizWinners(quizId),
|
||
// keepPreviousData: true,
|
||
// });
|
||
|
||
// if (isFetching) return <Loader />;
|
||
// if (error) return <h1>{JSON.stringify(error)}</h1>;
|
||
|
||
return winnersData?.data.length != 0 ? (
|
||
<div className="flex flex-col justify-center items-center gap-[60px]">
|
||
<div className="flex flex-col gap-5 justify-center items-center w-full">
|
||
<h2 className="text-textBlack text-[28px] text-center md:text-left md:text-[32px] font-semibold">
|
||
Bäsleşigiň jemi
|
||
</h2>
|
||
<div className="table-desktop hidden sm:flex flex-col bg-fillTableHead rounded-[25px] shadow-quizButton overflow-hidden max-w-[1000px] w-full">
|
||
<div className="flex border-b border-fillTableStrokeTableHead">
|
||
{winnersData?.data[0].client_id ? (
|
||
<div className="text-center flex justify-center items-center text-base text-textBlack leading-[125%] font-semibold max-w-[54px] w-[100%] pl-6 pr-3 py-5">
|
||
<span>№</span>
|
||
</div>
|
||
) : null}
|
||
|
||
{winnersData?.data[0].client.phone ? (
|
||
<div className="text-center flex justify-center items-center text-base text-textBlack leading-[125%] font-semibold max-w-[176px] w-[100%] px-3 py-5">
|
||
<span>Gatnaşyjynyň tel. Beligisi</span>
|
||
</div>
|
||
) : null}
|
||
|
||
{winnersData?.data[0].client.answers.length != 0 ? (
|
||
<div className="text-center flex justify-center items-center text-base text-textBlack leading-[125%] font-semibold w-[100%] px-3 py-5">
|
||
<span>Soraglara näçinji jogap berdi</span>
|
||
</div>
|
||
) : null}
|
||
|
||
{winnersData?.data[0].total_score_of_client ? (
|
||
<div className="text-center flex justify-center items-center text-base text-textBlack leading-[125%] font-semibold max-w-[180px] w-[100%] px-3 py-5">
|
||
<span>Jogaplaryň jemi</span>
|
||
</div>
|
||
) : null}
|
||
{winnersData?.data[0].total_score_of_client ? (
|
||
<div className="text-center flex justify-center items-center text-base text-textBlack leading-[125%] font-semibold max-w-[180px] w-[100%] px-3 py-5">
|
||
<span>Utuklaryň jemi</span>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="">
|
||
{winnersData?.data.map((winner, id) => (
|
||
<div
|
||
className={`flex border-b border-fillTableStrokeTableRow ${
|
||
id % 2 === 0 ? 'bg-fillTableRow' : 'bg-fillTableRow2'
|
||
}`}
|
||
key={v4()}>
|
||
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[54px] w-[100%] pl-6 pr-3 py-5">
|
||
<span>{id + 1}</span>
|
||
</div>
|
||
{winnersData.data[0].client.phone ? (
|
||
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] font-semibold max-w-[176px] w-[100%] px-3 py-5">
|
||
<span>+{winner.client.phone}</span>
|
||
</div>
|
||
) : null}
|
||
{winnersData.data[0].client.answers.length != 0 ? (
|
||
<div className="flex justify-center items-center gap-6 text-base text-textGray leading-[125%] w-[100%] px-3 py-5">
|
||
{questionsData
|
||
? questionsData.map((question) => {
|
||
const matchingAnswer = winner.client.answers.find(
|
||
(answer) => answer.question_id === question.id,
|
||
);
|
||
return (
|
||
<span
|
||
key={v4()}
|
||
className={`text-sm font-semibold leading-[125%] ${
|
||
matchingAnswer && matchingAnswer.serial_number_for_correct != null
|
||
? 'text-fillGreen'
|
||
: matchingAnswer &&
|
||
matchingAnswer.serial_number_for_correct === null
|
||
? 'text-fillRed'
|
||
: 'text-textLight'
|
||
}`}>
|
||
{matchingAnswer && matchingAnswer.serial_number_for_correct != null
|
||
? matchingAnswer.serial_number_for_correct
|
||
: matchingAnswer &&
|
||
matchingAnswer.serial_number_for_correct === null
|
||
? 'X'
|
||
: '0'}
|
||
</span>
|
||
);
|
||
})
|
||
: null}
|
||
</div>
|
||
) : null}
|
||
|
||
{winnersData.data[0].total_score_of_client ? (
|
||
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[180px] w-[100%] px-3 py-3">
|
||
<span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] ">
|
||
{winner.correct_answers_time}
|
||
</span>
|
||
</div>
|
||
) : null}
|
||
{winnersData.data[0].total_score_of_client ? (
|
||
<div className="flex justify-center items-center text-base text-textBlack leading-[125%] max-w-[180px] w-[100%] px-3 py-3">
|
||
<span className="bg-fillOrange rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] text-white">
|
||
{winner.total_score_of_client}
|
||
</span>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="sm:hidden flex flex-col bg-fillTableHead rounded-[13px] shadow-quizButton overflow-hidden max-w-[1000px] w-full">
|
||
<div className="flex border-b border-fillTableStrokeTableHead p-2 gap-[8px]">
|
||
{winnersData?.data[0].client_id ? (
|
||
<div className="text-center flex items-center text-xs text-textBlack leading-[125%] font-semibold max-w-[14px] w-[100%]">
|
||
<span>№</span>
|
||
</div>
|
||
) : null}
|
||
|
||
{winnersData?.data[0].client.phone ? (
|
||
<div className="text-center flex justify-center items-center text-xs text-textBlack leading-[125%] font-semibold max-w-[107px] w-[100%]">
|
||
<span>Gatnaşyjynyň tel. Beligisi</span>
|
||
</div>
|
||
) : null}
|
||
|
||
{winnersData?.data[0].total_score_of_client ? (
|
||
<div className="text-center flex justify-center items-center text-xs text-textBlack leading-[125%] font-semibold max-w-[75px] w-[100%]">
|
||
<span>Балы за быстроту</span>
|
||
</div>
|
||
) : null}
|
||
{winnersData?.data[0].total_score_of_client ? (
|
||
<div className="text-center flex justify-center items-center text-xs text-textBlack leading-[125%] font-semibold max-w-[99px] w-[100%]">
|
||
<span>Utuklaryň jemi</span>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="">
|
||
{winnersData?.data.map((winner, id) => (
|
||
<div
|
||
className={`flex border-b border-fillTableStrokeTableRow items-center p-[8px] gap-[8px] ${
|
||
id % 2 === 0 ? 'bg-fillTableRow' : 'bg-fillTableRow2'
|
||
}`}
|
||
key={v4()}>
|
||
<div className="flex items-center text-base text-textBlack leading-[125%] max-w-[14px] w-[100%] ">
|
||
<span>{id + 1}</span>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-[8px] w-full">
|
||
<div className="flex gap-[8px] items-center">
|
||
{winnersData.data[0].client.phone ? (
|
||
<div className="flex items-center text-xs text-textBlack leading-[125%] font-semibold max-w-[107px] w-full">
|
||
<span>+{winner.client.phone}</span>
|
||
</div>
|
||
) : null}
|
||
|
||
{winnersData.data[0].total_score_of_client ? (
|
||
<div className="flex justify-center items-center text-xs text-textBlack leading-[125%] max-w-[75px] w-full">
|
||
<span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[24px] h-[24px] flex justify-center items-center text-xs leading-[125%] ">
|
||
{winner.correct_answers_time}
|
||
</span>
|
||
</div>
|
||
) : null}
|
||
{winnersData.data[0].total_score_of_client ? (
|
||
<div className="flex justify-center items-center text-xs text-textBlack leading-[125%] max-w-[99px] w-full">
|
||
<span className="bg-fillOrange rounded-full w-[24px] h-[24px] flex justify-center items-center text-xs leading-[125%] text-white">
|
||
{winner.total_score_of_client}
|
||
</span>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<div className="flex gap-[8px] items-center">
|
||
{winnersData?.data[0].client.answers.length != 0 ? (
|
||
<div className="flex justify-center items-center text-xs text-textLight leading-[125%] font-semibold w-fit">
|
||
<span>Soraglara näçinji jogap berdi :</span>
|
||
</div>
|
||
) : null}
|
||
{winnersData.data[0].client.answers.length != 0 ? (
|
||
<div className="flex justify-center items-center gap-[4px] text-xs text-textGray leading-[125%] w-fit">
|
||
{questionsData
|
||
? questionsData.map((question) => {
|
||
const matchingAnswer = winner.client.answers.find(
|
||
(answer) => answer.question_id === question.id,
|
||
);
|
||
return (
|
||
<span
|
||
key={v4()}
|
||
className={`text-sm font-semibold leading-[125%] ${
|
||
matchingAnswer &&
|
||
matchingAnswer.serial_number_for_correct != null
|
||
? 'text-fillGreen'
|
||
: matchingAnswer &&
|
||
matchingAnswer.serial_number_for_correct === null
|
||
? 'text-fillRed'
|
||
: 'text-textLight'
|
||
}`}>
|
||
{matchingAnswer &&
|
||
matchingAnswer.serial_number_for_correct != null
|
||
? matchingAnswer.serial_number_for_correct
|
||
: matchingAnswer &&
|
||
matchingAnswer.serial_number_for_correct === null
|
||
? 'X'
|
||
: '0'}
|
||
</span>
|
||
);
|
||
})
|
||
: null}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col gap-[20px] p-5 border border-strokeLightGray1 rounded-[25px] max-w-[1000px] w-full items-center justify-center">
|
||
<h3 className="text-[26px] text-textBlack font-semibold leading-[124%]">
|
||
Belgileriň düşündirilişi
|
||
</h3>
|
||
<div className="flex flex-col gap-[10px] justify-center md:items-center">
|
||
<div className="grid md:grid-cols-2 grid-cols-1 gap-y-[10px] gap-x-[26px]">
|
||
<div className="flex gap-[10px] items-center ">
|
||
<div className="bg-fillOrange rounded-full min-w-[32px] h-[32px] flex justify-center items-center">
|
||
<span className=" text-sm leading-[125%] text-white">100</span>
|
||
</div>
|
||
<span className="text-base leading-[120%] text-textLight w-full">
|
||
Bäsşeikde gazanylan utuklaryň jemi
|
||
</span>
|
||
</div>
|
||
<div className="flex gap-[10px] items-center ">
|
||
<div className="border border-fillBlue rounded-full min-w-[32px] h-[32px] flex justify-center items-center">
|
||
<span className="text-fillBlue text-sm leading-[125%] ">100</span>
|
||
</div>
|
||
|
||
<span className="text-base leading-[120%] text-textLight w-full">
|
||
Soraga jogaplaryň tertip belgisiniň jemi
|
||
</span>
|
||
</div>
|
||
<div className="flex gap-[10px] items-center">
|
||
<div className="flex justify-center items-center min-w-[32px]">
|
||
<span className="text-xl font-semibold leading-[120%] text-fillGreen ">1</span>
|
||
</div>
|
||
<span className="text-base leading-[120%] text-textLight">
|
||
Dogry jogaplara näçinji bolup jogap berdi
|
||
</span>
|
||
</div>
|
||
<div className="flex gap-[10px] items-center ">
|
||
<div className="flex justify-center items-center min-w-[32px]">
|
||
<span className="text-xl font-semibold leading-[120%] text-fillRed">X</span>
|
||
</div>
|
||
<span className="text-base leading-[120%] text-textLight">
|
||
Soraga nädogry jogap berdi
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-[10px] items-center ">
|
||
<div className="flex justify-center items-center min-w-[32px]">
|
||
<span className="text-xl font-semibold leading-[120%] text-textLight">0</span>
|
||
</div>
|
||
<span className="text-base leading-[120%] text-textLight">Soraga jogap ugratmady</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null;
|
||
};
|
||
|
||
export default QuizWinnerTable;
|