Event data report UI.

pages/reports/[id].js

@@ -1,20 +1,24 @@
 import { useRouter } from 'next/router';
 import AppLayout from 'components/layout/AppLayout';
-import FunnelReport from 'components/pages/reports/funnel/FunnelReport';
-import useMessages from 'hooks/useMessages';
+import ReportDetails from 'components/pages/reports/ReportDetails';
+import { useApi, useMessages } from 'hooks';
 
 export default function ReportsPage() {
   const { formatMessage, labels } = useMessages();
   const router = useRouter();
   const { id } = router.query;
+  const { get, useQuery } = useApi();
+  const { data: report } = useQuery(['reports', id], () => get(`/reports/${id}`), {
+    enabled: !!id,
+  });
 
-  if (!id) {
+  if (!id || !report) {
     return null;
   }
 
   return (
     <AppLayout title={formatMessage(labels.websites)}>
-      <FunnelReport reportId={id} />
+      <ReportDetails reportId={report.id} reportType={report.type} />
     </AppLayout>
   );
 }