Move share page redirect logic to ShareProvider

Centralizes the single-section redirect logic in ShareProvider instead of
SharePage, reducing useEffect complexity and preventing children from
rendering during redirect.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/share/ShareProvider.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { Loading } from '@umami/react-zen';
-import { createContext, type ReactNode } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { createContext, type ReactNode, useEffect } from 'react';
 import { useShareTokenQuery } from '@/components/hooks';
 import type { WhiteLabel } from '@/lib/types';
 
@@ -14,14 +15,48 @@ export interface ShareData {
 
 export const ShareContext = createContext<ShareData>(null);
 
+const ALL_SECTION_IDS = [
+  'overview',
+  'events',
+  'sessions',
+  'realtime',
+  'compare',
+  'breakdown',
+  'goals',
+  'funnels',
+  'journeys',
+  'retention',
+  'utm',
+  'revenue',
+  'attribution',
+];
+
 export function ShareProvider({ shareId, children }: { shareId: string; children: ReactNode }) {
   const { share, isLoading, isFetching } = useShareTokenQuery(shareId);
+  const router = useRouter();
+  const pathname = usePathname();
+  const path = pathname.split('/')[3];
+
+  const allowedSections = share?.parameters
+    ? ALL_SECTION_IDS.filter(id => share.parameters[id] !== false)
+    : [];
+
+  const shouldRedirect =
+    allowedSections.length === 1 &&
+    allowedSections[0] !== 'overview' &&
+    (path === undefined || path === '' || path === 'overview');
+
+  useEffect(() => {
+    if (shouldRedirect) {
+      router.replace(`/share/${shareId}/${allowedSections[0]}`);
+    }
+  }, [shouldRedirect, shareId, allowedSections, router]);
 
   if (isFetching && isLoading) {
     return <Loading placement="absolute" />;
   }
 
-  if (!share) {
+  if (!share || shouldRedirect) {
     return null;
   }
 

src/app/share/[...shareId]/SharePage.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { Column, Grid, Row, useTheme } from '@umami/react-zen';
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { AttributionPage } from '@/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage';
 import { BreakdownPage } from '@/app/(main)/websites/[websiteId]/(reports)/breakdown/BreakdownPage';
 import { FunnelsPage } from '@/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelsPage';
@@ -39,38 +39,13 @@ const PAGE_COMPONENTS: Record<string, React.ComponentType<{ websiteId: string }>
   attribution: AttributionPage,
 };
 
-// All section IDs that can be enabled/disabled via parameters
+export function SharePage() {
-const ALL_SECTION_IDS = [
-  'overview',
-  'events',
-  'sessions',
-  'realtime',
-  'compare',
-  'breakdown',
-  'goals',
-  'funnels',
-  'journeys',
-  'retention',
-  'utm',
-  'revenue',
-  'attribution',
-];
-
-export function SharePage({ shareId }: { shareId: string }) {
   const share = useShare();
   const { setTheme } = useTheme();
-  const router = useRouter();
   const pathname = usePathname();
   const path = pathname.split('/')[3];
   const { websiteId, parameters = {} } = share;
 
-  // Calculate allowed sections
-  const allowedSections = useMemo(() => {
-    if (!share?.parameters) return [];
-    const params = share.parameters;
-    return ALL_SECTION_IDS.filter(id => params[id] !== false);
-  }, [share?.parameters]);
-
   useEffect(() => {
     const url = new URL(window?.location?.href);
     const theme = url.searchParams.get('theme');
@@ -80,26 +55,6 @@ export function SharePage({ shareId }: { shareId: string }) {
     }
   }, []);
 
-  // Redirect to the only allowed section if there's just one and we're on the base path
-  useEffect(() => {
-    if (
-      allowedSections.length === 1 &&
-      allowedSections[0] !== 'overview' &&
-      (path === '' || path === 'overview')
-    ) {
-      router.replace(`/share/${shareId}/${allowedSections[0]}`);
-    }
-  }, [allowedSections, shareId, path, router]);
-
-  // Redirect to only allowed section - return null while redirecting
-  if (
-    allowedSections.length === 1 &&
-    allowedSections[0] !== 'overview' &&
-    (path === '' || path === 'overview')
-  ) {
-    return null;
-  }
-
   // Check if the requested path is allowed
   const pageKey = path || '';
   const isAllowed = pageKey === '' || pageKey === 'overview' || parameters[pageKey] !== false;

src/app/share/[...shareId]/page.tsx

@@ -7,7 +7,7 @@ export default async function ({ params }: { params: Promise<{ shareId: string[]
 
   return (
     <ShareProvider shareId={slug}>
-      <SharePage shareId={slug} />
+      <SharePage />
     </ShareProvider>
   );
 }