refactor session replays to be per visit. sessions persist too long resulting in low-quality recordings

src/components/hooks/index.ts

@@ -35,6 +35,7 @@ export * from './queries/useSessionActivityQuery';
 export * from './queries/useSessionDataPropertiesQuery';
 export * from './queries/useSessionDataQuery';
 export * from './queries/useSessionDataValuesQuery';
+export * from './queries/useSessionReplaysQuery';
 export * from './queries/useShareTokenQuery';
 export * from './queries/useTeamMembersQuery';
 export * from './queries/useTeamQuery';

src/components/hooks/queries/useReplayQuery.ts

@@ -1,13 +1,13 @@
 import { useApi } from '../useApi';
 
-export function useReplayQuery(websiteId: string, sessionId: string) {
+export function useReplayQuery(websiteId: string, replayId: string) {
   const { get, useQuery } = useApi();
 
   return useQuery({
-    queryKey: ['replay', { websiteId, sessionId }],
+    queryKey: ['replay', { websiteId, replayId }],
     queryFn: () => {
-      return get(`/websites/${websiteId}/replays/${sessionId}`);
+      return get(`/websites/${websiteId}/replays/${replayId}`);
     },
-    enabled: Boolean(websiteId && sessionId),
+    enabled: Boolean(websiteId && replayId),
   });
 }

src/components/hooks/queries/useSessionReplaysQuery.ts

@@ -0,0 +1,21 @@
+import { useApi } from '../useApi';
+import { useDateParameters } from '../useDateParameters';
+import { usePagedQuery } from '../usePagedQuery';
+
+export function useSessionReplaysQuery(websiteId: string, sessionId: string) {
+  const { get } = useApi();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
+
+  return usePagedQuery({
+    queryKey: ['session-replays', { websiteId, sessionId, startAt, endAt, unit, timezone }],
+    queryFn: pageParams => {
+      return get(`/websites/${websiteId}/sessions/${sessionId}/replays`, {
+        startAt,
+        endAt,
+        unit,
+        timezone,
+        ...pageParams,
+      });
+    },
+  });
+}

src/components/hooks/queries/useWebsiteSessionQuery.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useWebsiteSessionQuery(websiteId: string, sessionId: string) {
+export function useWebsiteSessionQuery(websiteId: string, sessionId: string | undefined) {
   const { get, useQuery } = useApi();
 
   return useQuery({

src/components/messages.ts

@@ -359,6 +359,7 @@ export const labels: Record<string, string> = {
   sampleSize: 'label.sample-size',
   replays: 'label.replays',
   replay: 'label.replay',
+  replayId: 'label.replay-id',
   replayEnabled: 'label.replay-enabled',
   sampleRate: 'label.sample-rate',
   maskLevel: 'label.mask-level',