refactor: abstract MonitorListItem component parameters

src/client/components/monitor/MonitorList.tsx

@@ -1,33 +1,26 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { NoWorkspaceTip } from '../NoWorkspaceTip';
 import { Loading } from '../Loading';
 import { Empty } from 'antd';
 import { MonitorListItem } from './MonitorListItem';
+import { useNavigate, useParams } from 'react-router';
+import clsx from 'clsx';
 
 export const MonitorList: React.FC = React.memo(() => {
   const workspaceId = useCurrentWorkspaceId();
   const { data: monitors = [], isLoading } = trpc.monitor.all.useQuery({
     workspaceId,
   });
-  const initMonitorId = useMemo(() => {
-    const pathname = window.location.pathname;
-    const re = /^\/monitor\/([^\/]+?)$/;
-    if (re.test(pathname)) {
-      const id = pathname.match(re)?.[1];
+  const navigate = useNavigate();
+  const params = useParams<{
+    '*': string;
+  }>()['*'];
 
-      if (typeof id === 'string') {
-        return id;
-      }
-    }
-
-    return null;
-  }, []);
-
-  const [selectedMonitorId, setSelectedMonitorId] = useState<string | null>(
-    initMonitorId
-  );
+  const selectedMonitorId = useMemo(() => {
+    return params?.split('/')[0] ?? '';
+  }, [params]);
 
   if (!workspaceId) {
     return <NoWorkspaceTip />;
@@ -44,10 +37,13 @@ export const MonitorList: React.FC = React.memo(() => {
       {monitors.map((monitor) => (
         <MonitorListItem
           key={monitor.id}
-          monitor={monitor}
+          className={clsx(selectedMonitorId === monitor.id && '!bg-opacity-20')}
           workspaceId={workspaceId}
-          selectedMonitorId={selectedMonitorId}
-          setSelectedMonitorId={setSelectedMonitorId}
+          monitorId={monitor.id}
+          monitorName={monitor.name}
+          onClick={() => {
+            navigate(`/monitor/${monitor.id}`);
+          }}
         />
       ))}
     </div>

src/client/components/monitor/MonitorListItem.tsx

@@ -1,20 +1,16 @@
 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;
+  className?: string;
   workspaceId: string;
-  selectedMonitorId: string | null;
-  setSelectedMonitorId: (monitorId: string) => void;
+  monitorId: string;
+  monitorName: string;
+  onClick?: () => void;
 }> = React.memo((props) => {
-  const { monitor, workspaceId, selectedMonitorId, setSelectedMonitorId } =
-    props;
-  const navigate = useNavigate();
+  const { className, workspaceId, monitorId, monitorName, onClick } = props;
+
   const [beats, setBeats] = useState<
     ({
       value: number;
@@ -39,17 +35,11 @@ export const MonitorListItem: React.FC<{
 
   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'
+        className,
+        'flex rounded-lg py-3 px-4 cursor-pointer mb-1 bg-green-500 bg-opacity-0 hover:bg-opacity-10'
       )}
-      onClick={() => {
-        navigate(`/monitor/${monitor.id}`);
-        setSelectedMonitorId(monitor.id);
-      }}
+      onClick={onClick}
     >
       <div>
         <span
@@ -62,7 +52,7 @@ export const MonitorListItem: React.FC<{
         </span>
       </div>
       <div className="flex-1 pl-2">
-        <div className="text-base">{monitor.name}</div>
+        <div className="text-base">{monitorName}</div>
         {/* <div>
       {monitor.tags.map((tag) => (
         <span
@@ -78,7 +68,7 @@ export const MonitorListItem: React.FC<{
       <div className="flex items-center">
         <MonitorHealthBar
           workspaceId={workspaceId}
-          monitorId={monitor.id}
+          monitorId={monitorId}
           onBeatsItemUpdate={setBeats}
         />
       </div>