From 5b300f1ff56f755b821af8f466c1955ae2ed9f98 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Mon, 30 Jun 2025 21:34:56 -0700 Subject: [PATCH] Updated events/sessions pages. Added DateDistance component. --- .../websites/[websiteId]/events/EventsPage.tsx | 2 -- .../websites/[websiteId]/events/EventsTable.tsx | 8 ++++---- .../[websiteId]/sessions/SessionsPage.tsx | 13 ------------- .../[websiteId]/sessions/SessionsTable.tsx | 6 +++--- .../api/websites/[websiteId]/events/route.ts | 2 +- src/components/charts/BarChart.tsx | 2 +- src/components/common/DateDistance.tsx | 17 +++++++++++++++++ src/components/hooks/queries/useResultQuery.ts | 2 +- src/components/hooks/queries/useTeamsQuery.ts | 5 ++--- .../hooks/queries/useWebsiteEventsQuery.ts | 7 +++---- src/components/hooks/useFilterParams.ts | 9 +++++++++ src/components/hooks/usePagedQuery.ts | 4 ++-- src/lib/types.ts | 2 +- 13 files changed, 44 insertions(+), 35 deletions(-) create mode 100644 src/components/common/DateDistance.tsx diff --git a/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx b/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx index 7e7e0440..fbf11e8e 100644 --- a/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx +++ b/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx @@ -3,7 +3,6 @@ import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen'; import { EventsTable } from '@/components/metrics/EventsTable'; import { useState } from 'react'; import { EventsDataTable } from './EventsDataTable'; -import { EventsMetricsBar } from './EventsMetricsBar'; import { Panel } from '@/components/common/Panel'; import { EventsChart } from '@/components/metrics/EventsChart'; import { GridRow } from '@/components/common/GridRow'; @@ -23,7 +22,6 @@ export function EventsPage({ websiteId }) { return ( - diff --git a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx index 3cb1a750..9a21f21d 100644 --- a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx +++ b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx @@ -1,12 +1,12 @@ import { DataTable, DataColumn, Icon, Row } from '@umami/react-zen'; -import { useMessages, useNavigation, useTimezone } from '@/components/hooks'; +import { useMessages, useNavigation } from '@/components/hooks'; import { Empty } from '@/components/common/Empty'; import { Avatar } from '@/components/common/Avatar'; import Link from 'next/link'; import { Bolt, Eye } from '@/components/icons'; +import { DateDistance } from '@/components/common/DateDistance'; export function EventsTable({ data = [] }) { - const { formatTimezoneDate } = useTimezone(); const { formatMessage, labels } = useMessages(); const { renderUrl } = useNavigation(); @@ -34,8 +34,8 @@ export function EventsTable({ data = [] }) { ); }} - - {(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')} + + {(row: any) => } ); diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx index 1ff848e7..7e18bbed 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx @@ -2,12 +2,8 @@ import { useState } from 'react'; import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen'; import { SessionsDataTable } from './SessionsDataTable'; -import { SessionsMetricsBar } from './SessionsMetricsBar'; import { SessionProperties } from './SessionProperties'; -import { WorldMap } from '@/components/metrics/WorldMap'; -import { GridRow } from '@/components/common/GridRow'; import { useMessages } from '@/components/hooks'; -import { SessionsWeekly } from './SessionsWeekly'; import { Panel } from '@/components/common/Panel'; import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls'; @@ -18,15 +14,6 @@ export function SessionsPage({ websiteId }) { return ( - - - - - - - - - setTab(value)}> diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx index 901d5473..0b9ad43b 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx @@ -1,11 +1,11 @@ import Link from 'next/link'; import { DataColumn, DataTable } from '@umami/react-zen'; -import { useFormat, useMessages, useTimezone } from '@/components/hooks'; +import { useFormat, useMessages } from '@/components/hooks'; import { Avatar } from '@/components/common/Avatar'; import { TypeIcon } from '@/components/common/TypeIcon'; +import { DateDistance } from '@/components/common/DateDistance'; export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) { - const { formatTimezoneDate } = useTimezone(); const { formatMessage, labels } = useMessages(); const { formatValue } = useFormat(); @@ -50,7 +50,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean )} - {(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')} + {(row: any) => } ); diff --git a/src/app/api/websites/[websiteId]/events/route.ts b/src/app/api/websites/[websiteId]/events/route.ts index fb3db328..ef20dd7c 100644 --- a/src/app/api/websites/[websiteId]/events/route.ts +++ b/src/app/api/websites/[websiteId]/events/route.ts @@ -28,7 +28,7 @@ export async function GET( return unauthorized(); } - const data = await getWebsiteEvents(websiteId, { startDate, endDate }, query); + const data = await getWebsiteEvents(websiteId, { ...query, startDate, endDate }, query); return json(data); } diff --git a/src/components/charts/BarChart.tsx b/src/components/charts/BarChart.tsx index 8cbf5f8d..3f3efd3b 100644 --- a/src/components/charts/BarChart.tsx +++ b/src/components/charts/BarChart.tsx @@ -21,7 +21,7 @@ const dateFormats = { }; export interface BarChartProps extends ChartProps { - unit: string; + unit?: string; stacked?: boolean; currency?: string; renderXLabel?: (label: string, index: number, values: any[]) => string; diff --git a/src/components/common/DateDistance.tsx b/src/components/common/DateDistance.tsx new file mode 100644 index 00000000..43056b0c --- /dev/null +++ b/src/components/common/DateDistance.tsx @@ -0,0 +1,17 @@ +import { Tooltip, TooltipTrigger, Text, Focusable } from '@umami/react-zen'; +import { formatDistanceToNow } from 'date-fns'; +import { useLocale, useTimezone } from '@/components/hooks'; + +export function DateDistance({ date }: { date: Date }) { + const { formatTimezoneDate } = useTimezone(); + const { dateLocale } = useLocale(); + + return ( + + + {formatDistanceToNow(date, { addSuffix: true, locale: dateLocale })} + + {formatTimezoneDate(date.toISOString(), 'PPPpp')} + + ); +} diff --git a/src/components/hooks/queries/useResultQuery.ts b/src/components/hooks/queries/useResultQuery.ts index e82e4519..098124c5 100644 --- a/src/components/hooks/queries/useResultQuery.ts +++ b/src/components/hooks/queries/useResultQuery.ts @@ -2,7 +2,7 @@ import { useApi } from '../useApi'; import { useFilterParams } from '../useFilterParams'; import { ReactQueryOptions } from '@/lib/types'; -export function useResultQuery( +export function useResultQuery( type: string, params?: { [key: string]: any }, options?: ReactQueryOptions, diff --git a/src/components/hooks/queries/useTeamsQuery.ts b/src/components/hooks/queries/useTeamsQuery.ts index a4edc287..a70aca24 100644 --- a/src/components/hooks/queries/useTeamsQuery.ts +++ b/src/components/hooks/queries/useTeamsQuery.ts @@ -1,12 +1,11 @@ import { useApi } from '../useApi'; -import { usePagedQuery } from '../usePagedQuery'; import { useModified } from '../useModified'; export function useTeamsQuery(userId: string) { - const { get } = useApi(); + const { get, useQuery } = useApi(); const { modified } = useModified(`teams`); - return usePagedQuery({ + return useQuery({ queryKey: ['teams', { userId, modified }], queryFn: (params: any) => { return get(`/users/${userId}/teams`, params); diff --git a/src/components/hooks/queries/useWebsiteEventsQuery.ts b/src/components/hooks/queries/useWebsiteEventsQuery.ts index 8699ab31..7b465f70 100644 --- a/src/components/hooks/queries/useWebsiteEventsQuery.ts +++ b/src/components/hooks/queries/useWebsiteEventsQuery.ts @@ -5,12 +5,11 @@ import { ReactQueryOptions } from '@/lib/types'; export function useWebsiteEventsQuery(websiteId: string, options?: ReactQueryOptions) { const { get } = useApi(); - const params = useFilterParams(websiteId); + const filterParams = useFilterParams(websiteId); return usePagedQuery({ - queryKey: ['websites:events', { websiteId, ...params }], - queryFn: pageParams => - get(`/websites/${websiteId}/events`, { ...params, ...pageParams, pageSize: 20 }), + queryKey: ['websites:events', { websiteId, ...filterParams }], + queryFn: () => get(`/websites/${websiteId}/events`, { ...filterParams, pageSize: 20 }), enabled: !!websiteId, ...options, }); diff --git a/src/components/hooks/useFilterParams.ts b/src/components/hooks/useFilterParams.ts index f725eb80..d0b84f95 100644 --- a/src/components/hooks/useFilterParams.ts +++ b/src/components/hooks/useFilterParams.ts @@ -22,14 +22,19 @@ export function useFilterParams(websiteId: string) { event, tag, hostname, + page, + pageSize, + search, }, } = useNavigation(); return { + // Date range startAt: +toUtc(startDate), endAt: +toUtc(endDate), unit, timezone, + // Filters path, referrer, title, @@ -44,5 +49,9 @@ export function useFilterParams(websiteId: string) { event, tag, hostname, + // Paging + page, + pageSize, + search, }; } diff --git a/src/components/hooks/usePagedQuery.ts b/src/components/hooks/usePagedQuery.ts index 1f85afc0..6b995ea5 100644 --- a/src/components/hooks/usePagedQuery.ts +++ b/src/components/hooks/usePagedQuery.ts @@ -12,7 +12,7 @@ export function usePagedQuery({ const { query: queryParams } = useNavigation(); const [params, setParams] = useState({ search: '', - page: +queryParams?.page || 1, + page: queryParams?.page || '1', }); const { useQuery } = useApi(); @@ -25,7 +25,7 @@ export function usePagedQuery({ return { result: data as PageResult, query, - filterParams: params, + params, setParams, }; } diff --git a/src/lib/types.ts b/src/lib/types.ts index f6f2c8a1..2bc4bc61 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -29,7 +29,7 @@ export interface PageResult { sortDescending?: boolean; } -export interface PagedQueryResult { +export interface PagedQueryResult { result: PageResult; query: any; params: PageParams;