fix: unwrap async params with React.use() for Next.js 15 compatibility

All client-side dynamic route pages were accessing params directly
instead of unwrapping the Promise, which Next.js 15 now requires.

app/(main)/[page_id]/page.tsx

@@ -13,21 +13,22 @@ import { dehydrate, useQuery } from '@tanstack/react-query';
 import { data } from 'autoprefixer';
 import Head from 'next/head';
 import Image from 'next/image';
-import { useContext } from 'react';
+import { use, useContext } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
 
 interface IParams {
-  params: {
+  params: Promise<{
     page_id: string;
-  };
+  }>;
 }
 
 const PageItem = ({ params }: IParams) => {
+  const { page_id } = use(params);
   const responsive = useMediaQuery('(max-width: 768px)');
 
   const { data, isFetching, error } = useQuery({
     queryKey: ['page_item'],
-    queryFn: () => Queries.getPage(params.page_id),
+    queryFn: () => Queries.getPage(page_id),
   });
 
   if (isFetching) return <Loader height={'100%'} />;

app/(main)/quiz/[quiz_id]/page.tsx

@@ -13,16 +13,17 @@ import { useQuizSearchActive, useSteps } from "@/store/store";
 import { Validator } from "@/utils/validator";
 import Image from "next/image";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { use, useEffect, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
 interface IParams {
-  params: {
+  params: Promise<{
     quiz_id: string;
-  };
+  }>;
 }
 
 const page = ({ params }: IParams) => {
+  const { quiz_id } = use(params);
   const [quizFinished, setQuizFinished] = useState<boolean>(false);
   const [data, setData] = useState<IQuizQuestions>();
   const { active } = useQuizSearchActive();
@@ -31,7 +32,7 @@ const page = ({ params }: IParams) => {
   useEffect(() => {
     const local_info = sessionStorage.getItem("TURKMENTV_QUIZ_INFO");
 
-    if (!params.quiz_id) {
+    if (!quiz_id) {
       Queries.getQuizQuestions().then((res) => {
         setData(res);
         if (res.data.questions) {
@@ -63,7 +64,7 @@ const page = ({ params }: IParams) => {
         }
       });
     } else {
-      Queries.getQuiz(params.quiz_id).then((res) => {
+      Queries.getQuiz(quiz_id).then((res) => {
         setData(res);
         if (res.data.questions) {
           res.data.questions.map((question) =>
@@ -201,7 +202,7 @@ const page = ({ params }: IParams) => {
                           </button>
                         ))}
                         <Link
-                          href={`/quiz/${params.quiz_id}/results`}
+                          href={`/quiz/${quiz_id}/results`}
                           className={`flex-1 py-[5px] rounded-lg transition-all duration-300 bg-lightPrimaryContainer text-center text-textLight`}
                         >
                           Netije
@@ -212,7 +213,7 @@ const page = ({ params }: IParams) => {
 
                 {data?.data && !active ? (
                   <QuizQuestionList
-                    paramsId={params.quiz_id}
+                    paramsId={quiz_id}
                     initialQuestionsData={data}
                     setQuizFinished={setQuizFinished}
                     quizFinished={quizFinished}

app/(main)/quiz/[quiz_id]/results/page.tsx

@@ -8,15 +8,16 @@ import QuizTapgyrWinners from "@/components/quiz/QuizTapgyrWinners";
 import { Data } from "@/models/quizQuestions.model";
 import { useQuizResults } from "@/store/store";
 import { notFound } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import React, { use, useEffect, useState } from "react";
 
 interface IParams {
-  params: {
+  params: Promise<{
     quiz_id: string;
-  };
+  }>;
 }
 
 const Page = ({ params }: IParams) => {
+  const { quiz_id } = use(params);
   const [data, setData] = useState<Data>();
   const [tab, setTab] = useState<number | string>(0);
   const [loading, setLoading] = useState<boolean>(false);
@@ -26,7 +27,7 @@ const Page = ({ params }: IParams) => {
     const local_info = sessionStorage.getItem("TURKMENTV_QUIZ_RESULTS");
     if (!resultData.length && !error) {
       setLoading(true);
-      Queries.getQuizById(params.quiz_id)
+      Queries.getQuizById(quiz_id)
         .then((res) => {
           setData(res.data);
           if (res.data.steps?.length) {
@@ -68,7 +69,7 @@ const Page = ({ params }: IParams) => {
     <section className="container py-[40px]">
       <div className="flex flex-col w-full py-[40px] gap-[80px]">
         <QuizHeader data={data} />
-        <QuizResultsSearch id={params.quiz_id} />
+        <QuizResultsSearch id={quiz_id} />
         <QuizResultsTabs
           steps={data?.steps ? data?.steps : []}
           tab={tab}
@@ -77,7 +78,7 @@ const Page = ({ params }: IParams) => {
         />
         {tab === "results" && (
           <QuizTapgyrResults
-            id={params.quiz_id}
+            id={quiz_id}
             steps={
               data?.steps ? data?.steps?.map((item) => String(item.tapgyr)) : []
             }
@@ -89,7 +90,7 @@ const Page = ({ params }: IParams) => {
           tab !== "results" && (
             <QuizTapgyrWinners
               key={data.steps[Number(tab)].tapgyr}
-              id={params.quiz_id}
+              id={quiz_id}
               tapgyr={data.steps[Number(tab)].tapgyr}
               questions={data.steps[Number(tab)].questions}
             />

app/(main)/vote/[vote_id]/page.tsx

@@ -1,20 +1,23 @@
 'use client';
 import ParticipantsList from '@/components/vote/ParticipantsList';
 import VoteProvider from '@/providers/VoteProvider';
+import { use } from 'react';
 
 interface IParams {
-  params: {
+  params: Promise<{
     vote_id: string;
-  };
+  }>;
 }
 
 const page = ({ params }: IParams) => {
+  const { vote_id } = use(params);
+
   return (
     <main className="pt-[60px] pb-[120px]">
       <div className="container">
         <VoteProvider>
           <div className="flex flex-col items-center w-full">
-            <ParticipantsList vote_id={params.vote_id} />
+            <ParticipantsList vote_id={vote_id} />
           </div>
         </VoteProvider>
       </div>

app/(prizes)/prizes/[user_id]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 import PrizeCard from '@/components/prizes/PrizeCard';
-import { useState, useEffect } from 'react';
+import { use, useState, useEffect } from 'react';
 import axios from 'axios';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { GiftsType } from '@/typings/gifts/gifts.type';
@@ -15,7 +15,8 @@ interface Prize {
   description: string;
 }
 
-const PrizesPage = ({ params }: { params: { user_id: string } }) => {
+const PrizesPage = ({ params }: { params: Promise<{ user_id: string }> }) => {
+  const { user_id } = use(params);
   const [selectedPrize, setSelectedPrize] = useState<null | number>(null);
   const queryClient = useQueryClient();
   const router = useRouter();
@@ -23,10 +24,10 @@ const PrizesPage = ({ params }: { params: { user_id: string } }) => {
 
   // Fetching data using TanStack Query
   const { data, isLoading, error } = useQuery<GiftsType, Error>({
-    queryKey: [`gifts-${params.user_id}`, params.user_id],
+    queryKey: [`gifts-${user_id}`, user_id],
     queryFn: () =>
       axios
-        .get(`https://sms.turkmentv.gov.tm/api/gifts/${params.user_id}`)
+        .get(`https://sms.turkmentv.gov.tm/api/gifts/${user_id}`)
         .then((response) => response.data),
   });
 
@@ -90,7 +91,7 @@ const PrizesPage = ({ params }: { params: { user_id: string } }) => {
               }
               setSelectedPrize={setSelectedPrize}
               id={prize.id}
-              code={params.user_id}
+              code={user_id}
               {...prize}
             />
           ))}