Refactor part 2: Electric Boogaloo. Standardize way of passing filter parameters.

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

@@ -1,7 +1,9 @@
-import { useWebsiteEventsQuery } from '@/components/hooks';
+import { useState } from 'react';
+import { useMessages, useWebsiteEventsQuery } from '@/components/hooks';
 import { EventsTable } from './EventsTable';
 import { DataGrid } from '@/components/common/DataGrid';
 import { ReactNode } from 'react';
+import { FilterButtons } from '@/components/common/FilterButtons';
 
 export function EventsDataTable({
   websiteId,
@@ -10,10 +12,37 @@ export function EventsDataTable({
   teamId?: string;
   children?: ReactNode;
 }) {
+  const { formatMessage, labels } = useMessages();
   const queryResult = useWebsiteEventsQuery(websiteId);
+  const [view, setView] = useState('all');
+
+  const buttons = [
+    {
+      id: 'all',
+      label: formatMessage(labels.all),
+    },
+    {
+      id: 'page',
+      label: formatMessage(labels.page),
+    },
+    {
+      id: 'event',
+      label: formatMessage(labels.event),
+    },
+  ];
+
+  const renderActions = () => {
+    return <FilterButtons items={buttons} value={view} onChange={setView} />;
+  };
 
   return (
-    <DataGrid queryResult={queryResult} allowSearch={true} autoFocus={false}>
+    <DataGrid
+      queryResult={queryResult}
+      allowSearch={true}
+      autoFocus={false}
+      allowPaging={true}
+      renderActions={renderActions}
+    >
       {({ data }) => <EventsTable data={data} />}
     </DataGrid>
   );

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

@@ -5,6 +5,7 @@ import { Avatar } from '@/components/common/Avatar';
 import Link from 'next/link';
 import { Bolt, Eye } from '@/components/icons';
 import { DateDistance } from '@/components/common/DateDistance';
+import { TypeIcon } from '@/components/common/TypeIcon';
 
 export function EventsTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
@@ -16,13 +17,6 @@ export function EventsTable({ data = [] }) {
 
   return (
     <DataTable data={data}>
-      <DataColumn id="session" label={formatMessage(labels.session)} width="100px">
-        {(row: any) => (
-          <Link href={renderUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
-            <Avatar seed={row.sessionId} size={64} />
-          </Link>
-        )}
-      </DataColumn>
       <DataColumn id="event" label={formatMessage(labels.event)} width="2fr">
         {(row: any) => {
           return (
@@ -34,8 +28,21 @@ export function EventsTable({ data = [] }) {
           );
         }}
       </DataColumn>
-      <DataColumn id="created" label={formatMessage(labels.created)} width="200px">
-        {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
+      <DataColumn id="created" width="1fr" align="end">
+        {(row: any) => (
+          <Row alignItems="center" gap>
+            <DateDistance date={new Date(row.createdAt)} />
+            <Link href={renderUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
+              <Avatar seed={row.sessionId} size={32} />
+            </Link>
+            <Row alignItems="center" gap="1">
+              <TypeIcon type="country" value={row.country} />
+              <TypeIcon type="browser" value={row.browser} />
+              <TypeIcon type="os" value={row.os} />
+              <TypeIcon type="device" value={row.device} />
+            </Row>
+          </Row>
+        )}
       </DataColumn>
     </DataTable>
   );