Updated events/sessions pages. Added DateDistance component.

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;

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 (
+    <TooltipTrigger delay={0}>
+      <Focusable>
+        <Text>{formatDistanceToNow(date, { addSuffix: true, locale: dateLocale })}</Text>
+      </Focusable>
+      <Tooltip>{formatTimezoneDate(date.toISOString(), 'PPPpp')}</Tooltip>
+    </TooltipTrigger>
+  );
+}

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<T>(
+export function useResultQuery<T = any>(
   type: string,
   params?: { [key: string]: any },
   options?: ReactQueryOptions<T>,

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);

src/components/hooks/queries/useWebsiteEventsQuery.ts

@@ -5,12 +5,11 @@ import { ReactQueryOptions } from '@/lib/types';
 
 export function useWebsiteEventsQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   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,
   });

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,
   };
 }

src/components/hooks/usePagedQuery.ts

@@ -12,7 +12,7 @@ export function usePagedQuery<T = any>({
   const { query: queryParams } = useNavigation();
   const [params, setParams] = useState<PageParams>({
     search: '',
-    page: +queryParams?.page || 1,
+    page: queryParams?.page || '1',
   });
 
   const { useQuery } = useApi();
@@ -25,7 +25,7 @@ export function usePagedQuery<T = any>({
   return {
     result: data as PageResult<T>,
     query,
-    filterParams: params,
+    params,
     setParams,
   };
 }