82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import { useEffect, useState } from 'react';
|
|
import { Box, Title } from '@mantine/core';
|
|
import io from 'socket.io-client';
|
|
import { WorkingPage } from '../components/dashboard';
|
|
import { IBid, IWebBid } from '../system/type';
|
|
|
|
// Dùng singleton để giữ kết nối WebSocket khi chuyển trang
|
|
const socket = io('http://localhost:4000', {
|
|
autoConnect: true, // Tránh tự động kết nối khi import file
|
|
transports: ['websocket'], // Chỉ dùng WebSocket để giảm độ trễ
|
|
});
|
|
|
|
export default function DashBoard() {
|
|
const [workingData, setWorkingData] = useState<(IWebBid & { type: string })[] | (IBid & { type: string })[]>([]);
|
|
|
|
useEffect(() => {
|
|
socket.connect();
|
|
|
|
socket.on('connect', () => {
|
|
console.log('✅ WebSocket connected:', socket.id);
|
|
|
|
// 🔥 Gửi yêu cầu lấy dữ liệu ngay khi kết nối
|
|
socket.emit('getBidsData');
|
|
});
|
|
|
|
socket.on('disconnect', () => {
|
|
console.log('❌ WebSocket disconnected');
|
|
});
|
|
|
|
socket.on('bidsUpdated', (data: IWebBid[]) => {
|
|
console.log('📢 Bids Data:', data);
|
|
|
|
const array = data.reduce((prev, cur) => {
|
|
if (cur.children?.length > 0) {
|
|
prev = [...prev, ...cur.children];
|
|
}
|
|
prev.push(cur);
|
|
return prev;
|
|
}, [] as any[]);
|
|
|
|
const newData = array.map((item) => {
|
|
if (item.children) {
|
|
return {
|
|
...item,
|
|
type: 'API_BID',
|
|
};
|
|
}
|
|
|
|
return {
|
|
...item,
|
|
type: 'PRODUCT_TAB',
|
|
};
|
|
});
|
|
setWorkingData(newData);
|
|
});
|
|
|
|
return () => {
|
|
console.log('🔌 Cleanup WebSocket listeners...');
|
|
socket.off('bidsUpdated');
|
|
socket.off('working');
|
|
socket.off('connect');
|
|
socket.off('disconnect');
|
|
socket.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<Box>
|
|
<Title order={2} mb="md">
|
|
Admin Dashboard
|
|
</Title>
|
|
|
|
<Box className="grid grid-cols-4 gap-4">
|
|
{workingData.map((item, index) => (
|
|
<WorkingPage socket={socket} data={item} key={item.id + index} />
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|