refactor: api and command

src/pages/connections.tsx

@@ -1,21 +1,45 @@
-import { useEffect } from "react";
-import { Box, Typography } from "@mui/material";
-import services from "../services";
+import { useEffect, useState } from "react";
+import { Box, Paper, Typography } from "@mui/material";
+import { Virtuoso } from "react-virtuoso";
+import { getInfomation } from "../services/api";
+import { ApiType } from "../services/types";
+import ConnectionItem from "../components/connection-item";
 
 const ConnectionsPage = () => {
-  useEffect(() => {
-    const sourcePromise = services.getLogs(console.log);
+  const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
+  const [conn, setConn] = useState<ApiType.Connections>(initConn);
 
-    return () => {
-      sourcePromise.then((src) => src.cancel());
-    };
+  useEffect(() => {
+    const { server, secret } = getInfomation();
+    const ws = new WebSocket(`ws://${server}/connections?token=${secret}`);
+
+    ws.addEventListener("message", (event) => {
+      const data = JSON.parse(event.data) as ApiType.Connections;
+      setConn(data);
+    });
+
+    return () => ws.close();
   }, []);
 
   return (
-    <Box sx={{ width: 0.9, maxWidth: "850px", mx: "auto", mb: 2 }}>
+    <Box
+      sx={{
+        width: 0.9,
+        maxWidth: "850px",
+        height: "100%",
+        mx: "auto",
+      }}
+    >
       <Typography variant="h4" component="h1" sx={{ py: 2 }}>
         Connections
       </Typography>
+
+      <Paper sx={{ boxShadow: 2, height: "calc(100% - 100px)" }}>
+        <Virtuoso
+          data={conn.connections}
+          itemContent={(index, item) => <ConnectionItem value={item} />}
+        />
+      </Paper>
     </Box>
   );
 };