websocket added

components/lottery/LotteryWinnersSection.tsx

@@ -1,24 +1,53 @@
-'use client';
+"use client";
 
-import LotteryWinnersList from './winners/LotteryWinnersList';
-import SpinWheel from './spinWheel/SpinWheel';
-import { useState } from 'react';
+import LotteryWinnersList from "./winners/LotteryWinnersList";
+import SpinWheel from "./spinWheel/SpinWheel";
+import { useState, useEffect } from "react";
+import RollingCounterWorking from "./RollingCounter/RollingCounterWorking";
+import { useLotteryAuth } from "@/store/useLotteryAuth";
+import { LotteryWinnerData } from "@/typings/lottery/lottery.types";
 
 const LotteryWinnersSection = () => {
-  const [winners, setWinners] = useState<number[]>([1]);
+  const [winners, setWinners] = useState<LotteryWinnerData[]>([]);
+
+  const { lotteryData } = useLotteryAuth();
+
+  useEffect(() => {
+    if (lotteryData?.data.winners) {
+      setWinners(lotteryData.data.winners);
+    }
+
+    const wsUrl = "https://sms.turkmentv.gov.tm/api/ws/lottery";
+    const ws = new WebSocket(wsUrl);
+
+    ws.onmessage = (event) => {
+      console.log("WebSocket message received:", event.data);
+      const newWinner = JSON.parse(event.data);
+      console.log("Parsed WebSocket data:", newWinner);
+      setWinners((prev) => [...prev, newWinner]);
+    };
+
+    return () => {
+      ws.close();
+    };
+  }, [lotteryData]);
 
   return (
     <section>
       <div className="container">
+        <div>
           <div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px] flex-1">
             {/* Winners */}
             <LotteryWinnersList winners={winners} />
 
             {/* Sping the wheel */}
             <div className="flex justify-center items-center md:w-full h-full md:px-8 md:py-[29px] p-6">
-            <SpinWheel setWinners={setWinners} />
+              {/* <SpinWheel setWinners={setWinners} /> */}
             </div>
           </div>
+
+          <RollingCounterWorking numberString={"81-34-52-35-61"} />
+        </div>
       </div>
     </section>
   );