Redo events tab to show all events.

src/app/(main)/reports/event-data/EventDataParameters.tsx

@@ -48,7 +48,7 @@ export function EventDataParameters() {
     groups,
   };
 
-  const handleSubmit = values => {
+  const handleSubmit = (values: any) => {
     runReport(values);
   };
 

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

@@ -1,12 +0,0 @@
-'use client';
-import WebsiteHeader from '../WebsiteHeader';
-import WebsiteEventData from './WebsiteEventData';
-
-export default function EventDataPage({ websiteId }) {
-  return (
-    <>
-      <WebsiteHeader websiteId={websiteId} />
-      <WebsiteEventData websiteId={websiteId} />
-    </>
-  );
-}

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

@@ -1,37 +0,0 @@
-import Link from 'next/link';
-import { GridTable, GridColumn } from 'react-basics';
-import { useMessages, useNavigation } from 'components/hooks';
-import Empty from 'components/common/Empty';
-import { DATA_TYPES } from 'lib/constants';
-
-export function EventDataTable({ data = [] }) {
-  const { formatMessage, labels } = useMessages();
-  const { renderUrl } = useNavigation();
-
-  if (data.length === 0) {
-    return <Empty />;
-  }
-
-  return (
-    <GridTable data={data}>
-      <GridColumn name="eventName" label={formatMessage(labels.event)}>
-        {row => (
-          <Link href={renderUrl({ event: row.eventName })} shallow={true}>
-            {row.eventName}
-          </Link>
-        )}
-      </GridColumn>
-      <GridColumn name="fieldName" label={formatMessage(labels.field)}>
-        {row => row.fieldName}
-      </GridColumn>
-      <GridColumn name="dataType" label={formatMessage(labels.type)}>
-        {row => DATA_TYPES[row.dataType]}
-      </GridColumn>
-      <GridColumn name="total" label={formatMessage(labels.totalRecords)}>
-        {({ total }) => total.toLocaleString()}
-      </GridColumn>
-    </GridTable>
-  );
-}
-
-export default EventDataTable;

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

@@ -0,0 +1,25 @@
+import { useWebsiteEvents } from 'components/hooks';
+import EventsTable from './EventsTable';
+import DataTable from 'components/common/DataTable';
+import { ReactNode } from 'react';
+
+export default function EventsDataTable({
+  websiteId,
+  children,
+}: {
+  websiteId?: string;
+  teamId?: string;
+  children?: ReactNode;
+}) {
+  const queryResult = useWebsiteEvents(websiteId);
+
+  if (queryResult?.result?.data?.length === 0) {
+    return children;
+  }
+
+  return (
+    <DataTable queryResult={queryResult} allowSearch={false}>
+      {({ data }) => <EventsTable data={data} />}
+    </DataTable>
+  );
+}

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

@@ -0,0 +1,12 @@
+'use client';
+import WebsiteHeader from '../WebsiteHeader';
+import EventsDataTable from './EventsDataTable';
+
+export default function EventsPage({ websiteId }) {
+  return (
+    <>
+      <WebsiteHeader websiteId={websiteId} />
+      <EventsDataTable websiteId={websiteId} />
+    </>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { GridTable, GridColumn } from 'react-basics';
+import { useLocale, useMessages } from 'components/hooks';
+import Empty from 'components/common/Empty';
+import { formatDistance } from 'date-fns';
+import Profile from 'components/common/Profile';
+import Link from 'next/link';
+
+export function EventsTable({ data = [] }) {
+  const { dateLocale } = useLocale();
+  const { formatMessage, labels } = useMessages();
+
+  if (data.length === 0) {
+    return <Empty />;
+  }
+
+  return (
+    <GridTable data={data}>
+      <GridColumn name="id" label="ID" />
+      <GridColumn name="session" label={formatMessage(labels.session)}>
+        {row => (
+          <Link href={`/sessions/`}>
+            <Profile seed={row.sessionId} size={64} />
+          </Link>
+        )}
+      </GridColumn>
+      <GridColumn name="eventName" label={formatMessage(labels.event)}>
+        {row => formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
+      </GridColumn>
+      <GridColumn name="eventName" label={formatMessage(labels.name)} />
+      <GridColumn name="urlPath" label={formatMessage(labels.path)} />
+      <GridColumn name="created" label={formatMessage(labels.created)}>
+        {row =>
+          formatDistance(new Date(row.createdAt), new Date(), {
+            addSuffix: true,
+            locale: dateLocale,
+          })
+        }
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default EventsTable;

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

@@ -1,5 +1,5 @@
 import { Flexbox, Loading } from 'react-basics';
-import EventDataTable from './EventDataTable';
+import EventsTable from './EventsTable';
 import EventDataValueTable from './EventDataValueTable';
 import { EventDataMetricsBar } from './EventDataMetricsBar';
 import { useDateRange, useApi, useNavigation } from 'components/hooks';
@@ -33,7 +33,7 @@ export default function WebsiteEventData({ websiteId }) {
   return (
     <Flexbox className={styles.container} direction="column" gap={20}>
       <EventDataMetricsBar websiteId={websiteId} />
-      {!event && <EventDataTable data={data} />}
+      {!event && <EventsTable data={data} />}
       {isLoading && <Loading position="page" />}
       {event && data && <EventDataValueTable event={event} data={data} />}
     </Flexbox>

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

@@ -1,8 +1,8 @@
 import { Metadata } from 'next';
-import EventDataPage from './EventDataPage';
+import EventsPage from './EventsPage';
 
 export default async function ({ params: { websiteId } }) {
-  return <EventDataPage websiteId={websiteId} />;
+  return <EventsPage websiteId={websiteId} />;
 }
 
 export const metadata: Metadata = {