90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import { Box, Text, Title } from '@mantine/core';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import io from 'socket.io-client';
|
|
import { WorkingPage } from '../components/dashboard';
|
|
import { IBid, IWebBid } from '../system/type';
|
|
import { checkStatus } from '../apis/auth';
|
|
|
|
const socket = io(`${import.meta.env.VITE_SOCKET_URL}/admin-bid-ws`, {
|
|
autoConnect: true,
|
|
transports: ['websocket'],
|
|
});
|
|
|
|
export default function DashBoard() {
|
|
const [workingData, setWorkingData] = useState<(IWebBid & { type: string })[] | (IBid & { type: string })[]>([]);
|
|
|
|
const RETRY_CONNECT = useRef(2);
|
|
|
|
useEffect(() => {
|
|
socket.connect();
|
|
|
|
socket.on('connect', () => {
|
|
socket.emit('getBidsData');
|
|
});
|
|
|
|
socket.on('disconnect', async () => {
|
|
if (RETRY_CONNECT.current > 0) {
|
|
await checkStatus();
|
|
|
|
socket.connect();
|
|
|
|
RETRY_CONNECT.current--;
|
|
return;
|
|
}
|
|
});
|
|
|
|
socket.on('adminBidsUpdated', (data: IWebBid[]) => {
|
|
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('adminBidsUpdated');
|
|
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.length > 0 && workingData.map((item, index) => <WorkingPage socket={socket} data={item} key={item.id + index} />)}
|
|
|
|
{workingData.length <= 0 && (
|
|
<Box className="flex items-center justify-center col-span-4">
|
|
<Text>No Pages</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|