Fixed pages.

src/app/(main)/reports/[reportId]/BaseParameters.tsx

@@ -4,7 +4,7 @@ import { parseDateRange } from 'lib/date';
 import DateFilter from 'components/input/DateFilter';
 import WebsiteSelect from 'components/input/WebsiteSelect';
 import { useMessages, useTeamUrl } from 'components/hooks';
-import { ReportContext } from './ReportPage';
+import { ReportContext } from './Report';
 
 export interface BaseParametersProps {
   showWebsiteSelect?: boolean;

src/app/(main)/reports/[reportId]/Report.tsx

@@ -0,0 +1,33 @@
+import { createContext, ReactNode } from 'react';
+import { Loading } from 'react-basics';
+import classNames from 'classnames';
+import { useReport } from 'components/hooks';
+import styles from './Report.module.css';
+
+export const ReportContext = createContext(null);
+
+export function Report({
+  reportId,
+  defaultParameters,
+  children,
+  className,
+}: {
+  reportId: string;
+  defaultParameters: { [key: string]: any };
+  children: ReactNode;
+  className?: string;
+}) {
+  const report = useReport(reportId, defaultParameters);
+
+  if (!report) {
+    return reportId ? <Loading position="page" /> : null;
+  }
+
+  return (
+    <ReportContext.Provider value={report}>
+      <div className={classNames(styles.container, className)}>{children}</div>
+    </ReportContext.Provider>
+  );
+}
+
+export default Report;

src/app/(main)/reports/[reportId]/ReportBody.tsx

@@ -1,6 +1,6 @@
 import styles from './ReportBody.module.css';
 import { useContext } from 'react';
-import { ReportContext } from './ReportPage';
+import { ReportContext } from './Report';
 
 export function ReportBody({ children }) {
   const { report } = useContext(ReportContext);

src/app/(main)/reports/[reportId]/ReportHeader.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
 import { useMessages, useApi, useNavigation, useTeamUrl } from 'components/hooks';
-import { ReportContext } from './ReportPage';
+import { ReportContext } from './Report';
 import styles from './ReportHeader.module.css';
 import { REPORT_TYPES } from 'lib/constants';
 

src/app/(main)/reports/[reportId]/ReportMenu.tsx

@@ -1,6 +1,6 @@
 import styles from './ReportMenu.module.css';
 import { useContext } from 'react';
-import { ReportContext } from './ReportPage';
+import { ReportContext } from './Report';
 
 export function ReportMenu({ children }) {
   const { report } = useContext(ReportContext);

src/app/(main)/reports/[reportId]/ReportPage.tsx

@@ -1,33 +1,6 @@
-import { createContext, ReactNode } from 'react';
+'use client';
-import { Loading } from 'react-basics';
+import ReportDetails from './ReportDetails';
-import classNames from 'classnames';
-import { useReport } from 'components/hooks';
-import styles from './Report.module.css';
 
-export const ReportContext = createContext(null);
+export default function ReportPage({ reportId }) {
-
+  return <ReportDetails reportId={reportId} />;
-export function ReportPage({
-  reportId,
-  defaultParameters,
-  children,
-  className,
-}: {
-  reportId: string;
-  defaultParameters: { [key: string]: any };
-  children: ReactNode;
-  className?: string;
-}) {
-  const report = useReport(reportId, defaultParameters);
-
-  if (!report) {
-    return reportId ? <Loading position="page" /> : null;
-  }
-
-  return (
-    <ReportContext.Provider value={report}>
-      <div className={classNames(styles.container, className)}>{children}</div>
-    </ReportContext.Provider>
-  );
 }
-
-export default ReportPage;

src/app/(main)/reports/[reportId]/page.tsx

@@ -1,12 +1,8 @@
-import ReportDetails from './ReportDetails';
 import { Metadata } from 'next';
+import ReportPage from './ReportPage';
 
-export default function ReportDetailsPage({ params: { reportId } }) {
+export default function ({ params: { reportId } }) {
-  if (!reportId) {
+  return <ReportPage reportId={reportId} />;
-    return null;
-  }
-
-  return <ReportDetails reportId={reportId} />;
 }
 
 export const metadata: Metadata = {

src/app/(main)/reports/event-data/EventDataParameters.tsx

@@ -4,7 +4,7 @@ import Empty from 'components/common/Empty';
 import Icons from 'components/icons';
 import { useApi, useMessages } from 'components/hooks';
 import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
-import { ReportContext } from '../[reportId]/ReportPage';
+import { ReportContext } from '../[reportId]/Report';
 import FieldAddForm from '../[reportId]/FieldAddForm';
 import ParameterList from '../[reportId]/ParameterList';
 import BaseParameters from '../[reportId]/BaseParameters';

src/app/(main)/reports/event-data/EventDataReport.tsx

@@ -1,4 +1,4 @@
-import ReportPage from '../[reportId]/ReportPage';
+import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -13,7 +13,7 @@ const defaultParameters = {
 
 export default function EventDataReport({ reportId }: { reportId?: string }) {
   return (
-    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Nodes />} />
       <ReportMenu>
         <EventDataParameters />
@@ -21,6 +21,6 @@ export default function EventDataReport({ reportId }: { reportId?: string }) {
       <ReportBody>
         <EventDataTable />
       </ReportBody>
-    </ReportPage>
+    </Report>
   );
 }

src/app/(main)/reports/event-data/EventDataTable.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { useMessages } from 'components/hooks';
-import { ReportContext } from '../[reportId]/ReportPage';
+import { ReportContext } from '../[reportId]/Report';
 
 export function EventDataTable() {
   const { report } = useContext(ReportContext);

src/app/(main)/reports/event-data/page.tsx

@@ -1,8 +1,8 @@
 import { Metadata } from 'next';
-import EventDataReport from './EventDataReport';
+import EventDataReportPage from './EventDataReportPage';
 
 export default function () {
-  return <EventDataReport />;
+  return <EventDataReportPage />;
 }
 
 export const metadata: Metadata = {

src/app/(main)/reports/funnel/FunnelChart.tsx

@@ -3,7 +3,7 @@ import { Loading, StatusLight } from 'react-basics';
 import { useMessages, useTheme } from 'components/hooks';
 import BarChart from 'components/metrics/BarChart';
 import { formatLongNumber } from 'lib/format';
-import { ReportContext } from '../[reportId]/ReportPage';
+import { ReportContext } from '../[reportId]/Report';
 import styles from './FunnelChart.module.css';
 
 export interface FunnelChartProps {

src/app/(main)/reports/funnel/FunnelParameters.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react-basics';
 import Icons from 'components/icons';
 import UrlAddForm from './UrlAddForm';
-import { ReportContext } from '../[reportId]/ReportPage';
+import { ReportContext } from '../[reportId]/Report';
 import BaseParameters from '../[reportId]/BaseParameters';
 import ParameterList from '../[reportId]/ParameterList';
 import PopupForm from '../[reportId]/PopupForm';

src/app/(main)/reports/funnel/FunnelReport.tsx

@@ -1,7 +1,7 @@
 import FunnelChart from './FunnelChart';
 import FunnelTable from './FunnelTable';
 import FunnelParameters from './FunnelParameters';
-import ReportPage from '../[reportId]/ReportPage';
+import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -15,7 +15,7 @@ const defaultParameters = {
 
 export default function FunnelReport({ reportId }: { reportId?: string }) {
   return (
-    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Funnel />} />
       <ReportMenu>
         <FunnelParameters />
@@ -24,6 +24,6 @@ export default function FunnelReport({ reportId }: { reportId?: string }) {
         <FunnelChart />
         <FunnelTable />
       </ReportBody>
-    </ReportPage>
+    </Report>
   );
 }

src/app/(main)/reports/funnel/FunnelTable.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import ListTable from 'components/metrics/ListTable';
 import { useMessages } from 'components/hooks';
-import { ReportContext } from '../[reportId]/ReportPage';
+import { ReportContext } from '../[reportId]/Report';
 
 export function FunnelTable() {
   const { report } = useContext(ReportContext);

src/app/(main)/reports/insights/InsightsParameters.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-basics';
 import Icons from 'components/icons';
 import BaseParameters from '../[reportId]/BaseParameters';
-import { ReportContext } from '../[reportId]/ReportPage';
+import { ReportContext } from '../[reportId]/Report';
 import ParameterList from '../[reportId]/ParameterList';
 import FilterSelectForm from '../[reportId]/FilterSelectForm';
 import FieldSelectForm from '../[reportId]/FieldSelectForm';

src/app/(main)/reports/insights/InsightsReport.tsx

@@ -1,4 +1,4 @@
-import ReportPage from '../[reportId]/ReportPage';
+import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -14,7 +14,7 @@ const defaultParameters = {
 
 export default function InsightsReport({ reportId }: { reportId?: string }) {
   return (
-    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Lightbulb />} />
       <ReportMenu>
         <InsightsParameters />
@@ -22,6 +22,6 @@ export default function InsightsReport({ reportId }: { reportId?: string }) {
       <ReportBody>
         <InsightsTable />
       </ReportBody>
-    </ReportPage>
+    </Report>
   );
 }

src/app/(main)/reports/insights/InsightsTable.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { useFormat, useMessages } from 'components/hooks';
-import { ReportContext } from '../[reportId]/ReportPage';
+import { ReportContext } from '../[reportId]/Report';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 
 export function InsightsTable() {

src/app/(main)/reports/retention/RetentionParameters.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { useMessages } from 'components/hooks';
 import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
-import { ReportContext } from '../[reportId]/ReportPage';
+import { ReportContext } from '../[reportId]/Report';
 import { MonthSelect } from 'components/input/MonthSelect';
 import BaseParameters from '../[reportId]/BaseParameters';
 import { parseDateRange } from 'lib/date';

src/app/(main)/reports/retention/RetentionReport.tsx

@@ -1,6 +1,6 @@
 import RetentionTable from './RetentionTable';
 import RetentionParameters from './RetentionParameters';
-import ReportPage from '../[reportId]/ReportPage';
+import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -20,7 +20,7 @@ const defaultParameters = {
 
 export default function RetentionReport({ reportId }: { reportId?: string }) {
   return (
-    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Magnet />} />
       <ReportMenu>
         <RetentionParameters />
@@ -28,6 +28,6 @@ export default function RetentionReport({ reportId }: { reportId?: string }) {
       <ReportBody>
         <RetentionTable />
       </ReportBody>
-    </ReportPage>
+    </Report>
   );
 }

src/app/(main)/websites/[websiteId]/event-data/EventDataPage.tsx

@@ -0,0 +1,12 @@
+'use client';
+import WebsiteHeader from '../WebsiteHeader';
+import WebsiteEventData from './WebsiteEventData';
+
+export default function EventDataPage({ websiteId }) {
+  return (
+    <>
+      <WebsiteHeader websiteId={websiteId} />
+      <WebsiteEventData websiteId={websiteId} />
+    </>
+  );
+}

src/app/(main)/websites/[websiteId]/event-data/page.tsx

@@ -1,15 +1,10 @@
-import WebsiteHeader from '../WebsiteHeader';
+import { Metadata } from 'next';
-import WebsiteEventData from './WebsiteEventData';
+import EventDataPage from './EventDataPage';
 
-export default function WebsiteEventDataPage({ params: { websiteId } }) {
+export default async function ({ params: { websiteId } }) {
-  if (!websiteId) {
+  return <EventDataPage websiteId={websiteId} />;
-    return null;
-  }
-
-  return (
-    <>
-      <WebsiteHeader websiteId={websiteId} />
-      <WebsiteEventData websiteId={websiteId} />
-    </>
-  );
 }
+
+export const metadata: Metadata = {
+  title: 'Event Data | Umami',
+};