DashboardLayout changes, refactoring, useSWR

frontend_reactjs/src/pages/ApiTest.tsx

@@ -1,43 +1,32 @@
 import { useEffect, useState } from "react"
-import { Button } from "@mui/material"
-import DataTable from "../components/DataTable"
-import { GridColDef } from "@mui/x-data-grid"
-import UserService from "../services/UserService"
+import { Button, Typography } from "@mui/material"
 
 export default function ApiTest() {
-    const [users, setUsers] = useState<any>(null)
+    const [data, setData] = useState<any>(null)
 
-    const getUsers = async () => {
-        await UserService.getUsers().then(response => {
-            setUsers(response.data)
-        })
+    function getRealtimeData(data: any) {
+        setData(data)
     }
 
-    const columns: GridColDef[] = [
-        { field: 'id', headerName: 'ID', type: "number", width: 70 },
-        { field: 'email', headerName: 'Email', width: 130 },
-        { field: 'login', headerName: 'Логин', width: 130 },
-        { field: 'phone', headerName: 'Телефон', width: 90 },
-        { field: 'name', headerName: 'Имя', width: 90 },
-        { field: 'surname', headerName: 'Фамилия', width: 90 },
-        { field: 'is_active', headerName: 'Активен', type: "boolean", width: 90 },
-        {
-            field: 'role_id',
-            headerName: 'Роль',
-            valueGetter: (value, row) => `${value}`,
-            width: 90
-        },
-    ];
+    useEffect(() => {
+        const sse = new EventSource(`${import.meta.env.VITE_API_SSE_URL}/stream`)
+
+        sse.onmessage = e => getRealtimeData(e.data)
+
+        sse.onerror = () => {
+            sse.close()
+        }
+
+        return () => {
+            sse.close()
+        }
+    }, [])
 
     return (
         <>
-            <Button onClick={() => getUsers()}>
-                Get users
-            </Button>
-
-            {users &&
-                <DataTable rows={users} columns={columns}/>
-            }
+            <Typography>
+                {JSON.stringify(data)}
+            </Typography>
         </>
     )
 }