fix: update dependencies API compatibility for build success

- Update revalidateTag to accept required profile parameter (Next.js 16)
- Change ReactPlayer url prop to src (react-player v3)
- Add initialPageParam to prefetchInfiniteQuery and useInfiniteQuery calls (TanStack Query v5)
- Update useMutation to object syntax with mutationFn (TanStack Query v5)
- Change isLoading to isPending for mutations (TanStack Query v5)
- Fix useOnClickOutside ref type casting (usehooks-ts)
- Update AnimationControls to LegacyAnimationControls (framer-motion v12)
- Change IconLeft/IconRight to Chevron component (react-day-picker v9)
- Update darkMode config format (Tailwind CSS v4)
- Update tsconfig moduleResolution to bundler and target to ES2017

api/index.ts

@@ -35,6 +35,6 @@ export async function authenticateLottery(phone: string, code: string) {
   }
 }
 
-export const revalidateTagName = async (tag: string) => {
-  revalidateTag(tag);
+export const revalidateTagName = async (tag: string, profile: string = "default") => {
+  revalidateTag(tag, profile);
 };

app/(main)/live/page.tsx

@@ -38,7 +38,7 @@ const page = () => {
                     height={'100%'}
                     width={'100%'}
                     controls
-                    url={channel.source}
+                    src={channel.source}
                     playing={true}
                     key={v4()}
                   />

app/(main)/treasury/[video_id]/page.tsx

@@ -28,6 +28,7 @@ const VideoItem = async ({ params }: IParams) => {
   await queryClient.prefetchInfiniteQuery({
     queryKey: ['video', 'all'],
     queryFn: () => Queries.getVideos(''),
+    initialPageParam: 1,
   });
   await queryClient.prefetchInfiniteQuery({
     queryKey: ['videos', 'infinite', ''],
@@ -36,11 +37,12 @@ const VideoItem = async ({ params }: IParams) => {
         '?' +
         String(
           new URLSearchParams({
-            page: pageParam,
+            page: String(pageParam),
             per_page: '8',
           }),
         ),
       ),
+    initialPageParam: 1,
   });
   const dehydratedState = dehydrate(queryClient);
 

app/(main)/treasury/page.tsx

@@ -33,11 +33,12 @@ const Treasury = async () => {
         '?' +
           String(
             new URLSearchParams({
-              page: pageParam,
+              page: String(pageParam),
               per_page: '8',
             }),
           ),
       ),
+    initialPageParam: 1,
   });
 
   const dehydratedState = dehydrate(queryClient);

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

@@ -1,6 +1,6 @@
 'use client';
 import PrizeCard from '@/components/prizes/PrizeCard';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { GiftsType } from '@/typings/gifts/gifts.type';
@@ -22,19 +22,20 @@ const PrizesPage = ({ params }: { params: { user_id: string } }) => {
   const mobile = useMediaQuery('(max-width: 768px)');
 
   // Fetching data using TanStack Query
-  const { data, isLoading, error } = useQuery<GiftsType, Error>(
-    [`gifts-${params.user_id}`, params.user_id], // Query key using user_id
-    () =>
+  const { data, isLoading, error } = useQuery<GiftsType, Error>({
+    queryKey: [`gifts-${params.user_id}`, params.user_id],
+    queryFn: () =>
       axios
         .get(`https://sms.turkmentv.gov.tm/api/gifts/${params.user_id}`)
         .then((response) => response.data),
-    {
-      // Handle error with onError callback to trigger the redirect
-      onError: () => {
-        router.push('/prizes/auth');
-      },
-    },
-  );
+  });
+
+  // Handle error with redirect
+  useEffect(() => {
+    if (error) {
+      router.push('/prizes/auth');
+    }
+  }, [error, router]);
 
   if (isLoading)
     return (
@@ -49,6 +50,10 @@ const PrizesPage = ({ params }: { params: { user_id: string } }) => {
     return null; // Return null since the redirect will occur
   }
 
+  if (!data) {
+    return null;
+  }
+
   return (
     <div className="flex flex-col gap-[32px] md:gap-[64px] items-center w-full overflow-x-hidden">
       <header className="flex flex-col items-center gap-[24px] w-full">

components/CustomSelect.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { motion } from 'framer-motion';
 import { v4 } from 'uuid';
 import { BiSolidDownArrow } from 'react-icons/bi';
@@ -28,7 +28,7 @@ const CustomSelect = ({
   const ref = useRef<HTMLDivElement>(null);
   const [input, setInput] = useState<string>();
 
-  useOnClickOutside(ref, () => setOpen(false));
+  useOnClickOutside(ref as React.RefObject<HTMLElement>, () => setOpen(false));
   return (
     <div ref={ref} className="custom-input relative cursor-pointer" onClick={() => setOpen(!open)}>
       {label ? (

components/VideoList.tsx

@@ -25,15 +25,15 @@ const VideoList = ({ isSlides }: IProps) => {
       queryKey: ['videos', 'infinite', params ? params : ''],
       queryFn: ({ pageParam = 1 }) =>
         params.search !== ''
-          ? Queries.getVideos('?' + String(new URLSearchParams({ ...params, page: pageParam })))
+          ? Queries.getVideos('?' + String(new URLSearchParams({ ...params, page: String(pageParam) })))
           : Queries.getVideos(
-              '?' + String(new URLSearchParams({ ...noSearchParams, page: pageParam })),
+              '?' + String(new URLSearchParams({ ...noSearchParams, page: String(pageParam) })),
             ),
       getNextPageParam: (prevData) =>
         prevData.meta.last_page > prevData.meta.current_page
           ? prevData.meta.current_page + 1
           : null,
-      keepPreviousData: true,
+      initialPageParam: 1,
     });
 
   if (isLoading) return <Loader height={250} />;

components/VideoPlayer.tsx

@@ -45,7 +45,7 @@ const VideoPlayer = ({ maxHeight, maxWidth, video_id }: IProps) => {
     );
   }
 
-  const mutation = useMutation(() => addViews());
+  const mutation = useMutation({ mutationFn: () => addViews() });
 
   const onPlayHandler = () => {
     if (!hasStartedPlaying) {

components/dashboard/FilterTable.tsx

@@ -2,7 +2,7 @@
 
 import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
-import { MouseEvent, useContext, useEffect, useRef, useState } from 'react';
+import React, { MouseEvent, useContext, useEffect, useRef, useState } from 'react';
 import { Calendar } from '../ui/calendar';
 import { format } from 'date-fns';
 import { SmsContext } from '@/context/SmsContext';
@@ -51,7 +51,7 @@ const FilterTable = () => {
     setCalendar(false);
   };
 
-  useOnClickOutside(calendarRef, handleClickOutside);
+  useOnClickOutside(calendarRef as React.RefObject<HTMLElement>, handleClickOutside);
 
   const checkSortActive = () => {
     if (activeSort === 'asc' || datee || searchFecth) {

components/home/SmallSwiperNews.tsx

@@ -19,8 +19,6 @@ const SmallSwiperNews = () => {
   if (isFetching) return <Loader height={'100%'} />;
   if (error) return <h1>{JSON.stringify(error)}</h1>;
 
-  console.log(!!null);
-
   return (
     <div className="small-swiper flex-1">
       <Swiper

components/hox/PresenceAnimator.tsx

@@ -3,13 +3,13 @@ import { PropsWithChildren } from "react";
 import { motion } from "framer-motion";
 import {
   VariantLabels,
-  AnimationControls,
   TargetAndTransition,
 } from "framer-motion";
+import type { LegacyAnimationControls } from "motion-dom";
 
 interface IProps extends PropsWithChildren {
   initial?: any;
-  animate?: VariantLabels | AnimationControls | TargetAndTransition | undefined;
+  animate?: VariantLabels | LegacyAnimationControls | TargetAndTransition | undefined;
   exit?: VariantLabels | TargetAndTransition | undefined;
 }
 

components/news/MainNews.tsx

@@ -14,6 +14,7 @@ const MainNews = () => {
       prevData.meta.last_page > prevData.meta.current_page
         ? prevData.meta.current_page + 1
         : null,
+    initialPageParam: 1,
   });
 
   const news = data!.pages.flatMap((data) => data.data)[0];

components/news/NewsGrid.tsx

@@ -23,7 +23,7 @@ const NewsGrid = ({ title, isExtendable, isSlides, perPage = 8 }: IProps) => {
         prevData.meta.last_page > prevData.meta.current_page
           ? prevData.meta.current_page + 1
           : null,
-      keepPreviousData: true,
+      initialPageParam: 1,
     });
   // const { data, isLoading, isFetchingNextPage, error, hasNextPage, fetchNextPage } =
   //   useInfiniteQuery({

components/prizes/PrizeCard.tsx

@@ -112,8 +112,8 @@ const PrizeCard = ({
                   <button
                     className="px-[24px] py-[10px] w-full md:w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]"
                     onClick={handleDialogOpen}
-                    disabled={choosePrizeMutation.isLoading}>
-                    {choosePrizeMutation.isLoading ? 'Ýüklenilýär...' : 'Saýla'}
+                    disabled={choosePrizeMutation.isPending}>
+                    {choosePrizeMutation.isPending ? 'Ýüklenilýär...' : 'Saýla'}
                   </button>
                 </DialogTrigger>
 

components/prizes/SmsForm.tsx

@@ -73,9 +73,9 @@ const SmsForm: React.FC = () => {
       </div>
       <button
         type="submit"
-        disabled={inputValue.length !== 6 || mutation.isLoading}
+        disabled={inputValue.length !== 6 || mutation.isPending}
         className="text-textLarge leading-textLarge py-[12px] w-full flex justify-center items-center rounded-[12px] bg-lightPrimary font-medium text-lightOnPrimary">
-        {mutation.isLoading ? 'Ýüklenilýär...' : 'Giriş'}
+        {mutation.isPending ? 'Ýüklenilýär...' : 'Giriş'}
       </button>
     </form>
   );

components/treasury/ReactionsBlock.tsx

@@ -25,13 +25,12 @@ const ReactionsBlock = ({ video_id }: IProps) => {
     });
   }
 
-  const mutationLikes = useMutation(() => addLikes());
-  const mutationDisLikes = useMutation(() => addDisLikes());
+  const mutationLikes = useMutation({ mutationFn: () => addLikes() });
+  const mutationDisLikes = useMutation({ mutationFn: () => addDisLikes() });
 
   const { data, error } = useQuery({
     queryKey: ['video', video_id, mutationLikes, mutationDisLikes],
     queryFn: () => Queries.getVideo(video_id),
-    keepPreviousData: true,
   });
 
   if (error) return <h1>{JSON.stringify(error)}</h1>;

components/ui/calendar.tsx

@@ -47,8 +47,12 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        Chevron: ({ orientation }) =>
+          orientation === 'left' ? (
+            <ChevronLeft className="h-4 w-4" />
+          ) : (
+            <ChevronRight className="h-4 w-4" />
+          ),
       }}
       {...props}
     />

tailwind.config.ts

@@ -1,7 +1,7 @@
 import type { Config } from 'tailwindcss';
 
 const config = {
-  darkMode: ['class'],
+  darkMode: 'class',
   content: [
     './pages/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -9,10 +13,10 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -20,9 +24,20 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "config"
+  ]
 }