diff --git a/app/sites/[id]/behavior/page.tsx b/app/sites/[id]/behavior/page.tsx index a7e5794..a172a39 100644 --- a/app/sites/[id]/behavior/page.tsx +++ b/app/sites/[id]/behavior/page.tsx @@ -1,30 +1,19 @@ 'use client' -import { useCallback, useEffect, useRef, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' import { useParams } from 'next/navigation' import { getDateRange, formatDate } from '@ciphera-net/ui' import { Select, DatePicker } from '@ciphera-net/ui' -import { toast } from '@ciphera-net/ui' import dynamic from 'next/dynamic' -import { - getFrustrationSummary, - getRageClicks, - getDeadClicks, - getFrustrationByPage, - type FrustrationSummary, - type FrustrationElement, - type FrustrationByPage, -} from '@/lib/api/stats' +import { getRageClicks, getDeadClicks } from '@/lib/api/stats' import FrustrationSummaryCards from '@/components/behavior/FrustrationSummaryCards' import FrustrationTable from '@/components/behavior/FrustrationTable' import FrustrationByPageTable from '@/components/behavior/FrustrationByPageTable' import FrustrationTrend from '@/components/behavior/FrustrationTrend' -import { useDashboard } from '@/lib/swr/dashboard' +import { useDashboard, useBehavior } from '@/lib/swr/dashboard' const ScrollDepth = dynamic(() => import('@/components/dashboard/ScrollDepth')) -const TABLE_LIMIT = 7 - function getThisWeekRange(): { start: string; end: string } { const today = new Date() const dayOfWeek = today.getDay() @@ -47,58 +36,18 @@ export default function BehaviorPage() { const [dateRange, setDateRange] = useState(() => getDateRange(30)) const [isDatePickerOpen, setIsDatePickerOpen] = useState(false) - // Frustration data - const [summary, setSummary] = useState(null) - const [rageClicks, setRageClicks] = useState<{ items: FrustrationElement[]; total: number }>({ items: [], total: 0 }) - const [deadClicks, setDeadClicks] = useState<{ items: FrustrationElement[]; total: number }>({ items: [], total: 0 }) - const [byPage, setByPage] = useState([]) - const [loading, setLoading] = useState(true) - const [error, setError] = useState(false) - const refreshRef = useRef | null>(null) + // Single request for all frustration data + const { data: behavior, isLoading: loading, error: behaviorError } = useBehavior(siteId, dateRange.start, dateRange.end) // Fetch dashboard data for scroll depth (goal_counts + stats) const { data: dashboard } = useDashboard(siteId, dateRange.start, dateRange.end) - const fetchData = useCallback(async () => { - try { - const [summaryData, rageData, deadData, pageData] = await Promise.all([ - getFrustrationSummary(siteId, dateRange.start, dateRange.end), - getRageClicks(siteId, dateRange.start, dateRange.end, TABLE_LIMIT), - getDeadClicks(siteId, dateRange.start, dateRange.end, TABLE_LIMIT), - getFrustrationByPage(siteId, dateRange.start, dateRange.end), - ]) - setSummary(summaryData) - setRageClicks(rageData) - setDeadClicks(deadData) - setByPage(pageData) - setError(false) - } catch { - setError(true) - toast.error('Failed to load behavior data') - } finally { - setLoading(false) - } - }, [siteId, dateRange.start, dateRange.end]) - - // Fetch on mount and when date range changes - useEffect(() => { - setLoading(true) - fetchData() - }, [fetchData]) - - // 60-second refresh interval - useEffect(() => { - refreshRef.current = setInterval(fetchData, 60_000) - return () => { - if (refreshRef.current) clearInterval(refreshRef.current) - } - }, [fetchData]) - useEffect(() => { const domain = dashboard?.site?.domain document.title = domain ? `Behavior · ${domain} | Pulse` : 'Behavior | Pulse' }, [dashboard?.site?.domain]) + // On-demand fetchers for modal "view all" const fetchAllRage = useCallback( () => getRageClicks(siteId, dateRange.start, dateRange.end, 100), [siteId, dateRange.start, dateRange.end] @@ -109,6 +58,11 @@ export default function BehaviorPage() { [siteId, dateRange.start, dateRange.end] ) + const summary = behavior?.summary ?? null + const rageClicks = behavior?.rage_clicks ?? { items: [], total: 0 } + const deadClicks = behavior?.dead_clicks ?? { items: [], total: 0 } + const byPage = behavior?.by_page ?? [] + return (
{/* Header */} @@ -189,7 +143,7 @@ export default function BehaviorPage() { {/* Scroll depth + Frustration trend — hide when data failed to load */} - {!error && ( + {!behaviorError && (
{ + return apiRequest(`/sites/${siteId}/behavior${buildQuery({ startDate, endDate, limit })}`) + .then(r => r ?? emptyBehavior) +} + export function getFrustrationSummary(siteId: string, startDate?: string, endDate?: string): Promise { return apiRequest(`/sites/${siteId}/frustration/summary${buildQuery({ startDate, endDate })}`) .then(r => r ?? { rage_clicks: 0, rage_unique_elements: 0, rage_top_page: '', dead_clicks: 0, dead_unique_elements: 0, dead_top_page: '', prev_rage_clicks: 0, prev_dead_clicks: 0 }) diff --git a/lib/swr/dashboard.ts b/lib/swr/dashboard.ts index e6e9813..724c868 100644 --- a/lib/swr/dashboard.ts +++ b/lib/swr/dashboard.ts @@ -15,6 +15,7 @@ import { getRealtime, getStats, getDailyStats, + getBehavior, } from '@/lib/api/stats' import { listAnnotations } from '@/lib/api/annotations' import type { Annotation } from '@/lib/api/annotations' @@ -32,6 +33,7 @@ import type { DashboardReferrersData, DashboardPerformanceData, DashboardGoalsData, + BehaviorData, } from '@/lib/api/stats' // * SWR fetcher functions @@ -52,6 +54,7 @@ const fetchers = { campaigns: (siteId: string, start: string, end: string, limit: number) => getCampaigns(siteId, start, end, limit), annotations: (siteId: string, start: string, end: string) => listAnnotations(siteId, start, end), + behavior: (siteId: string, start: string, end: string) => getBehavior(siteId, start, end), } // * Standard SWR config for dashboard data @@ -265,5 +268,18 @@ export function useAnnotations(siteId: string, startDate: string, endDate: strin ) } +// * Hook for bundled behavior data (all frustration signals in one request) +export function useBehavior(siteId: string, start: string, end: string) { + return useSWR( + siteId && start && end ? ['behavior', siteId, start, end] : null, + () => fetchers.behavior(siteId, start, end), + { + ...dashboardSWRConfig, + refreshInterval: 60 * 1000, + dedupingInterval: 10 * 1000, + } + ) +} + // * Re-export for convenience export { fetchers }