fix: fix monitor list upPercent calc problem

src/client/components/monitor/MonitorList.tsx

@@ -1,17 +1,18 @@
 import clsx from 'clsx';
 import React, { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router';
-import { trpc } from '../../api/trpc';
+import { AppRouterOutput, trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { NoWorkspaceTip } from '../NoWorkspaceTip';
 import { MonitorHealthBar } from './MonitorHealthBar';
 
+type MonitorType = AppRouterOutput['monitor']['all'][number];
+
 export const MonitorList: React.FC = React.memo(() => {
-  const currentWorkspaceId = useCurrentWorkspaceId()!;
+  const workspaceId = useCurrentWorkspaceId();
   const { data: monitors = [] } = trpc.monitor.all.useQuery({
-    workspaceId: currentWorkspaceId,
+    workspaceId,
   });
-  const navigate = useNavigate();
   const initMonitorId = useMemo(() => {
     const pathname = window.location.pathname;
     const re = /^\/monitor\/([^\/]+?)$/;
@@ -25,6 +26,37 @@ export const MonitorList: React.FC = React.memo(() => {
 
     return null;
   }, []);
+
+  const [selectedMonitorId, setSelectedMonitorId] = useState<string | null>(
+    initMonitorId
+  );
+
+  if (!workspaceId) {
+    return <NoWorkspaceTip />;
+  }
+
+  return (
+    <div className="p-2">
+      {monitors.map((monitor) => (
+        <MonitorListItem
+          key={monitor.id}
+          monitor={monitor}
+          selectedMonitorId={selectedMonitorId}
+          setSelectedMonitorId={setSelectedMonitorId}
+        />
+      ))}
+    </div>
+  );
+});
+MonitorList.displayName = 'MonitorList';
+
+export const MonitorListItem: React.FC<{
+  monitor: MonitorType;
+  selectedMonitorId: string | null;
+  setSelectedMonitorId: (monitorId: string) => void;
+}> = React.memo((props) => {
+  const { monitor, selectedMonitorId, setSelectedMonitorId } = props;
+  const navigate = useNavigate();
   const [beats, setBeats] = useState<
     ({
       value: number;
@@ -32,10 +64,6 @@ export const MonitorList: React.FC = React.memo(() => {
     } | null)[]
   >([]);
 
-  const [selectedMonitorId, setSelectedMonitorId] = useState<string | null>(
-    initMonitorId
-  );
-
   const upPercent = useMemo(() => {
     let up = 0;
     beats.forEach((b) => {
@@ -51,13 +79,7 @@ export const MonitorList: React.FC = React.memo(() => {
     return parseFloat(((up / beats.length) * 100).toFixed(1));
   }, [beats]);
 
-  if (!currentWorkspaceId) {
-    return <NoWorkspaceTip />;
-  }
-
   return (
-    <div className="p-2">
-      {monitors.map((monitor) => (
     <div
       key={monitor.name}
       className={clsx(
@@ -96,14 +118,9 @@ export const MonitorList: React.FC = React.memo(() => {
       </div>
 
       <div className="flex items-center">
-            <MonitorHealthBar
-              monitorId={monitor.id}
-              onBeatsItemUpdate={setBeats}
-            />
+        <MonitorHealthBar monitorId={monitor.id} onBeatsItemUpdate={setBeats} />
       </div>
     </div>
-      ))}
-    </div>
   );
 });
-MonitorList.displayName = 'MonitorList';
+MonitorListItem.displayName = 'MonitorListItem';