From 3496952769fb16754a7e0648f16e429a72364487 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 5 Oct 2025 14:11:25 -0700 Subject: [PATCH 1/4] Fixed empty website select. Converted session profile to popover. --- .../websites/[websiteId]/WebsiteNav.tsx | 15 ++---- .../{[sessionId] => }/SessionActivity.tsx | 2 +- .../{[sessionId] => }/SessionData.tsx | 0 .../{[sessionId] => }/SessionInfo.tsx | 6 +-- ...sionDetailsPage.tsx => SessionProfile.tsx} | 51 ++++++++++++------- .../sessions/SessionProperties.tsx | 40 +++++++-------- .../{[sessionId] => }/SessionStats.tsx | 0 .../[websiteId]/sessions/SessionsPage.tsx | 41 ++++++++++++++- .../[websiteId]/sessions/SessionsTable.tsx | 5 +- .../[websiteId]/sessions/[sessionId]/page.tsx | 16 ------ src/components/common/LoadingPanel.tsx | 38 ++++++++------ .../hooks/queries/useWebsiteSessionQuery.ts | 1 + src/components/hooks/useDateRange.ts | 4 +- src/components/input/DateFilter.tsx | 4 +- src/components/input/WebsiteDateFilter.tsx | 5 +- src/components/input/WebsiteSelect.tsx | 17 +++++-- 16 files changed, 146 insertions(+), 99 deletions(-) rename src/app/(main)/websites/[websiteId]/sessions/{[sessionId] => }/SessionActivity.tsx (97%) rename src/app/(main)/websites/[websiteId]/sessions/{[sessionId] => }/SessionData.tsx (100%) rename src/app/(main)/websites/[websiteId]/sessions/{[sessionId] => }/SessionInfo.tsx (93%) rename src/app/(main)/websites/[websiteId]/sessions/{[sessionId]/SessionDetailsPage.tsx => SessionProfile.tsx} (58%) rename src/app/(main)/websites/[websiteId]/sessions/{[sessionId] => }/SessionStats.tsx (100%) delete mode 100644 src/app/(main)/websites/[websiteId]/sessions/[sessionId]/page.tsx diff --git a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx index 3696b7861..df476e79b 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx @@ -1,14 +1,5 @@ import { Text } from '@umami/react-zen'; -import { - Eye, - User, - Clock, - Sheet, - Tag, - ChartPie, - UserPlus, - GitCompareArrows, -} from '@/components/icons'; +import { Eye, User, Clock, Ungroup, Tag, ChartPie, UserPlus, GitCompare } from '@/components/icons'; import { Lightning, Path, Money, Target, Funnel, Magnet, Network } from '@/components/svg'; import { useMessages, useNavigation } from '@/components/hooks'; import { SideMenu } from '@/components/common/SideMenu'; @@ -56,13 +47,13 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) { { id: 'compare', label: formatMessage(labels.compare), - icon: , + icon: , path: renderPath('/compare'), }, { id: 'breakdown', label: formatMessage(labels.breakdown), - icon: , + icon: , path: renderPath('/breakdown'), }, ], diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx similarity index 97% rename from src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx rename to src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx index 4ed55427a..4dcf08b42 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx @@ -47,7 +47,7 @@ export function SessionActivity({ return ( - {showHeader && {formatTimezoneDate(createdAt, 'PPPP')}} + {showHeader && {formatTimezoneDate(createdAt, 'PPPP')}} {formatTimezoneDate(createdAt, 'pp')} diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx similarity index 100% rename from src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx rename to src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionInfo.tsx similarity index 93% rename from src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx rename to src/app/(main)/websites/[websiteId]/sessions/SessionInfo.tsx index 4ebb462c3..c2127cf57 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionInfo.tsx @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import { Icon, TextField, Column, Row, Label, Text } from '@umami/react-zen'; +import { Icon, TextField, Column, Row, Label } from '@umami/react-zen'; import { useFormat, useLocale, useMessages, useRegionNames } from '@/components/hooks'; import { TypeIcon } from '@/components/common/TypeIcon'; import { KeyRound, Calendar } from '@/components/icons'; @@ -15,7 +15,7 @@ export function SessionInfo({ data }) { return ( - + }> @@ -83,7 +83,7 @@ const Info = ({ {icon && {icon}} - {children || '—'} + {children || '—'} ); diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx similarity index 58% rename from src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx rename to src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx index 86e3cdbf2..bdbfbc580 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx @@ -1,37 +1,52 @@ -'use client'; -import { Grid, Row, Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen'; +import { Grid, Row, Column, Tabs, TabList, Tab, TabPanel, Icon, Button } from '@umami/react-zen'; import { Avatar } from '@/components/common/Avatar'; import { LoadingPanel } from '@/components/common/LoadingPanel'; +import { X } from '@/components/icons'; import { useMessages, useWebsiteSessionQuery } from '@/components/hooks'; import { SessionActivity } from './SessionActivity'; import { SessionData } from './SessionData'; import { SessionInfo } from './SessionInfo'; import { SessionStats } from './SessionStats'; -import { Panel } from '@/components/common/Panel'; -export function SessionDetailsPage({ +export function SessionProfile({ websiteId, sessionId, + onClose, }: { websiteId: string; sessionId: string; + onClose?: () => void; }) { const { data, isLoading, error } = useWebsiteSessionQuery(websiteId, sessionId); const { formatMessage, labels } = useMessages(); return ( - + {data && ( - - - - - - - - - - + + + + + + + + + + + + + + {formatMessage(labels.activity)} @@ -49,9 +64,9 @@ export function SessionDetailsPage({ - - - + + + )} ); diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx index ea4b5f037..e66302ad6 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx @@ -1,5 +1,5 @@ import { useMemo, useState } from 'react'; -import { Select, ListItem, Grid } from '@umami/react-zen'; +import { Select, ListItem, Grid, Column } from '@umami/react-zen'; import { useMessages, useSessionDataPropertiesQuery, @@ -24,25 +24,26 @@ export function SessionProperties({ websiteId }: { websiteId: string }) { data={data} error={error} minHeight="300px" - gap="6" > - {data && ( - - - - )} - {propertyName && } + + {data && ( + + + + )} + {propertyName && } + ); } @@ -84,7 +85,6 @@ const SessionValues = ({ websiteId, propertyName }) => { data={data} error={error} minHeight="300px" - gap="6" > {data && ( diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionStats.tsx similarity index 100% rename from src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx rename to src/app/(main)/websites/[websiteId]/sessions/SessionStats.tsx diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx index 68eef29c6..ae0d41043 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx @@ -1,18 +1,35 @@ 'use client'; import { Key, useState } from 'react'; -import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen'; +import { TabList, Tab, Tabs, TabPanel, Column, Modal, Dialog } from '@umami/react-zen'; import { SessionsDataTable } from './SessionsDataTable'; import { SessionProperties } from './SessionProperties'; -import { useMessages } from '@/components/hooks'; +import { useMessages, useNavigation } from '@/components/hooks'; import { Panel } from '@/components/common/Panel'; import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls'; import { getItem, setItem } from '@/lib/storage'; +import { SessionProfile } from '@/app/(main)/websites/[websiteId]/sessions/SessionProfile'; const KEY_NAME = 'umami.sessions.tab'; export function SessionsPage({ websiteId }) { const [tab, setTab] = useState(getItem(KEY_NAME) || 'activity'); const { formatMessage, labels } = useMessages(); + const { + router, + query: { session }, + updateParams, + } = useNavigation(); + + const handleClose = (close: () => void) => { + router.push(updateParams({ session: undefined })); + close(); + }; + + const handleOpenChange = (isOpen: boolean) => { + if (!isOpen) { + router.push(updateParams({ session: undefined })); + } + }; const handleSelect = (value: Key) => { setItem(KEY_NAME, value); @@ -36,6 +53,26 @@ export function SessionsPage({ websiteId }) { + + + {({ close }) => { + return ( + handleClose(close)} + /> + ); + }} + + ); } diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx index fa3be6c7b..391c57f43 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx @@ -1,6 +1,6 @@ import Link from 'next/link'; import { DataColumn, DataTable } from '@umami/react-zen'; -import { useFormat, useMessages } from '@/components/hooks'; +import { useFormat, useMessages, useNavigation } from '@/components/hooks'; import { Avatar } from '@/components/common/Avatar'; import { TypeIcon } from '@/components/common/TypeIcon'; import { DateDistance } from '@/components/common/DateDistance'; @@ -8,12 +8,13 @@ import { DateDistance } from '@/components/common/DateDistance'; export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) { const { formatMessage, labels } = useMessages(); const { formatValue } = useFormat(); + const { updateParams } = useNavigation(); return ( {(row: any) => ( - + )} diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/page.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/page.tsx deleted file mode 100644 index 8d85a7c73..000000000 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/page.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { SessionDetailsPage } from './SessionDetailsPage'; -import { Metadata } from 'next'; - -export default async function WebsitePage({ - params, -}: { - params: Promise<{ websiteId: string; sessionId: string }>; -}) { - const { websiteId, sessionId } = await params; - - return ; -} - -export const metadata: Metadata = { - title: 'Websites', -}; diff --git a/src/components/common/LoadingPanel.tsx b/src/components/common/LoadingPanel.tsx index a0159a029..b3ff7a09f 100644 --- a/src/components/common/LoadingPanel.tsx +++ b/src/components/common/LoadingPanel.tsx @@ -29,25 +29,31 @@ export function LoadingPanel({ }: LoadingPanelProps) { const empty = isEmpty ?? checkEmpty(data); - return ( - <> - {/* Show loading spinner only if no data exists */} - {(isLoading || isFetching) && ( - - - - )} + // Show loading spinner only if no data exists + if (isLoading || isFetching) { + return ( + + + + ); + } - {/* Show error */} - {error && } + // Show error + if (error) { + return ; + } - {/* Show empty state (once loaded) */} - {!error && !isLoading && !isFetching && empty && renderEmpty()} + // Show empty state (once loaded) + if (!error && !isLoading && !isFetching && empty) { + return renderEmpty(); + } - {/* Show main content when data exists */} - {!isLoading && !isFetching && !error && !empty && children} - - ); + // Show main content when data exists + if (!isLoading && !isFetching && !error && !empty) { + return children; + } + + return null; } function checkEmpty(data: any) { diff --git a/src/components/hooks/queries/useWebsiteSessionQuery.ts b/src/components/hooks/queries/useWebsiteSessionQuery.ts index 053dae315..21e949114 100644 --- a/src/components/hooks/queries/useWebsiteSessionQuery.ts +++ b/src/components/hooks/queries/useWebsiteSessionQuery.ts @@ -8,5 +8,6 @@ export function useWebsiteSessionQuery(websiteId: string, sessionId: string) { queryFn: () => { return get(`/websites/${websiteId}/sessions/${sessionId}`); }, + enabled: Boolean(websiteId && sessionId), }); } diff --git a/src/components/hooks/useDateRange.ts b/src/components/hooks/useDateRange.ts index 0b8db7ce1..b5d967edb 100644 --- a/src/components/hooks/useDateRange.ts +++ b/src/components/hooks/useDateRange.ts @@ -6,7 +6,7 @@ import { DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants'; export function useDateRange(options: { ignoreOffset?: boolean } = {}) { const { - query: { date = DEFAULT_DATE_RANGE_VALUE, offset = 0, compare = 'prev', all }, + query: { date = DEFAULT_DATE_RANGE_VALUE, offset = 0, compare = 'prev' }, } = useNavigation(); const { locale } = useLocale(); @@ -24,7 +24,7 @@ export function useDateRange(options: { ignoreOffset?: boolean } = {}) { date, offset, compare, - isAllTime: !!all, + isAllTime: date.endsWith(`:all`), isCustomRange: date.startsWith('range:'), dateRange, dateCompare, diff --git a/src/components/input/DateFilter.tsx b/src/components/input/DateFilter.tsx index cd0164915..44c725cf8 100644 --- a/src/components/input/DateFilter.tsx +++ b/src/components/input/DateFilter.tsx @@ -99,11 +99,13 @@ export function DateFilter({ ); }; + const selectedValue = value.endsWith(':all') ? 'all' : value; + return ( <> , + style: { maxHeight: '400px' }, }} > {({ id, name }: any) => {name}} From c5994e5eb63ac922589ff52b2af4322489f49244 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 5 Oct 2025 15:34:37 -0700 Subject: [PATCH 2/4] Save name after website select. Fixed types. --- package.components.json | 2 +- .../hooks/queries/useEventDataEventsQuery.ts | 2 +- .../hooks/queries/useEventDataPropertiesQuery.ts | 2 +- src/components/hooks/queries/useEventDataQuery.ts | 2 +- .../hooks/queries/useEventDataValuesQuery.ts | 2 +- src/components/hooks/queries/useResultQuery.ts | 2 +- .../queries/useSessionDataPropertiesQuery.ts | 2 +- .../hooks/queries/useSessionDataValuesQuery.ts | 2 +- .../hooks/queries/useWebsiteEventsQuery.ts | 2 +- .../hooks/queries/useWebsiteEventsSeriesQuery.ts | 2 +- .../queries/useWebsiteExpandedMetricsQuery.ts | 2 +- .../hooks/queries/useWebsiteMetricsQuery.ts | 2 +- .../hooks/queries/useWebsitePageviewsQuery.ts | 2 +- .../hooks/queries/useWebsiteSessionStatsQuery.ts | 2 +- .../hooks/queries/useWebsiteSessionsQuery.ts | 2 +- .../hooks/queries/useWebsiteStatsQuery.ts | 2 +- .../hooks/queries/useWeeklyTrafficQuery.ts | 2 +- src/components/input/ExportButton.tsx | 2 +- src/components/input/WebsiteSelect.tsx | 15 +++++++++++---- 19 files changed, 29 insertions(+), 22 deletions(-) diff --git a/package.components.json b/package.components.json index 927e06604..d231f5b9b 100644 --- a/package.components.json +++ b/package.components.json @@ -1,6 +1,6 @@ { "name": "@umami/components", - "version": "0.127.0", + "version": "0.128.0", "description": "Umami React components.", "author": "Mike Cao ", "license": "MIT", diff --git a/src/components/hooks/queries/useEventDataEventsQuery.ts b/src/components/hooks/queries/useEventDataEventsQuery.ts index 5273181e5..2c91dece5 100644 --- a/src/components/hooks/queries/useEventDataEventsQuery.ts +++ b/src/components/hooks/queries/useEventDataEventsQuery.ts @@ -5,7 +5,7 @@ import { ReactQueryOptions } from '@/lib/types'; export function useEventDataEventsQuery(websiteId: string, options?: ReactQueryOptions) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useEventDataPropertiesQuery.ts b/src/components/hooks/queries/useEventDataPropertiesQuery.ts index 26929700b..19a2eb61d 100644 --- a/src/components/hooks/queries/useEventDataPropertiesQuery.ts +++ b/src/components/hooks/queries/useEventDataPropertiesQuery.ts @@ -5,7 +5,7 @@ import { ReactQueryOptions } from '@/lib/types'; export function useEventDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useEventDataQuery.ts b/src/components/hooks/queries/useEventDataQuery.ts index 00f5d14de..7e6f66ec2 100644 --- a/src/components/hooks/queries/useEventDataQuery.ts +++ b/src/components/hooks/queries/useEventDataQuery.ts @@ -5,7 +5,7 @@ import { ReactQueryOptions } from '@/lib/types'; export function useEventDataQuery(websiteId: string, eventId: string, options?: ReactQueryOptions) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const params = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useEventDataValuesQuery.ts b/src/components/hooks/queries/useEventDataValuesQuery.ts index 4b56e5537..de3b0590b 100644 --- a/src/components/hooks/queries/useEventDataValuesQuery.ts +++ b/src/components/hooks/queries/useEventDataValuesQuery.ts @@ -10,7 +10,7 @@ export function useEventDataValuesQuery( options?: ReactQueryOptions, ) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useResultQuery.ts b/src/components/hooks/queries/useResultQuery.ts index cbc5bf01b..7b7a7bd18 100644 --- a/src/components/hooks/queries/useResultQuery.ts +++ b/src/components/hooks/queries/useResultQuery.ts @@ -10,7 +10,7 @@ export function useResultQuery( ) { const { websiteId, ...parameters } = params; const { post, useQuery } = useApi(); - const { startDate, endDate, timezone } = useDateParameters(websiteId); + const { startDate, endDate, timezone } = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useSessionDataPropertiesQuery.ts b/src/components/hooks/queries/useSessionDataPropertiesQuery.ts index 633a6ff83..2bb139501 100644 --- a/src/components/hooks/queries/useSessionDataPropertiesQuery.ts +++ b/src/components/hooks/queries/useSessionDataPropertiesQuery.ts @@ -5,7 +5,7 @@ import { ReactQueryOptions } from '@/lib/types'; export function useSessionDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useSessionDataValuesQuery.ts b/src/components/hooks/queries/useSessionDataValuesQuery.ts index bf7a8cef7..05373d21a 100644 --- a/src/components/hooks/queries/useSessionDataValuesQuery.ts +++ b/src/components/hooks/queries/useSessionDataValuesQuery.ts @@ -9,7 +9,7 @@ export function useSessionDataValuesQuery( options?: ReactQueryOptions, ) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useWebsiteEventsQuery.ts b/src/components/hooks/queries/useWebsiteEventsQuery.ts index 0798524ce..51902d2f3 100644 --- a/src/components/hooks/queries/useWebsiteEventsQuery.ts +++ b/src/components/hooks/queries/useWebsiteEventsQuery.ts @@ -15,7 +15,7 @@ export function useWebsiteEventsQuery( options?: ReactQueryOptions, ) { const { get } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return usePagedQuery({ diff --git a/src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts b/src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts index 86fbe428d..50861cee6 100644 --- a/src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts +++ b/src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts @@ -5,7 +5,7 @@ import { ReactQueryOptions } from '@/lib/types'; export function useWebsiteEventsSeriesQuery(websiteId: string, options?: ReactQueryOptions) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useWebsiteExpandedMetricsQuery.ts b/src/components/hooks/queries/useWebsiteExpandedMetricsQuery.ts index 9718dfe13..8fc9fc7bf 100644 --- a/src/components/hooks/queries/useWebsiteExpandedMetricsQuery.ts +++ b/src/components/hooks/queries/useWebsiteExpandedMetricsQuery.ts @@ -19,7 +19,7 @@ export function useWebsiteExpandedMetricsQuery( options?: ReactQueryOptions, ) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useWebsiteMetricsQuery.ts b/src/components/hooks/queries/useWebsiteMetricsQuery.ts index f521798e2..8370db8eb 100644 --- a/src/components/hooks/queries/useWebsiteMetricsQuery.ts +++ b/src/components/hooks/queries/useWebsiteMetricsQuery.ts @@ -15,7 +15,7 @@ export function useWebsiteMetricsQuery( options?: ReactQueryOptions, ) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useWebsitePageviewsQuery.ts b/src/components/hooks/queries/useWebsitePageviewsQuery.ts index c2a12b0b4..5784cae8e 100644 --- a/src/components/hooks/queries/useWebsitePageviewsQuery.ts +++ b/src/components/hooks/queries/useWebsitePageviewsQuery.ts @@ -13,7 +13,7 @@ export function useWebsitePageviewsQuery( options?: ReactQueryOptions, ) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const queryParams = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useWebsiteSessionStatsQuery.ts b/src/components/hooks/queries/useWebsiteSessionStatsQuery.ts index 8d1f5d556..9c9aaddc7 100644 --- a/src/components/hooks/queries/useWebsiteSessionStatsQuery.ts +++ b/src/components/hooks/queries/useWebsiteSessionStatsQuery.ts @@ -4,7 +4,7 @@ import { useDateParameters } from '../useDateParameters'; export function useWebsiteSessionStatsQuery(websiteId: string, options?: Record) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useWebsiteSessionsQuery.ts b/src/components/hooks/queries/useWebsiteSessionsQuery.ts index f16cfc85e..a3de19ca0 100644 --- a/src/components/hooks/queries/useWebsiteSessionsQuery.ts +++ b/src/components/hooks/queries/useWebsiteSessionsQuery.ts @@ -10,7 +10,7 @@ export function useWebsiteSessionsQuery( ) { const { get } = useApi(); const { modified } = useModified(`sessions`); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return usePagedQuery({ diff --git a/src/components/hooks/queries/useWebsiteStatsQuery.ts b/src/components/hooks/queries/useWebsiteStatsQuery.ts index c42613a9c..98ae9d8ff 100644 --- a/src/components/hooks/queries/useWebsiteStatsQuery.ts +++ b/src/components/hooks/queries/useWebsiteStatsQuery.ts @@ -23,7 +23,7 @@ export function useWebsiteStatsQuery( options?: UseQueryOptions, ) { const { get, useQuery } = useApi(); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/hooks/queries/useWeeklyTrafficQuery.ts b/src/components/hooks/queries/useWeeklyTrafficQuery.ts index fe0bbae19..5c09670ad 100644 --- a/src/components/hooks/queries/useWeeklyTrafficQuery.ts +++ b/src/components/hooks/queries/useWeeklyTrafficQuery.ts @@ -6,7 +6,7 @@ import { useFilterParameters } from '@/components/hooks/useFilterParameters'; export function useWeeklyTrafficQuery(websiteId: string, params?: Record) { const { get, useQuery } = useApi(); const { modified } = useModified(`sessions`); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); return useQuery({ diff --git a/src/components/input/ExportButton.tsx b/src/components/input/ExportButton.tsx index 76f63e2c7..15fb21240 100644 --- a/src/components/input/ExportButton.tsx +++ b/src/components/input/ExportButton.tsx @@ -9,7 +9,7 @@ import { useFilterParameters } from '@/components/hooks/useFilterParameters'; export function ExportButton({ websiteId }: { websiteId: string }) { const { formatMessage, labels } = useMessages(); const [isLoading, setIsLoading] = useState(false); - const date = useDateParameters(websiteId); + const date = useDateParameters(); const filters = useFilterParameters(); const searchParams = useSearchParams(); const { get } = useApi(); diff --git a/src/components/input/WebsiteSelect.tsx b/src/components/input/WebsiteSelect.tsx index 21e8ad228..01861fbd4 100644 --- a/src/components/input/WebsiteSelect.tsx +++ b/src/components/input/WebsiteSelect.tsx @@ -14,14 +14,16 @@ export function WebsiteSelect({ teamId?: string; includeTeams?: boolean; } & SelectProps) { - const website = useWebsite(); const { formatMessage, messages } = useMessages(); + const website = useWebsite(); + const [name, setName] = useState(website?.name); const [search, setSearch] = useState(''); const { user } = useLoginQuery(); const { data, isLoading } = useUserWebsitesQuery( { userId: user?.id, teamId }, { search, pageSize: 10, includeTeams }, ); + const listItems: { id: string; name: string }[] = data?.['data'] || []; const handleSearch = (value: string) => { setSearch(value); @@ -31,10 +33,15 @@ export function WebsiteSelect({ setSearch(''); }; + const handleChange = (id: string) => { + setName(listItems.find(item => item.id === id)?.name); + onChange(id); + }; + const renderValue = () => { return ( - {website.name} + {name} ); }; @@ -42,13 +49,13 @@ export function WebsiteSelect({ return (