websocket added

components/lottery/LotteryWinnersSection.tsx

@@ -1,23 +1,52 @@
-'use client';
+"use client";
 
-import LotteryWinnersList from './winners/LotteryWinnersList';
+import LotteryWinnersList from "./winners/LotteryWinnersList";
-import SpinWheel from './spinWheel/SpinWheel';
+import SpinWheel from "./spinWheel/SpinWheel";
-import { useState } from 'react';
+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 className="flex gap-6 bg-lightSurfaceContainer rounded-[12px] flex-1">
+        <div>
-          {/* Winners */}
+          <div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px] flex-1">
-          <LotteryWinnersList winners={winners} />
+            {/* Winners */}
+            <LotteryWinnersList winners={winners} />
 
-          {/* Sping the wheel */}
+            {/* Sping the wheel */}
-          <div className="flex justify-center items-center md:w-full h-full md:px-8 md:py-[29px] p-6">
+            <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>