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,59 +79,48 @@ 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}
+    <div
+      key={monitor.name}
+      className={clsx(
+        'flex rounded-lg py-3 px-4 cursor-pointer mb-1',
+        selectedMonitorId === monitor.id
+          ? 'bg-green-500 bg-opacity-20'
+          : 'bg-green-500 bg-opacity-0 hover:bg-opacity-10'
+      )}
+      onClick={() => {
+        navigate(`/monitor/${monitor.id}`);
+        setSelectedMonitorId(monitor.id);
+      }}
+    >
+      <div>
+        <span
           className={clsx(
-            'flex rounded-lg py-3 px-4 cursor-pointer mb-1',
-            selectedMonitorId === monitor.id
-              ? 'bg-green-500 bg-opacity-20'
-              : 'bg-green-500 bg-opacity-0 hover:bg-opacity-10'
+            'min-w-[62px] p-0.5 rounded-full text-white inline-block text-center',
+            upPercent === 100 ? 'bg-green-400' : 'bg-amber-400'
           )}
-          onClick={() => {
-            navigate(`/monitor/${monitor.id}`);
-            setSelectedMonitorId(monitor.id);
-          }}
         >
-          <div>
-            <span
-              className={clsx(
-                'min-w-[62px] p-0.5 rounded-full text-white inline-block text-center',
-                upPercent === 100 ? 'bg-green-400' : 'bg-amber-400'
-              )}
-            >
-              {upPercent}%
-            </span>
-          </div>
-          <div className="flex-1 pl-2">
-            <div className="text-base">{monitor.name}</div>
-            {/* <div>
-              {monitor.tags.map((tag) => (
-                <span
-                  className="py-0.5 px-1 rounded-full text-white text-sm"
-                  style={{ backgroundColor: tag.color }}
-                >
-                  {tag.label}
-                </span>
-              ))}
-            </div> */}
-          </div>
-
-          <div className="flex items-center">
-            <MonitorHealthBar
-              monitorId={monitor.id}
-              onBeatsItemUpdate={setBeats}
-            />
-          </div>
-        </div>
+          {upPercent}%
+        </span>
+      </div>
+      <div className="flex-1 pl-2">
+        <div className="text-base">{monitor.name}</div>
+        {/* <div>
+      {monitor.tags.map((tag) => (
+        <span
+          className="py-0.5 px-1 rounded-full text-white text-sm"
+          style={{ backgroundColor: tag.color }}
+        >
+          {tag.label}
+        </span>
       ))}
+    </div> */}
+      </div>
+
+      <div className="flex items-center">
+        <MonitorHealthBar monitorId={monitor.id} onBeatsItemUpdate={setBeats} />
+      </div>
     </div>
   );
 });
-MonitorList.displayName = 'MonitorList';
+MonitorListItem.displayName = 'MonitorListItem';