feat: adjust connection page ui

src/pages/connections.tsx

@@ -1,53 +1,42 @@
 import { useEffect, useMemo, useState } from "react";
 import { useLockFn } from "ahooks";
-import { Box, Button, ButtonGroup, Paper, TextField } from "@mui/material";
+import { Box, Button, MenuItem, Paper, Select, TextField } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
 import { closeAllConnections, getInformation } from "@/services/api";
 import BasePage from "@/components/base/base-page";
-import ConnectionItem from "@/components/connection/connection-item";
 import BaseEmpty from "@/components/base/base-empty";
+import ConnectionItem from "@/components/connection/connection-item";
 
 const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 
-type IOderOpts = {
-  [key in string]: {
-    orderFunc(
-      connections: ApiType.ConnectionsItem[]
-    ): ApiType.ConnectionsItem[];
-  };
-};
+type OrderFunc = (list: ApiType.ConnectionsItem[]) => ApiType.ConnectionsItem[];
 
 const ConnectionsPage = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const [filterText, setFilterText] = useState("");
+  const [curOrderOpt, setOrderOpt] = useState("Default");
   const [connData, setConnData] = useState<ApiType.Connections>(initConn);
 
+  const orderOpts: Record<string, OrderFunc> = {
+    Default: (list) => list,
+    // "Download Traffic": (list) => list,
+    // "Upload Traffic": (list) => list,
+    "Upload Speed": (list) => list.sort((a, b) => b.curUpload! - a.curUpload!),
+    "Download Speed": (list) =>
+      list.sort((a, b) => b.curDownload! - a.curDownload!),
+  };
+
   const filterConn = useMemo(() => {
-    return connData.connections.filter((conn) =>
+    const orderFunc = orderOpts[curOrderOpt];
+    const connetions = connData.connections.filter((conn) =>
       (conn.metadata.host || conn.metadata.destinationIP)?.includes(filterText)
     );
-  }, [connData, filterText]);
 
-  const orderOpts: IOderOpts = {
-    Default: {
-      orderFunc: (list) => list,
-    },
-    // "Download Traffic": {
-    //   orderFunc: (list) => list,
-    // },
-    // "Upload Traffic": {
-    //   orderFunc: (list) => list,
-    // },
-    "Download Speed": {
-      orderFunc: (list) => list.sort((a, b) => b.curDownload! - a.curDownload!),
-    },
-    "Upload Speed": {
-      orderFunc: (list) => list.sort((a, b) => b.curUpload! - a.curUpload!),
-    },
-  };
-  const [curOrderOpt, setOrderOpt] = useState("Default");
+    if (orderFunc) return orderFunc(connetions);
+    return connetions;
+  }, [connData, filterText, curOrderOpt]);
 
   useEffect(() => {
     let ws: WebSocket | null = null;
@@ -88,19 +77,13 @@ const ConnectionsPage = () => {
             }
           }
 
-          const orderedConnections =
-            orderOpts[curOrderOpt].orderFunc(connections);
-
-          return {
-            ...data,
-            connections: orderedConnections,
-          };
+          return { ...data, connections };
         });
       });
     });
 
     return () => ws?.close();
-  }, [curOrderOpt]);
+  }, []);
 
   const onCloseAll = useLockFn(closeAllConnections);
 
@@ -130,17 +113,23 @@ const ConnectionsPage = () => {
             alignItems: "center",
           }}
         >
-          {/* <Select
+          <Select
             size="small"
             autoComplete="off"
-            value={logState}
-            onChange={(e) => setLogState(e.target.value)}
-            sx={{ width: 120, mr: 1, '[role="button"]': { py: 0.65 } }}
+            value={curOrderOpt}
+            onChange={(e) => setOrderOpt(e.target.value)}
+            sx={{
+              mr: 1,
+              width: i18n.language === "en" ? 190 : 120,
+              '[role="button"]': { py: 0.65 },
+            }}
           >
-            <MenuItem value="all">ALL</MenuItem>
-            <MenuItem value="info">INFO</MenuItem>
-            <MenuItem value="warn">WARN</MenuItem>
-          </Select> */}
+            {Object.keys(orderOpts).map((opt) => (
+              <MenuItem key={opt} value={opt}>
+                <span style={{ fontSize: 14 }}>{t(opt)}</span>
+              </MenuItem>
+            ))}
+          </Select>
 
           <TextField
             hiddenLabel
@@ -155,25 +144,7 @@ const ConnectionsPage = () => {
           />
         </Box>
 
-        <Box sx={{ mx: "12px", mb: 0.5 }}>
-          <ButtonGroup size="small" sx={{ width: "100%" }}>
-            {Object.keys(orderOpts).map((opt) => (
-              <Button
-                key={opt}
-                variant={opt === curOrderOpt ? "contained" : "outlined"}
-                onClick={() => setOrderOpt(opt)}
-                sx={{
-                  fontSize: "0.5rem",
-                  textTransform: "capitalize",
-                }}
-              >
-                {t(opt)}
-              </Button>
-            ))}
-          </ButtonGroup>
-        </Box>
-
-        <Box height="calc(100% - 50px - 30px)">
+        <Box height="calc(100% - 50px)">
           {filterConn.length > 0 ? (
             <Virtuoso
               data={filterConn}