From 30dd824526e744f1ece2184cc65e6cd3258d1808 Mon Sep 17 00:00:00 2001 From: Ilgeldi Date: Fri, 7 Mar 2025 15:18:56 +0500 Subject: [PATCH] quiz[id]/netije route added --- api/queries.ts | 102 ++++++- app/(main)/quiz/[quiz_id]/page.tsx | 100 +++++-- app/(main)/quiz/[quiz_id]/results/page.tsx | 43 +++ app/(main)/quiz/active/page.tsx | 43 +-- components/VideoPlayer.tsx | 4 +- components/quiz/QuizHeader.tsx | 46 +++ components/quiz/QuizQuestionList.tsx | 120 ++++---- components/quiz/QuizSearch.tsx | 3 +- components/quiz/QuizTapgyrResults.tsx | 313 +++++++++++++++++++++ components/quiz/QuizTapgyrWinners.tsx | 309 ++++++++++++++++++++ components/quiz/QuizWinnerTable.tsx | 9 +- models/quizQuestions.model.ts | 7 +- models/quizQuestionsWinners.model.ts | 9 + notes.txt | 0 routes.ts | 1 + store/store.ts | 10 + 16 files changed, 991 insertions(+), 128 deletions(-) create mode 100644 app/(main)/quiz/[quiz_id]/results/page.tsx create mode 100644 components/quiz/QuizHeader.tsx create mode 100644 components/quiz/QuizTapgyrResults.tsx create mode 100644 components/quiz/QuizTapgyrWinners.tsx create mode 100644 notes.txt diff --git a/api/queries.ts b/api/queries.ts index 23a23a3..35f8d88 100644 --- a/api/queries.ts +++ b/api/queries.ts @@ -191,6 +191,12 @@ export class Queries { }).then((res) => res.json().then((res) => res as IQuizQuestions)); } + public static async getQuizById(quiz_id: string) { + return await fetch(`${baseUrl.QUIZ_SRC}${routes.getQuiz(quiz_id)}`, { + next: { revalidate: 3600 }, + }).then((res) => res.json().then((res) => res)); + } + public static async getQuizHistory( id: number ): Promise { @@ -289,17 +295,77 @@ export const getTossData = async ({ } }; -export const getQuizWinnersById = async (id: number) => { +export const getQuizNetijeData = async (id: string) => { try { const res = await fetch( - `${baseUrl.QUIZ_SRC}${routes.getQuizQuestionsWinners(id)}`, + `${baseUrl.QUIZ_SRC}${routes.getQuizNetijeWinners(id)}`, { - next: { revalidate: 3600 }, + next: { + revalidate: 300, + tags: ["netije"], + }, } ); + if (!res.ok) { + return undefined; + } + + const result = await res.json(); + return result; + } catch (err) { + console.log(err); + } +}; + +export const getNextQuizNetijeData = async ( + id: string, + limit: number, + offset: number +) => { + try { + const res = await fetch( + `${baseUrl.QUIZ_SRC}${routes.getQuizNetijeWinners( + id + )}?limit=${limit}&offset=${offset}`, + { + next: { + revalidate: 300, + tags: ["netije"], + }, + } + ); + + if (!res.ok) { + return undefined; + } + + const result = await res.json(); + return result; + } catch (err) { + console.log(err); + } +}; + +export const getQuizWinnersById = async (id: number, step?: number) => { + try { + const res = step + ? await fetch( + `${baseUrl.QUIZ_SRC}${routes.getQuizQuestionsWinners( + id + )}?tapgyr=${step}`, + { + next: { revalidate: 3600 }, + } + ) + : await fetch( + `${baseUrl.QUIZ_SRC}${routes.getQuizQuestionsWinners(id)}`, + { + next: { revalidate: 3600 }, + } + ); + const result = await res.json(); - console.log(result); return result as IQuizQuestionsWinners; } catch (err) { @@ -310,17 +376,27 @@ export const getQuizWinnersById = async (id: number) => { export const getNextQuizWinnners = async ( id: number, limit: number, - offset: number + offset: number, + step?: number ) => { try { - const res = await fetch( - `${baseUrl.QUIZ_SRC}${routes.getQuizQuestionsWinners( - id - )}?limit=${limit}&offset=${offset}`, - { - next: { revalidate: 3600 }, - } - ); + const res = step + ? await fetch( + `${baseUrl.QUIZ_SRC}${routes.getQuizQuestionsWinners( + id + )}?tapgyr=${step}&limit=${limit}&offset=${offset}`, + { + next: { revalidate: 3600 }, + } + ) + : await fetch( + `${baseUrl.QUIZ_SRC}${routes.getQuizQuestionsWinners( + id + )}?limit=${limit}&offset=${offset}`, + { + next: { revalidate: 3600 }, + } + ); const result = await res.json(); console.log(result); diff --git a/app/(main)/quiz/[quiz_id]/page.tsx b/app/(main)/quiz/[quiz_id]/page.tsx index f824d4b..d78feb4 100644 --- a/app/(main)/quiz/[quiz_id]/page.tsx +++ b/app/(main)/quiz/[quiz_id]/page.tsx @@ -2,19 +2,18 @@ import { Queries } from "@/api/queries"; import Loader from "@/components/Loader"; -import QuizQuestion from "@/components/quiz/QuizQuestion"; import QuizQuestionList from "@/components/quiz/QuizQuestionList"; import QuizSearch from "@/components/quiz/QuizSearch"; import QuizTable from "@/components/quiz/QuizTable"; import QuizWinnerTable from "@/components/quiz/QuizWinnerTable"; import GradientTitle from "@/components/vote/GradientTitle"; -import QuizContext from "@/context/QuizContext"; -import { IQuizQuestions, Question } from "@/models/quizQuestions.model"; +import { IQuizQuestions } from "@/models/quizQuestions.model"; import QuizProvider from "@/providers/QuizProvider"; -import { useQuizSearchActive } from "@/store/store"; +import { useQuizSearchActive, useSteps } from "@/store/store"; import { Validator } from "@/utils/validator"; import Image from "next/image"; -import { useContext, useEffect, useState } from "react"; +import Link from "next/link"; +import { useEffect, useState } from "react"; import { useMediaQuery } from "usehooks-ts"; interface IParams { @@ -27,35 +26,48 @@ const page = ({ params }: IParams) => { const [quizFinished, setQuizFinished] = useState(false); const [data, setData] = useState(); const { active } = useQuizSearchActive(); - - // const { data, error, isFetching } = useQuery( - // ['quiz_questions'], - // () => Queries.getQuizQuestions(), - // { - // keepPreviousData: true, - // }, - // ); + const { step, setStep } = useSteps(); useEffect(() => { if (!params.quiz_id) { Queries.getQuizQuestions().then((res) => { setData(res); - res - ? res.data.questions[res.data.questions.length - 1].status === - "closed" - ? setQuizFinished(true) - : setQuizFinished(false) - : null; + if (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) { + setStep(res.data.steps[0].tapgyr); + 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) + ); + } + } }); } else { Queries.getQuiz(params.quiz_id).then((res) => { setData(res); - res - ? res.data.questions[res.data.questions.length - 1]?.status === - "closed" - ? setQuizFinished(true) - : setQuizFinished(false) - : null; + if (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) { + setStep(res.data.steps[0].tapgyr); + 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) + ); + } + } }); } }, []); @@ -129,6 +141,37 @@ const page = ({ params }: IParams) => {
+ {data.data.has_steps !== 0 && data.data.steps && ( +
+

+ Tapgyr +

+
+ {data.data.steps.map((item) => ( + + ))} + + Netije + +
+
+ )} + {data?.data && !active ? ( { /> ) : null} - {data?.data.id && quizFinished ? ( + {data?.data.id && quizFinished && data.data.has_steps === 0 ? ( ) : null} - {data?.data.id && ( + {data?.data.id && data.data.has_steps === 0 && ( )}
diff --git a/app/(main)/quiz/[quiz_id]/results/page.tsx b/app/(main)/quiz/[quiz_id]/results/page.tsx new file mode 100644 index 0000000..cbd4108 --- /dev/null +++ b/app/(main)/quiz/[quiz_id]/results/page.tsx @@ -0,0 +1,43 @@ +"use client"; +import { Queries } from "@/api/queries"; +import QuizHeader from "@/components/quiz/QuizHeader"; +import QuizTapgyrResults from "@/components/quiz/QuizTapgyrResults"; +import QuizTapgyrWinners from "@/components/quiz/QuizTapgyrWinners"; +import { Data } from "@/models/quizQuestions.model"; +import React, { useEffect, useState } from "react"; + +interface IParams { + params: { + quiz_id: string; + }; +} + +const Page = ({ params }: IParams) => { + const [data, setData] = useState(); + + useEffect(() => { + Queries.getQuizById(params.quiz_id).then((res) => setData(res.data)); + }, []); + + return ( +
+
+ + String(item.tapgyr)) : [] + } + /> + {data?.has_steps && + data.steps && + data.steps?.length > 0 && + data.steps.map((step) => ( + + ))} +
+
+ ); +}; + +export default Page; diff --git a/app/(main)/quiz/active/page.tsx b/app/(main)/quiz/active/page.tsx index bde3e56..b253bd1 100644 --- a/app/(main)/quiz/active/page.tsx +++ b/app/(main)/quiz/active/page.tsx @@ -1,15 +1,15 @@ -'use client'; -import { Queries } from '@/api/queries'; -import QuizQuestionList from '@/components/quiz/QuizQuestionList'; -import QuizSearch from '@/components/quiz/QuizSearch'; -import QuizTable from '@/components/quiz/QuizTable'; -import QuizWinnerTable from '@/components/quiz/QuizWinnerTable'; -import { IQuizQuestions, Question } from '@/models/quizQuestions.model'; -import QuizProvider from '@/providers/QuizProvider'; -import { Validator } from '@/utils/validator'; -import Image from 'next/image'; -import { useEffect, useState } from 'react'; -import { useMediaQuery } from 'usehooks-ts'; +"use client"; +import { Queries } from "@/api/queries"; +import QuizQuestionList from "@/components/quiz/QuizQuestionList"; +import QuizSearch from "@/components/quiz/QuizSearch"; +import QuizTable from "@/components/quiz/QuizTable"; +import QuizWinnerTable from "@/components/quiz/QuizWinnerTable"; +import { IQuizQuestions, Question } from "@/models/quizQuestions.model"; +import QuizProvider from "@/providers/QuizProvider"; +import { Validator } from "@/utils/validator"; +import Image from "next/image"; +import { useEffect, useState } from "react"; +import { useMediaQuery } from "usehooks-ts"; const page = () => { const [quizFinished, setQuizFinished] = useState(false); @@ -18,19 +18,19 @@ const page = () => { useEffect(() => { Queries.getQuizQuestions().then((res) => { setData(res); - res - ? res.data.questions[res.data.questions.length - 1]?.status === 'closed' + res && res.data.questions + ? res.data.questions[res.data.questions.length - 1]?.status === "closed" ? setQuizFinished(true) : setQuizFinished(false) : null; }); }, []); - const mobile = useMediaQuery('(max-width: 768px)'); + const mobile = useMediaQuery("(max-width: 768px)"); return (
- {typeof data !== 'string' ? ( + {typeof data !== "string" ? (
@@ -55,7 +55,7 @@ const page = () => { ? data.data.banner_mobile : data.data.banner } - alt={'banner'} + alt={"banner"} unoptimized unselectable="off" fill @@ -64,7 +64,7 @@ const page = () => { ) : ( {'banner'} { ) : null}
- {data?.data.id && quizFinished ? : null} + {data?.data.id && quizFinished ? ( + + ) : null}
{data?.data ? ( @@ -96,9 +98,8 @@ const page = () => { ) : null} */} {data?.data.id && ( )}
diff --git a/components/VideoPlayer.tsx b/components/VideoPlayer.tsx index 41a3c17..53266ed 100644 --- a/components/VideoPlayer.tsx +++ b/components/VideoPlayer.tsx @@ -96,7 +96,9 @@ const VideoPlayer = ({ maxHeight, maxWidth, video_id }: IProps) => {