new logic in lottery and toss route

api/index.ts

@@ -1,12 +1,9 @@
 "use server";
 import baseUrl from "@/baseUrl";
 import routes from "@/routes";
-import { cookies } from "next/headers";
+import { revalidateTag } from "next/cache";
 
-export async function authenticateLottery(
-  phone: string,
-  code: string,
-) {
+export async function authenticateLottery(phone: string, code: string) {
   try {
     const res = await fetch(`${baseUrl.QUIZ_SRC}${routes.lotteryActive}`, {
       method: "POST",
@@ -17,6 +14,10 @@ export async function authenticateLottery(
         phone: phone,
         key: code,
       }),
+      next: {
+        revalidate: 300,
+        tags: ["lotteryData"],
+      },
     });
 
     if (!res.ok) {
@@ -32,3 +33,7 @@ export async function authenticateLottery(
     return undefined;
   }
 }
+
+export const revalidateTagName = (tag: string) => {
+  revalidateTag(tag);
+};

components/common/Confetti.tsx

@@ -4,13 +4,7 @@ import ReactConfetti from "react-confetti";
 import { useWindowSize } from "react-use";
 import { useMediaQuery } from "usehooks-ts";
 
-const Confetti = ({
-  numberOfPieces = 200,
-  showConfetti,
-}: {
-  numberOfPieces?: number;
-  showConfetti: boolean;
-}) => {
+const Confetti = () => {
   const [recycle, setRecycle] = useState<boolean>(true);
   const { width, height } = useWindowSize();
   const colors = [
@@ -26,7 +20,7 @@ const Confetti = ({
 
   useEffect(() => {
     setTimeout(() => setRecycle(false), 30000);
-  }, []);
+  }, [recycle]);
 
   return (
     <div className="fixed top-0 left-0 z-50">
@@ -34,7 +28,7 @@ const Confetti = ({
         width={width}
         height={height}
         recycle={recycle}
-        numberOfPieces={mobile ? 200 / 3 : 200}
+        numberOfPieces={mobile ? 300 / 3 : 300}
         tweenDuration={500}
         colors={colors}
       />

components/lottery/LotteryWinnersSection.tsx

@@ -7,6 +7,7 @@ import AnimatedText from "@/components/common/AnimatedText";
 import { useWebsocketLottery } from "@/hooks/useWebSocketLottery";
 import Confetti from "../common/Confetti";
 import { AnimatePresence, motion } from "framer-motion";
+import { revalidateTagName } from "@/api";
 
 const WEBSOCKET_URL = "wss://sms.turkmentv.gov.tm/ws/lottery?dst=";
 const SLOT_COUNTER_DURATION = 30000;
@@ -112,6 +113,7 @@ const LotteryWinnersSection = ({ data }: { data: any }) => {
     setWinnerSelectingStatus("selected");
     setIsConfettiActive(true);
 
+    revalidateTagName("lotteryData");
     // Add the winner to the list
     setWinners((prevWinners) => [...prevWinners, winner]);
     // Wait for the animation duration
@@ -125,7 +127,7 @@ const LotteryWinnersSection = ({ data }: { data: any }) => {
           Websocket connection error.
         </div>
       )}
-      <Confetti showConfetti={isConfettiActive} numberOfPieces={300} />
+      {isConfettiActive && <Confetti />}
 
       <div className="container">
         <div