Renamed query hooks. Fixed conversion bugs.

src/app/(main)/websites/[websiteId]/events/EventProperties.tsx

@@ -1,5 +1,9 @@
-import { GridColumn, GridTable } from '@umami/react-zen';
-import { useEventDataProperties, useEventDataValues, useMessages } from '@/components/hooks';
+import { DataColumn, DataTable } from '@umami/react-zen';
+import {
+  useEventDataPropertiesQuery,
+  useEventDataValuesQuery,
+  useMessages,
+} from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PieChart } from '@/components/charts/PieChart';
 import { useState } from 'react';
@@ -10,8 +14,8 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
   const [propertyName, setPropertyName] = useState('');
   const [eventName, setEventName] = useState('');
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useEventDataProperties(websiteId);
-  const { data: values } = useEventDataValues(websiteId, eventName, propertyName);
+  const { data, isLoading, isFetched, error } = useEventDataPropertiesQuery(websiteId);
+  const { data: values } = useEventDataValuesQuery(websiteId, eventName, propertyName);
   const chartData =
     propertyName && values
       ? {
@@ -34,23 +38,23 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
   return (
     <LoadingPanel isLoading={isLoading} isFetched={isFetched} data={data} error={error}>
       <div className={styles.container}>
-        <GridTable data={data} cardMode={false} className={styles.table}>
-          <GridColumn name="eventName" label={formatMessage(labels.name)}>
+        <DataTable data={data} cardMode={false} className={styles.table}>
+          <DataColumn name="eventName" label={formatMessage(labels.name)}>
             {row => (
               <div className={styles.link} onClick={() => handleRowClick(row)}>
                 {row.eventName}
               </div>
             )}
-          </GridColumn>
-          <GridColumn name="propertyName" label={formatMessage(labels.property)}>
+          </DataColumn>
+          <DataColumn name="propertyName" label={formatMessage(labels.property)}>
             {row => (
               <div className={styles.link} onClick={() => handleRowClick(row)}>
                 {row.propertyName}
               </div>
             )}
-          </GridColumn>
-          <GridColumn name="total" label={formatMessage(labels.count)} alignment="end" />
-        </GridTable>
+          </DataColumn>
+          <DataColumn name="total" label={formatMessage(labels.count)} alignment="end" />
+        </DataTable>
         {propertyName && (
           <div className={styles.chart}>
             <div className={styles.title}>{propertyName}</div>

src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx

@@ -1,4 +1,4 @@
-import { useWebsiteEvents } from '@/components/hooks';
+import { useWebsiteEventsQuery } from '@/components/hooks';
 import { EventsTable } from './EventsTable';
 import { DataGrid } from '@/components/common/DataGrid';
 import { ReactNode } from 'react';
@@ -10,7 +10,7 @@ export function EventsDataTable({
   teamId?: string;
   children?: ReactNode;
 }) {
-  const queryResult = useWebsiteEvents(websiteId);
+  const queryResult = useWebsiteEventsQuery(websiteId);
 
   return (
     <DataGrid queryResult={queryResult} allowSearch={true} autoFocus={false}>

src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx

@@ -1,5 +1,5 @@
 import { useMessages } from '@/components/hooks';
-import { useWebsiteSessionStats } from '@/components/hooks/queries/useWebsiteSessionStats';
+import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsiteSessionStatsQuery';
 import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
@@ -8,7 +8,7 @@ import { Flexbox } from '@umami/react-zen';
 
 export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
+  const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);
 
   return (
     <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>

src/app/(main)/websites/[websiteId]/events/EventsPage.tsx

@@ -6,7 +6,7 @@ import { EventsChart } from '@/components/metrics/EventsChart';
 import { GridRow } from '@/components/layout/Grid';
 import { MetricsTable } from '@/components/metrics/MetricsTable';
 import { useMessages } from '@/components/hooks';
-import { Item, Tabs } from '@umami/react-zen';
+import { TabList, Tab, Tabs } from '@umami/react-zen';
 import { useState } from 'react';
 import { EventProperties } from './EventProperties';
 
@@ -30,11 +30,13 @@ export function EventsPage({ websiteId }) {
       <div>
         <Tabs
           selectedKey={tab}
-          onSelect={(value: any) => setTab(value)}
+          onSelectionChange={(value: any) => setTab(value)}
           style={{ marginBottom: 30 }}
         >
-          <Item key="activity">{formatMessage(labels.activity)}</Item>
-          <Item key="properties">{formatMessage(labels.properties)}</Item>
+          <TabList>
+            <Tab key="activity">{formatMessage(labels.activity)}</Tab>
+            <Tab key="properties">{formatMessage(labels.properties)}</Tab>
+          </TabList>
         </Tabs>
         {tab === 'activity' && <EventsDataTable websiteId={websiteId} />}
         {tab === 'properties' && <EventProperties websiteId={websiteId} />}

src/app/(main)/websites/[websiteId]/events/EventsTable.tsx

@@ -1,5 +1,5 @@
-import { GridTable, GridColumn, Icon } from '@umami/react-zen';
-import { useMessages, useTeamUrl, useTimezone } from '@/components/hooks';
+import { DataTable, DataColumn, Icon } from '@umami/react-zen';
+import { useMessages, useNavigation, useTimezone } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { Avatar } from '@/components/common/Avatar';
 import Link from 'next/link';
@@ -8,23 +8,23 @@ import { Icons } from '@/components/icons';
 export function EventsTable({ data = [] }) {
   const { formatTimezoneDate } = useTimezone();
   const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
+  const { renderTeamUrl } = useNavigation();
 
   if (data.length === 0) {
     return <Empty />;
   }
 
   return (
-    <GridTable data={data}>
-      <GridColumn name="session" label={formatMessage(labels.session)} width={'100px'}>
-        {row => (
+    <DataTable data={data}>
+      <DataColumn id="session" label={formatMessage(labels.session)}>
+        {(row: any) => (
           <Link href={renderTeamUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
             <Avatar seed={row.sessionId} size={64} />
           </Link>
         )}
-      </GridColumn>
-      <GridColumn name="event" label={formatMessage(labels.event)}>
-        {row => {
+      </DataColumn>
+      <DataColumn id="event" label={formatMessage(labels.event)}>
+        {(row: any) => {
           return (
             <>
               <Icon>{row.eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
@@ -33,10 +33,10 @@ export function EventsTable({ data = [] }) {
             </>
           );
         }}
-      </GridColumn>
-      <GridColumn name="created" label={formatMessage(labels.created)} width={'300px'}>
-        {row => formatTimezoneDate(row.createdAt, 'PPPpp')}
-      </GridColumn>
-    </GridTable>
+      </DataColumn>
+      <DataColumn id="created" label={formatMessage(labels.created)}>
+        {(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')}
+      </DataColumn>
+    </DataTable>
   );
 }