Fix build errors, remove active users link on share page.

This commit is contained in:
Francis Cao
2026-04-20 08:51:56 -07:00
parent b3c4b70991
commit 0bd5e70df7
4 changed files with 27 additions and 16 deletions
@@ -31,7 +31,7 @@ export function WebsiteHeader({
titleHref={allowLink ? renderUrl(`/websites/${website.id}`, false) : undefined}
>
<Row alignItems="center" gap="6" wrap="wrap">
<ActiveUsers websiteId={website.id} />
<ActiveUsers websiteId={website.id} allowLink={allowLink} />
{showActions && (
<LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
@@ -1,7 +1,7 @@
import { Column, Heading, Row, SearchField, Text } from '@umami/react-zen';
import Link from '@/components/common/Link';
import { useMemo, useState } from 'react';
import { FixedSizeList } from 'react-window';
import { List, type RowComponentProps } from 'react-window';
import { SessionModal } from '@/app/(main)/websites/[websiteId]/sessions/SessionModal';
import { useFormat } from '@/components//hooks/useFormat';
import { Avatar } from '@/components/common/Avatar';
@@ -121,7 +121,7 @@ export function RealtimeLog({ data }: { data: any }) {
}
};
const TableRow = ({ index, style }) => {
const TableRow = ({ index, style, logs }: RowComponentProps<{ logs: any[] }>) => {
const row = logs[index];
return (
<Row alignItems="center" style={style} gap>
@@ -195,9 +195,14 @@ export function RealtimeLog({ data }: { data: any }) {
<Column>
{logs?.length === 0 && <Empty />}
{logs?.length > 0 && (
<FixedSizeList width="100%" height={500} itemCount={logs.length} itemSize={50}>
{TableRow}
</FixedSizeList>
<List
rowComponent={TableRow}
rowCount={logs.length}
rowHeight={50}
rowProps={{ logs }}
defaultHeight={500}
style={{ width: '100%' }}
/>
)}
</Column>
<SessionModal websiteId={website.id} />
@@ -1,7 +1,7 @@
import type { ReactQueryOptions } from '@/lib/types';
import { useApi } from '../useApi';
export function useActyiveUsersQuery(websiteId: string, options?: ReactQueryOptions) {
export function useActiveUsersQuery(websiteId: string, options?: ReactQueryOptions) {
const { get, useQuery } = useApi();
return useQuery<any>({
queryKey: ['websites:active', websiteId],
+15 -9
View File
@@ -7,17 +7,19 @@ export function ActiveUsers({
websiteId,
value,
refetchInterval = 60000,
allowLink = true,
}: {
websiteId: string;
value?: number;
refetchInterval?: number;
allowLink?: boolean;
}) {
const { t, labels } = useMessages();
const { data } = useActiveUsersQuery(websiteId, { refetchInterval });
const count = useMemo(() => {
if (websiteId) {
return data?.visitors || 0;
return data?.visitors || 10;
}
return value !== undefined ? value : 0;
@@ -27,13 +29,17 @@ export function ActiveUsers({
return null;
}
return (
<Link href={`/websites/${websiteId}/realtime`}>
<StatusLight variant="success">
<Text size="sm" weight="medium">
{count} {t(labels.online)}
</Text>
</StatusLight>
</Link>
const content = (
<StatusLight variant="success">
<Text size="sm" weight="medium">
{count} {t(labels.online)}
</Text>
</StatusLight>
);
if (!allowLink) {
return content;
}
return <Link href={`/websites/${websiteId}/realtime`}>{content}</Link>;
}