Unified loading states.

src/components/hooks/index.ts

@@ -1,5 +1,6 @@
 'use client';
 export * from './queries/useActiveUsersQuery';
+export * from './queries/useEventDataQuery';
 export * from './queries/useEventDataEventsQuery';
 export * from './queries/useEventDataPropertiesQuery';
 export * from './queries/useEventDataValuesQuery';
@@ -22,7 +23,6 @@ export * from './queries/useTeamWebsitesQuery';
 export * from './queries/useTeamMembersQuery';
 export * from './queries/useUserQuery';
 export * from './queries/useUsersQuery';
-export * from './queries/useUTMQuery';
 export * from './queries/useWebsiteQuery';
 export * from './queries/useWebsites';
 export * from './queries/useWebsiteEventsQuery';

src/components/hooks/queries/useActiveUsersQuery.ts

@@ -1,10 +1,7 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useActyiveUsersQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useActyiveUsersQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
   return useQuery<any>({
     queryKey: ['websites:active', websiteId],

src/components/hooks/queries/useEventDataEventsQuery.ts

@@ -1,11 +1,8 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useEventDataEventsQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useEventDataEventsQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useEventDataPropertiesQuery.ts

@@ -1,11 +1,8 @@
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useEventDataPropertiesQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useEventDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useEventDataQuery.ts

@@ -0,0 +1,19 @@
+import { useApi } from '../useApi';
+import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
+
+export function useEventDataQuery(
+  websiteId: string,
+  eventId: string,
+  options?: ReactQueryOptions<any>,
+) {
+  const { get, useQuery } = useApi();
+  const params = useFilterParams(websiteId);
+
+  return useQuery({
+    queryKey: ['websites:event-data', { websiteId, eventId, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/event-data/${eventId}`, { ...params }),
+    enabled: !!(websiteId && eventId),
+    ...options,
+  });
+}

src/components/hooks/queries/useEventDataValuesQuery.ts

@@ -1,12 +1,12 @@
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
 export function useEventDataValuesQuery(
   websiteId: string,
   eventName: string,
   propertyName: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<any>,
 ) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);

src/components/hooks/queries/useLoginQuery.ts

@@ -1,4 +1,3 @@
-import { UseQueryResult } from '@tanstack/react-query';
 import { useApp, setUser } from '@/store/app';
 import { useApi } from '../useApi';
 
@@ -7,7 +6,7 @@ const selector = (state: { user: any }) => state.user;
 export function useLoginQuery(): {
   user: any;
   setUser: (data: any) => void;
-} & UseQueryResult {
+} {
   const { post, useQuery } = useApi();
   const user = useApp(selector);
 

src/components/hooks/queries/useReportsQuery.ts

@@ -1,8 +1,12 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useReportsQuery({ websiteId, type }: { websiteId: string; type?: string }) {
+export function useReportsQuery(
+  { websiteId, type }: { websiteId: string; type?: string },
+  options?: ReactQueryOptions<any>,
+) {
   const { modified } = useModified(`reports:${type}`);
   const { get } = useApi();
 
@@ -10,5 +14,6 @@ export function useReportsQuery({ websiteId, type }: { websiteId: string; type?:
     queryKey: ['reports', { websiteId, type, modified }],
     queryFn: async () => get('/reports', { websiteId, type }),
     enabled: !!websiteId && !!type,
+    ...options,
   });
 }

src/components/hooks/queries/useResultQuery.ts

@@ -1,10 +1,10 @@
 import { useApi } from '@/components/hooks';
-import { UseQueryOptions, QueryKey } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
 export function useResultQuery<T>(
   type: string,
   params?: { [key: string]: any },
-  options?: Omit<UseQueryOptions<T, Error, T, QueryKey>, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<T>,
 ) {
   const { post, useQuery } = useApi();
 

src/components/hooks/queries/useSessionDataPropertiesQuery.ts

@@ -1,11 +1,8 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useSessionDataPropertiesQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useSessionDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useSessionDataValuesQuery.ts

@@ -1,11 +1,11 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
 export function useSessionDataValuesQuery(
   websiteId: string,
   propertyName: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<any>,
 ) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);

src/components/hooks/queries/useUTMQuery.ts

@@ -1,20 +0,0 @@
-import { useApi } from '../useApi';
-import { useFilterParams } from '../useFilterParams';
-import { UseQueryOptions } from '@tanstack/react-query';
-
-export function useUTMQuery(
-  websiteId: string,
-  queryParams?: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
-  options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
-) {
-  const { get, useQuery } = useApi();
-  const filterParams = useFilterParams(websiteId);
-
-  return useQuery({
-    queryKey: ['utm', websiteId, { ...filterParams, ...queryParams }],
-    queryFn: () =>
-      get(`/websites/${websiteId}/utm`, { websiteId, ...filterParams, ...queryParams }),
-    enabled: !!websiteId,
-    ...options,
-  });
-}

src/components/hooks/queries/useWebsiteEventsQuery.ts

@@ -1,12 +1,9 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 import { usePagedQuery } from '../usePagedQuery';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useWebsiteEventsQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useWebsiteEventsQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts

@@ -1,11 +1,8 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useWebsiteEventsSeriesQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useWebsiteEventsSeriesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useWebsiteMetricsQuery.ts

@@ -1,18 +1,24 @@
-import { UseQueryOptions } from '@tanstack/react-query';
+import { keepPreviousData } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 import { useSearchParams } from 'next/navigation';
+import { ReactQueryOptions } from '@/lib/types';
+
+export type WebsiteMetricsData = {
+  x: string;
+  y: number;
+}[];
 
 export function useWebsiteMetricsQuery(
   websiteId: string,
   queryParams: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
-  options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<WebsiteMetricsData>,
 ) {
   const { get, useQuery } = useApi();
   const filterParams = useFilterParams(websiteId);
   const searchParams = useSearchParams();
 
-  return useQuery({
+  return useQuery<WebsiteMetricsData>({
     queryKey: [
       'websites:metrics',
       {
@@ -21,18 +27,14 @@ export function useWebsiteMetricsQuery(
         ...queryParams,
       },
     ],
-    queryFn: async () => {
-      const data = await get(`/websites/${websiteId}/metrics`, {
+    queryFn: async () =>
+      get(`/websites/${websiteId}/metrics`, {
         ...filterParams,
         [searchParams.get('view')]: undefined,
         ...queryParams,
-      });
-
-      options?.onDataLoad?.(data);
-
-      return data;
-    },
+      }),
     enabled: !!websiteId,
+    placeholderData: keepPreviousData,
     ...options,
   });
 }

src/components/hooks/queries/useWebsitePageviewsQuery.ts

@@ -1,18 +1,22 @@
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
+
+export interface WebsitePageviewsData {
+  pageviews: { x: string; y: number }[];
+  sessions: { x: string; y: number }[];
+}
 
 export function useWebsitePageviewsQuery(
-  websiteId: string,
-  compare?: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+  { websiteId, compareMode }: { websiteId: string; compareMode?: string },
+  options?: ReactQueryOptions<WebsitePageviewsData>,
 ) {
   const { get, useQuery } = useApi();
-  const params = useFilterParams(websiteId);
+  const filterParams = useFilterParams(websiteId);
 
-  return useQuery({
-    queryKey: ['websites:pageviews', { websiteId, ...params, compare }],
-    queryFn: () => get(`/websites/${websiteId}/pageviews`, { ...params, compare }),
+  return useQuery<WebsitePageviewsData>({
+    queryKey: ['websites:pageviews', { websiteId, compareMode, ...filterParams }],
+    queryFn: () => get(`/websites/${websiteId}/pageviews`, { compareMode, ...filterParams }),
     enabled: !!websiteId,
     ...options,
   });

src/components/hooks/queries/useWebsiteStatsQuery.ts

@@ -1,15 +1,31 @@
+import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
+export interface WebsiteStatsData {
+  pageviews: number;
+  visitors: number;
+  visits: number;
+  bounces: number;
+  totaltime: number;
+  previous: {
+    pageviews: number;
+    visitors: number;
+    visits: number;
+    bounces: number;
+    totaltime: number;
+  };
+}
+
 export function useWebsiteStatsQuery(
   websiteId: string,
   compare?: string,
-  options?: { [key: string]: string },
+  options?: UseQueryOptions<WebsiteStatsData, Error, WebsiteStatsData>,
 ) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 
-  return useQuery({
+  return useQuery<WebsiteStatsData>({
     queryKey: ['websites:stats', { websiteId, ...params, compare }],
     queryFn: () => get(`/websites/${websiteId}/stats`, { ...params, compare }),
     enabled: !!websiteId,