Renamed query hooks. Fixed conversion bugs.

src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx

@@ -1,5 +1,4 @@
 import { Key, useContext, useState } from 'react';
-import { ButtonGroup, Button, Flexbox } from '@umami/react-zen';
 import thenby from 'thenby';
 import { percentFilter } from '@/lib/filters';
 import { ListTable } from '@/components/metrics/ListTable';
@@ -7,6 +6,7 @@ import { FILTER_PAGES, FILTER_REFERRERS } from '@/lib/constants';
 import { useMessages } from '@/components/hooks';
 import { RealtimeData } from '@/lib/types';
 import { WebsiteContext } from '../WebsiteProvider';
+import { FilterButtons } from '@/components/common/FilterButtons';
 
 export function RealtimeUrls({ data }: { data: RealtimeData }) {
   const website = useContext(WebsiteContext);
@@ -17,10 +17,12 @@ export function RealtimeUrls({ data }: { data: RealtimeData }) {
 
   const buttons = [
     {
+      id: 1,
       label: formatMessage(labels.referrers),
       key: FILTER_REFERRERS,
     },
     {
+      id: 2,
       label: formatMessage(labels.pages),
       key: FILTER_PAGES,
     },
@@ -61,11 +63,7 @@ export function RealtimeUrls({ data }: { data: RealtimeData }) {
 
   return (
     <>
-      <Flexbox justifyContent="center">
-        <ButtonGroup items={buttons} selectedKey={filter} onSelect={setFilter}>
-          {({ key, label }) => <Button key={key}>{label}</Button>}
-        </ButtonGroup>
-      </Flexbox>
+      <FilterButtons items={buttons} onSelect={setFilter} />
       {filter === FILTER_REFERRERS && (
         <ListTable
           title={formatMessage(labels.referrers)}

src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx

@@ -4,7 +4,7 @@ import { Grid, GridRow } from '@/components/layout/Grid';
 import { Page } from '@/components/layout/Page';
 import { RealtimeChart } from '@/components/metrics/RealtimeChart';
 import { WorldMap } from '@/components/metrics/WorldMap';
-import { useRealtime } from '@/components/hooks';
+import { useRealtimeQuery } from '@/components/hooks';
 import { RealtimeLog } from './RealtimeLog';
 import { RealtimeHeader } from './RealtimeHeader';
 import { RealtimeUrls } from './RealtimeUrls';
@@ -13,7 +13,7 @@ import { WebsiteHeader } from '../WebsiteHeader';
 import { percentFilter } from '@/lib/filters';
 
 export function WebsiteRealtimePage({ websiteId }) {
-  const { data, isLoading, error } = useRealtime(websiteId);
+  const { data, isLoading, error } = useRealtimeQuery(websiteId);
 
   if (isLoading || error) {
     return <Page isLoading={isLoading} error={error} />;