refactor: abstract MonitorListItem component parameters
This commit is contained in:
parent
df3de0113a
commit
ed433455c8
@ -1,33 +1,26 @@
|
|||||||
import React, { useMemo, useState } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import { trpc } from '../../api/trpc';
|
import { trpc } from '../../api/trpc';
|
||||||
import { useCurrentWorkspaceId } from '../../store/user';
|
import { useCurrentWorkspaceId } from '../../store/user';
|
||||||
import { NoWorkspaceTip } from '../NoWorkspaceTip';
|
import { NoWorkspaceTip } from '../NoWorkspaceTip';
|
||||||
import { Loading } from '../Loading';
|
import { Loading } from '../Loading';
|
||||||
import { Empty } from 'antd';
|
import { Empty } from 'antd';
|
||||||
import { MonitorListItem } from './MonitorListItem';
|
import { MonitorListItem } from './MonitorListItem';
|
||||||
|
import { useNavigate, useParams } from 'react-router';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
|
||||||
export const MonitorList: React.FC = React.memo(() => {
|
export const MonitorList: React.FC = React.memo(() => {
|
||||||
const workspaceId = useCurrentWorkspaceId();
|
const workspaceId = useCurrentWorkspaceId();
|
||||||
const { data: monitors = [], isLoading } = trpc.monitor.all.useQuery({
|
const { data: monitors = [], isLoading } = trpc.monitor.all.useQuery({
|
||||||
workspaceId,
|
workspaceId,
|
||||||
});
|
});
|
||||||
const initMonitorId = useMemo(() => {
|
const navigate = useNavigate();
|
||||||
const pathname = window.location.pathname;
|
const params = useParams<{
|
||||||
const re = /^\/monitor\/([^\/]+?)$/;
|
'*': string;
|
||||||
if (re.test(pathname)) {
|
}>()['*'];
|
||||||
const id = pathname.match(re)?.[1];
|
|
||||||
|
|
||||||
if (typeof id === 'string') {
|
const selectedMonitorId = useMemo(() => {
|
||||||
return id;
|
return params?.split('/')[0] ?? '';
|
||||||
}
|
}, [params]);
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const [selectedMonitorId, setSelectedMonitorId] = useState<string | null>(
|
|
||||||
initMonitorId
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!workspaceId) {
|
if (!workspaceId) {
|
||||||
return <NoWorkspaceTip />;
|
return <NoWorkspaceTip />;
|
||||||
@ -44,10 +37,13 @@ export const MonitorList: React.FC = React.memo(() => {
|
|||||||
{monitors.map((monitor) => (
|
{monitors.map((monitor) => (
|
||||||
<MonitorListItem
|
<MonitorListItem
|
||||||
key={monitor.id}
|
key={monitor.id}
|
||||||
monitor={monitor}
|
className={clsx(selectedMonitorId === monitor.id && '!bg-opacity-20')}
|
||||||
workspaceId={workspaceId}
|
workspaceId={workspaceId}
|
||||||
selectedMonitorId={selectedMonitorId}
|
monitorId={monitor.id}
|
||||||
setSelectedMonitorId={setSelectedMonitorId}
|
monitorName={monitor.name}
|
||||||
|
onClick={() => {
|
||||||
|
navigate(`/monitor/${monitor.id}`);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,20 +1,16 @@
|
|||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import React, { useMemo, useState } from 'react';
|
import React, { useMemo, useState } from 'react';
|
||||||
import { useNavigate } from 'react-router';
|
|
||||||
import { AppRouterOutput } from '../../api/trpc';
|
|
||||||
import { MonitorHealthBar } from './MonitorHealthBar';
|
import { MonitorHealthBar } from './MonitorHealthBar';
|
||||||
|
|
||||||
type MonitorType = AppRouterOutput['monitor']['all'][number];
|
|
||||||
|
|
||||||
export const MonitorListItem: React.FC<{
|
export const MonitorListItem: React.FC<{
|
||||||
monitor: MonitorType;
|
className?: string;
|
||||||
workspaceId: string;
|
workspaceId: string;
|
||||||
selectedMonitorId: string | null;
|
monitorId: string;
|
||||||
setSelectedMonitorId: (monitorId: string) => void;
|
monitorName: string;
|
||||||
|
onClick?: () => void;
|
||||||
}> = React.memo((props) => {
|
}> = React.memo((props) => {
|
||||||
const { monitor, workspaceId, selectedMonitorId, setSelectedMonitorId } =
|
const { className, workspaceId, monitorId, monitorName, onClick } = props;
|
||||||
props;
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const [beats, setBeats] = useState<
|
const [beats, setBeats] = useState<
|
||||||
({
|
({
|
||||||
value: number;
|
value: number;
|
||||||
@ -39,17 +35,11 @@ export const MonitorListItem: React.FC<{
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={monitor.name}
|
|
||||||
className={clsx(
|
className={clsx(
|
||||||
'flex rounded-lg py-3 px-4 cursor-pointer mb-1',
|
className,
|
||||||
selectedMonitorId === monitor.id
|
'flex rounded-lg py-3 px-4 cursor-pointer mb-1 bg-green-500 bg-opacity-0 hover:bg-opacity-10'
|
||||||
? 'bg-green-500 bg-opacity-20'
|
|
||||||
: 'bg-green-500 bg-opacity-0 hover:bg-opacity-10'
|
|
||||||
)}
|
)}
|
||||||
onClick={() => {
|
onClick={onClick}
|
||||||
navigate(`/monitor/${monitor.id}`);
|
|
||||||
setSelectedMonitorId(monitor.id);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<span
|
<span
|
||||||
@ -62,7 +52,7 @@ export const MonitorListItem: React.FC<{
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 pl-2">
|
<div className="flex-1 pl-2">
|
||||||
<div className="text-base">{monitor.name}</div>
|
<div className="text-base">{monitorName}</div>
|
||||||
{/* <div>
|
{/* <div>
|
||||||
{monitor.tags.map((tag) => (
|
{monitor.tags.map((tag) => (
|
||||||
<span
|
<span
|
||||||
@ -78,7 +68,7 @@ export const MonitorListItem: React.FC<{
|
|||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<MonitorHealthBar
|
<MonitorHealthBar
|
||||||
workspaceId={workspaceId}
|
workspaceId={workspaceId}
|
||||||
monitorId={monitor.id}
|
monitorId={monitorId}
|
||||||
onBeatsItemUpdate={setBeats}
|
onBeatsItemUpdate={setBeats}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user