ui changes, fix errors
This commit is contained in:
Ilgeldi
parent
3b06c9baa9
commit
35fa202f61
|
|
@ -19,16 +19,25 @@ interface IParams {
|
|||
const Page = ({ params }: IParams) => {
|
||||
const [data, setData] = useState<Data>();
|
||||
const [tab, setTab] = useState<number | string>(0);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const { resultData, error } = useQuizResults();
|
||||
|
||||
useEffect(() => {
|
||||
if (!resultData.length && !error) {
|
||||
setLoading(true);
|
||||
Queries.getQuizById(params.quiz_id)
|
||||
.then((res) => setData(res.data))
|
||||
.catch(() => notFound());
|
||||
.then((res) => {
|
||||
setData(res.data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setLoading(false);
|
||||
notFound();
|
||||
});
|
||||
}
|
||||
}, [resultData, error]);
|
||||
|
||||
|
||||
return (
|
||||
<section className="container py-[40px]">
|
||||
<div className="flex flex-col w-full py-[40px] gap-[80px]">
|
||||
|
|
@ -38,6 +47,7 @@ const Page = ({ params }: IParams) => {
|
|||
steps={data?.steps ? data?.steps : []}
|
||||
tab={tab}
|
||||
setStep={setTab}
|
||||
loading={loading}
|
||||
/>
|
||||
{tab === "results" && (
|
||||
<QuizTapgyrResults
|
||||
|
|
|
|||
|
|
@ -17,11 +17,10 @@ const QuizHeader = ({ data }: { data: Data | undefined }) => {
|
|||
{(data?.banner || data?.banner_mobile) && (
|
||||
<>
|
||||
{data.banner_mobile && (
|
||||
<div className="w-full relative bg-[#E1E0FF] rounded-[8px] overflow-hidden md:hidden object-cover">
|
||||
<div className="w-full relative bg-[#E1E0FF] h-[100px] rounded-[8px] overflow-hidden md:hidden object-cover">
|
||||
<Image
|
||||
src={data.banner_mobile ? data.banner_mobile : data.banner}
|
||||
alt="banner"
|
||||
height={100}
|
||||
unselectable="off"
|
||||
className="object-cover"
|
||||
fill
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const QuizQuestion = ({
|
|||
{question}
|
||||
</h2>
|
||||
|
||||
<div className="flex flex-wrap justify-center md:justify-start md:gap-5 gap-[10px]">
|
||||
<div className="flex flex-wrap md:gap-5 gap-[10px]">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div
|
||||
className={`w-[18px] h-[18px] md:w-4 md:h-4 ${
|
||||
|
|
@ -121,7 +121,7 @@ const QuizQuestion = ({
|
|||
{question}
|
||||
</h2>
|
||||
|
||||
<div className="flex flex-wrap justify-center md:justify-start md:gap-5 gap-[10px]">
|
||||
<div className="flex flex-wrap md:gap-5 gap-[10px]">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div
|
||||
className={`w-[18px] h-[18px] md:w-4 md:h-4 ${
|
||||
|
|
|
|||
|
|
@ -8,39 +8,42 @@ interface IQuizTabProps {
|
|||
}[];
|
||||
setStep: React.Dispatch<React.SetStateAction<number | string>>;
|
||||
tab: number | string;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
function QuizResultsTabs({ steps, setStep, tab }: IQuizTabProps) {
|
||||
function QuizResultsTabs({ steps, setStep, tab, loading }: IQuizTabProps) {
|
||||
return (
|
||||
<div className="flex gap-[10px] w-full md:w-1/2 self-center">
|
||||
{steps.map((item) => (
|
||||
!loading && (
|
||||
<div className="flex gap-[10px] w-full md:w-1/2 self-center">
|
||||
{steps.map((item) => (
|
||||
<button
|
||||
onClick={() => {
|
||||
setStep(item.tapgyr - 1);
|
||||
}}
|
||||
key={item.tapgyr}
|
||||
className={`flex-1 py-[5px] rounded-lg transition-all duration-300 ${
|
||||
tab === item.tapgyr - 1
|
||||
? "bg-lightPrimary text-white"
|
||||
: "bg-lightPrimaryContainer text-textLight"
|
||||
}`}
|
||||
>
|
||||
{item.tapgyr}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => {
|
||||
setStep(item.tapgyr - 1);
|
||||
setStep("results");
|
||||
}}
|
||||
key={item.tapgyr}
|
||||
className={`flex-1 py-[5px] rounded-lg transition-all duration-300 ${
|
||||
tab === item.tapgyr - 1
|
||||
tab === "results"
|
||||
? "bg-lightPrimary text-white"
|
||||
: "bg-lightPrimaryContainer text-textLight"
|
||||
}`}
|
||||
>
|
||||
{item.tapgyr}
|
||||
Netije
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => {
|
||||
setStep("results");
|
||||
}}
|
||||
className={`flex-1 py-[5px] rounded-lg transition-all duration-300 ${
|
||||
tab === "results"
|
||||
? "bg-lightPrimary text-white"
|
||||
: "bg-lightPrimaryContainer text-textLight"
|
||||
}`}
|
||||
>
|
||||
Netije
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -137,8 +137,9 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
|
|||
(data[id - 1] as Datum).correct_answers_time
|
||||
? id
|
||||
: (winner as ISearchNetije).tapgyr_breakdown
|
||||
? (winner as ISearchNetije).tapgyr_breakdown[tapgyr - 1]
|
||||
.tapgyr_place
|
||||
? (winner as ISearchNetije).tapgyr_breakdown.find(
|
||||
(item) => item.tapgyr === tapgyr
|
||||
)?.tapgyr_place
|
||||
: id + 1}
|
||||
</th>
|
||||
{/* Phone number */}
|
||||
|
|
@ -191,7 +192,7 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
|
|||
? matchingAnswer.serial_number_for_correct
|
||||
: matchingAnswer && matchingAnswer?.score === 0
|
||||
? "X"
|
||||
: "0"}
|
||||
: "-"}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
|
|
@ -203,12 +204,12 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
|
|||
<span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] ">
|
||||
{(winner as Datum).correct_answers_time
|
||||
? (winner as Datum).correct_answers_time
|
||||
: (winner as ISearchNetije).tapgyr_breakdown[
|
||||
tapgyr - 1
|
||||
].tapgyr_total_nobat
|
||||
? (winner as ISearchNetije).tapgyr_breakdown[
|
||||
tapgyr - 1
|
||||
].tapgyr_total_nobat
|
||||
: (winner as ISearchNetije).tapgyr_breakdown.find(
|
||||
(item) => item.tapgyr === tapgyr
|
||||
)?.tapgyr_total_nobat
|
||||
? (winner as ISearchNetije).tapgyr_breakdown.find(
|
||||
(item) => item.tapgyr === tapgyr
|
||||
)?.tapgyr_total_nobat
|
||||
: "-"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -219,12 +220,12 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
|
|||
<span className="bg-fillOrange rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] text-white">
|
||||
{(winner as Datum).total_score_of_client
|
||||
? (winner as Datum).total_score_of_client
|
||||
: (winner as ISearchNetije).tapgyr_breakdown[
|
||||
tapgyr - 1
|
||||
].tapgyr_total_score
|
||||
? (winner as ISearchNetije).tapgyr_breakdown[
|
||||
tapgyr - 1
|
||||
].tapgyr_total_score
|
||||
: (winner as ISearchNetije).tapgyr_breakdown.find(
|
||||
(item) => item.tapgyr === tapgyr
|
||||
)?.tapgyr_total_score
|
||||
? (winner as ISearchNetije).tapgyr_breakdown.find(
|
||||
(item) => item.tapgyr === tapgyr
|
||||
)?.tapgyr_total_score
|
||||
: "-"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ const QuizWinnerTable = ({ quizId, questionsData }: IProps) => {
|
|||
: matchingAnswer &&
|
||||
matchingAnswer?.score === 0
|
||||
? "X"
|
||||
: "0"}
|
||||
: "-"}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
|
|
@ -237,7 +237,7 @@ const QuizWinnerTable = ({ quizId, questionsData }: IProps) => {
|
|||
? matchingAnswer.serial_number_for_correct
|
||||
: matchingAnswer && matchingAnswer?.score === 0
|
||||
? "X"
|
||||
: "0"}
|
||||
: "-"}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
|
|
@ -364,7 +364,7 @@ const QuizWinnerTable = ({ quizId, questionsData }: IProps) => {
|
|||
: matchingAnswer &&
|
||||
matchingAnswer?.score === 0
|
||||
? "X"
|
||||
: "0"}
|
||||
: "-"}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
|
|
@ -440,7 +440,7 @@ const QuizWinnerTable = ({ quizId, questionsData }: IProps) => {
|
|||
: matchingAnswer &&
|
||||
matchingAnswer?.score === 0
|
||||
? "X"
|
||||
: "0"}
|
||||
: "-"}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
Loading…
Reference in New Issue