refactor: extract monitorlistitem

src/client/components/monitor/MonitorList.tsx

@@ -1,14 +1,10 @@
-import clsx from 'clsx';
 import React, { useMemo, useState } from 'react';
-import { useNavigate } from 'react-router';
-import { AppRouterOutput, trpc } from '../../api/trpc';
+import { trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { NoWorkspaceTip } from '../NoWorkspaceTip';
-import { MonitorHealthBar } from './MonitorHealthBar';
 import { Loading } from '../Loading';
 import { Empty } from 'antd';
-
-type MonitorType = AppRouterOutput['monitor']['all'][number];
+import { MonitorListItem } from './MonitorListItem';
 
 export const MonitorList: React.FC = React.memo(() => {
   const workspaceId = useCurrentWorkspaceId();
@@ -49,6 +45,7 @@ export const MonitorList: React.FC = React.memo(() => {
         <MonitorListItem
           key={monitor.id}
           monitor={monitor}
+          workspaceId={workspaceId}
           selectedMonitorId={selectedMonitorId}
           setSelectedMonitorId={setSelectedMonitorId}
         />
@@ -57,83 +54,3 @@ export const MonitorList: React.FC = React.memo(() => {
   );
 });
 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 workspaceId = useCurrentWorkspaceId();
-  const [beats, setBeats] = useState<
-    ({
-      value: number;
-      createdAt: string | Date;
-    } | null)[]
-  >([]);
-
-  const upPercent = useMemo(() => {
-    let up = 0;
-    beats.forEach((b) => {
-      if (!b) {
-        return;
-      }
-
-      if (b.value >= 0) {
-        up++;
-      }
-    });
-
-    return parseFloat(((up / beats.length) * 100).toFixed(1));
-  }, [beats]);
-
-  return (
-    <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(
-            '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
-          workspaceId={workspaceId}
-          monitorId={monitor.id}
-          onBeatsItemUpdate={setBeats}
-        />
-      </div>
-    </div>
-  );
-});
-MonitorListItem.displayName = 'MonitorListItem';

src/client/components/monitor/MonitorListItem.tsx

@@ -0,0 +1,88 @@
+import clsx from 'clsx';
+import React, { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { AppRouterOutput } from '../../api/trpc';
+import { MonitorHealthBar } from './MonitorHealthBar';
+
+type MonitorType = AppRouterOutput['monitor']['all'][number];
+
+export const MonitorListItem: React.FC<{
+  monitor: MonitorType;
+  workspaceId: string;
+  selectedMonitorId: string | null;
+  setSelectedMonitorId: (monitorId: string) => void;
+}> = React.memo((props) => {
+  const { monitor, workspaceId, selectedMonitorId, setSelectedMonitorId } =
+    props;
+  const navigate = useNavigate();
+  const [beats, setBeats] = useState<
+    ({
+      value: number;
+      createdAt: string | Date;
+    } | null)[]
+  >([]);
+
+  const upPercent = useMemo(() => {
+    let up = 0;
+    beats.forEach((b) => {
+      if (!b) {
+        return;
+      }
+
+      if (b.value >= 0) {
+        up++;
+      }
+    });
+
+    return parseFloat(((up / beats.length) * 100).toFixed(1));
+  }, [beats]);
+
+  return (
+    <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(
+            '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
+          workspaceId={workspaceId}
+          monitorId={monitor.id}
+          onBeatsItemUpdate={setBeats}
+        />
+      </div>
+    </div>
+  );
+});
+MonitorListItem.displayName = 'MonitorListItem';