From c9aeca0ed9ca1f94ee779fe3e40d4d8a83c53a4b Mon Sep 17 00:00:00 2001
From: MinhNN <minhnguyennhatt@gmail.com>
Date: Tue, 27 Jan 2026 12:16:09 +0700
Subject: [PATCH] feat(wsClient): implement WebSocket client with reconnecting
 functionality

---
 src/models/slave/sgw/useShipSos.ts        |  2 +-
 src/pages/Manager/Device/Camera/index.tsx | 34 +++++++++++++++++++----
 src/utils/{slave/sgw => }/wsClient.ts     |  2 +-
 3 files changed, 30 insertions(+), 8 deletions(-)
 rename src/utils/{slave/sgw => }/wsClient.ts (97%)

diff --git a/src/models/slave/sgw/useShipSos.ts b/src/models/slave/sgw/useShipSos.ts
index e6a243e..b7c2426 100644
--- a/src/models/slave/sgw/useShipSos.ts
+++ b/src/models/slave/sgw/useShipSos.ts
@@ -1,5 +1,5 @@
 import { SHIP_SOS_WS_URL } from '@/constants/slave/sgw/websocket';
-import { wsClient } from '@/utils/slave/sgw/wsClient';
+import { wsClient } from '@/utils/wsClient';
 import { useCallback, useState } from 'react';
 
 export default function useGetShipSos() {
diff --git a/src/pages/Manager/Device/Camera/index.tsx b/src/pages/Manager/Device/Camera/index.tsx
index 4d21199..62617a0 100644
--- a/src/pages/Manager/Device/Camera/index.tsx
+++ b/src/pages/Manager/Device/Camera/index.tsx
@@ -1,4 +1,5 @@
 import { apiSearchThings } from '@/services/master/ThingController';
+import { wsClient } from '@/utils/wsClient';
 import {
   ArrowLeftOutlined,
   DeleteOutlined,
@@ -23,6 +24,7 @@ import {
   Space,
   Spin,
   Table,
+  theme,
   Typography,
 } from 'antd';
 import { useEffect, useState } from 'react';
@@ -95,6 +97,7 @@ interface CameraFormValues {
 
 const CameraConfigPage = () => {
   const { thingId } = useParams<{ thingId: string }>();
+  const { token } = theme.useToken();
   const [form] = Form.useForm<CameraFormValues>();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [cameras, setCameras] = useState<Camera[]>([]);
@@ -107,6 +110,16 @@ const CameraConfigPage = () => {
   const [thingName, setThingName] = useState<string>('');
   const [loading, setLoading] = useState(true);
 
+  useEffect(() => {
+    wsClient.connect('wss://gms.smatec.com.vn/mqtt', false);
+    const unsubscribe = wsClient.subscribe((data: any) => {
+      console.log('Received WS data:', data);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
   // Fetch thing info on mount
   useEffect(() => {
     const fetchThingInfo = async () => {
@@ -202,7 +215,9 @@ const CameraConfigPage = () => {
       title: 'Tên',
       dataIndex: 'name',
       key: 'name',
-      render: (text: string) => <a style={{ color: '#1890ff' }}>{text}</a>,
+      render: (text: string) => (
+        <a style={{ color: token.colorPrimary }}>{text}</a>
+      ),
     },
     {
       title: 'Loại',
@@ -298,8 +313,9 @@ const CameraConfigPage = () => {
                     alignItems: 'center',
                     marginBottom: 16,
                     padding: '8px 12px',
-                    background: '#f5f5f5',
-                    borderRadius: 4,
+                    background: token.colorBgContainer,
+                    borderRadius: token.borderRadius,
+                    border: `1px solid ${token.colorBorder}`,
                   }}
                 >
                   <Text type="secondary">
@@ -322,9 +338,13 @@ const CameraConfigPage = () => {
                           onClick={() => handleAlertToggle(alert.id)}
                           style={{
                             cursor: 'pointer',
-                            borderColor: isSelected ? '#1890ff' : '#d9d9d9',
+                            borderColor: isSelected
+                              ? token.colorPrimary
+                              : token.colorBorder,
                             borderWidth: isSelected ? 2 : 1,
-                            background: isSelected ? '#e6f7ff' : '#fff',
+                            background: isSelected
+                              ? token.colorPrimaryBg
+                              : token.colorBgContainer,
                             height: 80,
                             display: 'flex',
                             alignItems: 'center',
@@ -339,7 +359,9 @@ const CameraConfigPage = () => {
                           <Text
                             style={{
                               fontSize: 12,
-                              color: isSelected ? '#1890ff' : 'inherit',
+                              color: isSelected
+                                ? token.colorPrimary
+                                : token.colorText,
                               wordBreak: 'break-word',
                             }}
                           >
diff --git a/src/utils/slave/sgw/wsClient.ts b/src/utils/wsClient.ts
similarity index 97%
rename from src/utils/slave/sgw/wsClient.ts
rename to src/utils/wsClient.ts
index 7bf5957..4adba05 100644
--- a/src/utils/slave/sgw/wsClient.ts
+++ b/src/utils/wsClient.ts
@@ -1,5 +1,5 @@
 import ReconnectingWebSocket from 'reconnecting-websocket';
-import { getToken } from '../../storage';
+import { getToken } from './storage';
 
 type MessageHandler = (data: any) => void;