62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { useInfiniteQuery } from '@tanstack/react-query';
|
|
import { createFileRoute } from '@tanstack/react-router';
|
|
import { PageContainer } from '@/components/page-container';
|
|
import { PageHeader } from '@/components/page-header';
|
|
import { SessionsTable } from '@/components/sessions/table';
|
|
import { useSearchQueryState } from '@/hooks/use-search-query-state';
|
|
import { useSessionFilters } from '@/hooks/use-session-filters';
|
|
import { useTRPC } from '@/integrations/trpc/react';
|
|
import { createProjectTitle, PAGE_TITLES } from '@/utils/title';
|
|
|
|
export const Route = createFileRoute(
|
|
'/_app/$organizationId/$projectId/sessions'
|
|
)({
|
|
component: Component,
|
|
head: () => {
|
|
return {
|
|
meta: [
|
|
{
|
|
title: createProjectTitle(PAGE_TITLES.SESSIONS),
|
|
},
|
|
],
|
|
};
|
|
},
|
|
});
|
|
|
|
function Component() {
|
|
const { projectId } = Route.useParams();
|
|
const trpc = useTRPC();
|
|
const { debouncedSearch } = useSearchQueryState();
|
|
const { filters, minPageViews, maxPageViews, minEvents, maxEvents } =
|
|
useSessionFilters();
|
|
|
|
const query = useInfiniteQuery(
|
|
trpc.session.list.infiniteQueryOptions(
|
|
{
|
|
projectId,
|
|
take: 50,
|
|
search: debouncedSearch,
|
|
filters,
|
|
minPageViews,
|
|
maxPageViews,
|
|
minEvents,
|
|
maxEvents,
|
|
},
|
|
{
|
|
getNextPageParam: (lastPage) => lastPage.meta.next,
|
|
}
|
|
)
|
|
);
|
|
|
|
return (
|
|
<PageContainer>
|
|
<PageHeader
|
|
className="mb-8"
|
|
description="Access all your sessions here"
|
|
title="Sessions"
|
|
/>
|
|
<SessionsTable query={query} />
|
|
</PageContainer>
|
|
);
|
|
}
|