From 94a4df4ff243cb46328a3933a50636245cda0c5b Mon Sep 17 00:00:00 2001 From: Ilgeldi Date: Fri, 14 Mar 2025 15:46:10 +0500 Subject: [PATCH] fix: quiz ui, and quiz logic --- app/(main)/quiz/[quiz_id]/results/page.tsx | 2 + components/quiz/QuizResultsSearch.tsx | 78 ++++++++++++++++++++ components/quiz/QuizTapgyrResults.tsx | 81 ++++---------------- components/quiz/QuizTapgyrWinners.tsx | 86 +++++----------------- store/store.ts | 25 +++++++ 5 files changed, 138 insertions(+), 134 deletions(-) create mode 100644 components/quiz/QuizResultsSearch.tsx diff --git a/app/(main)/quiz/[quiz_id]/results/page.tsx b/app/(main)/quiz/[quiz_id]/results/page.tsx index d67b124..f78dcac 100644 --- a/app/(main)/quiz/[quiz_id]/results/page.tsx +++ b/app/(main)/quiz/[quiz_id]/results/page.tsx @@ -1,6 +1,7 @@ "use client"; import { Queries } from "@/api/queries"; import QuizHeader from "@/components/quiz/QuizHeader"; +import QuizResultsSearch from "@/components/quiz/QuizResultsSearch"; import QuizTapgyrResults from "@/components/quiz/QuizTapgyrResults"; import QuizTapgyrWinners from "@/components/quiz/QuizTapgyrWinners"; import { Data } from "@/models/quizQuestions.model"; @@ -26,6 +27,7 @@ const Page = ({ params }: IParams) => {
+ { + const [phone, setPhone] = useState(""); + const { setError, setResultData } = useQuizResults(); + const { setLoading } = useResultsLoading(); + + const handleSearchSubmit = async (event: any) => { + if (event.key === "Enter" && phone.length === 8) { + event.preventDefault(); + try { + setLoading(true); + const response = await fetch( + `https://sms.turkmentv.gov.tm/api/quiz/${id}/search_netije`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ phone }), + } + ); + + // Handle the response as needed + const data = await response.json(); + setLoading(false); + if (!data.error) { + setResultData([data.data]); + } else { + setResultData([]); + setError("Telefon belgisi tapylmady"); + } + } catch (error) { + console.log(error); + } + } + }; + + return ( +
+

+ Öz jogaplaryňyzy görüň +

+
+ + + + setPhone(e.target.value)} + onKeyDown={(e) => handleSearchSubmit(e)} + maxLength={8} + minLength={8} + /> +
+
+ ); +}; + +export default QuizResultsSearch; diff --git a/components/quiz/QuizTapgyrResults.tsx b/components/quiz/QuizTapgyrResults.tsx index 4c701fe..2af5b79 100644 --- a/components/quiz/QuizTapgyrResults.tsx +++ b/components/quiz/QuizTapgyrResults.tsx @@ -4,15 +4,16 @@ import { Datum, ISearchNetije } from "@/models/quizQuestionsWinners.model"; import { notFound } from "next/navigation"; import React, { useEffect, useState } from "react"; import Loader from "../Loader"; +import { useQuizResults, useResultsLoading } from "@/store/store"; const padding = "py-4"; const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => { const [data, setData] = useState([]); + const { error, resultData } = useQuizResults(); const [loading, setLoading] = useState(false); - const [phone, setPhone] = useState(""); + const searchLoading = useResultsLoading((state) => state.loading); const [total, setTotal] = useState(0); - const [error, setError] = useState(""); const [nextPageQueries, setQueries] = useState<{ limit: number; offset: number; @@ -52,78 +53,26 @@ const QuizTapgyrResults = ({ id, steps }: { id: string; steps: string[] }) => { } } - const handleSearchSubmit = async (event: any) => { - if (event.key === "Enter" && phone.length === 8) { - event.preventDefault(); - try { - setLoading(true); - const response = await fetch( - `https://sms.turkmentv.gov.tm/api/quiz/${id}/search_netije`, - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ phone }), - } - ); - - // Handle the response as needed - const data = await response.json(); - setLoading(false); - if (!data.error) { - setData([data.data]); - setTotal(0); - } else { - setData([]); - setError("Telefon belgisi tapylmady"); - } - } catch (error) { - console.log(error); - } - } - }; - useEffect(() => { - getData(); - }, []); + if (!resultData.length && !error) { + getData(); + } else if (resultData.length) { + setData(resultData); + setTotal(0); + } else if (error) { + setTotal(0); + setData([]); + } + }, [resultData]); return (
-
+

Netijeler

-
- - - - setPhone(e.target.value)} - onKeyDown={(e) => handleSearchSubmit(e)} - maxLength={8} - minLength={8} - /> -
- {data.length > 0 && !loading ? ( + {data.length > 0 && !loading && !searchLoading ? ( // Table Head
diff --git a/components/quiz/QuizTapgyrWinners.tsx b/components/quiz/QuizTapgyrWinners.tsx index 70b670e..0b77b1c 100644 --- a/components/quiz/QuizTapgyrWinners.tsx +++ b/components/quiz/QuizTapgyrWinners.tsx @@ -9,6 +9,7 @@ import { import { notFound } from "next/navigation"; import React, { useEffect, useState } from "react"; import Loader from "../Loader"; +import { useQuizResults, useResultsLoading } from "@/store/store"; const padding = "py-4"; @@ -20,10 +21,10 @@ interface IProps { const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => { const [data, setData] = useState([]); + const { error, resultData } = useQuizResults(); const [loading, setLoading] = useState(false); - const [phone, setPhone] = useState(""); + const searchLoading = useResultsLoading((state) => state.loading); const [total, setTotal] = useState(0); - const [error, setError] = useState(""); const [nextPageQueries, setQueries] = useState<{ limit: number; offset: number; @@ -64,78 +65,26 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => { } } - const handleSearchSubmit = async (event: any) => { - if (event.key === "Enter" && phone.length === 8) { - event.preventDefault(); - try { - setLoading(true); - const response = await fetch( - `https://sms.turkmentv.gov.tm/api/quiz/${id}/search_netije`, - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ phone }), - } - ); - - // Handle the response as needed - const data = await response.json(); - setLoading(false); - if (!data.error) { - setData([data.data]); - setTotal(0); - } else { - setData([]); - setError("Telefon belgisi tapylmady"); - } - } catch (error) { - console.log(error); - } - } - }; - useEffect(() => { - getData(); - }, []); + if (!resultData.length && !error) { + getData(); + } else if (resultData.length) { + setData(resultData); + setTotal(0); + } else if (error) { + setTotal(0); + setData([]); + } + }, [resultData]); return (
-
+

Tapgyr {tapgyr}

-
- - - - setPhone(e.target.value)} - onKeyDown={(e) => handleSearchSubmit(e)} - maxLength={8} - minLength={8} - /> -
- {data.length > 0 && !loading ? ( + {data.length > 0 && !loading && !searchLoading ? ( @@ -187,8 +136,9 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => { (winner as Datum).correct_answers_time === (data[id - 1] as Datum).correct_answers_time ? id - : (winner as ISearchNetije).place - ? (winner as ISearchNetije).place + : (winner as ISearchNetije).tapgyr_breakdown + ? (winner as ISearchNetije).tapgyr_breakdown[tapgyr - 1] + .tapgyr_place : id + 1} {/* Phone number */} diff --git a/store/store.ts b/store/store.ts index 013d39d..db5c176 100644 --- a/store/store.ts +++ b/store/store.ts @@ -1,3 +1,4 @@ +import { ISearchNetije } from "@/models/quizQuestionsWinners.model"; import { create } from "zustand"; interface ILotteryStatus { @@ -15,6 +16,18 @@ interface IStep { setStep: (value: number | null) => void; } +interface ILoading { + loading: boolean; + setLoading: (value: boolean) => void; +} + +interface IQuizResults { + resultData: ISearchNetije[]; + setResultData: (value: ISearchNetije[]) => void; + error: string; + setError: (value: string) => void; +} + export const useLotteryStatus = create((set) => ({ status: "Upcoming", setStatus: (value: "Upcoming" | "Finished" | "Ongoing") => @@ -30,3 +43,15 @@ export const useSteps = create((set) => ({ step: null, setStep: (value: number | null) => set({ step: value }), })); + +export const useQuizResults = create((set) => ({ + resultData: [], + setResultData: (value: ISearchNetije[]) => set({ resultData: value }), + error: "", + setError: (value: string) => set({ error: value }), +})); + +export const useResultsLoading = create((set) => ({ + loading: false, + setLoading: (value: boolean) => set({ loading: value }), +}));