Added report context. Removed report store.

pages/api/reports/[id].ts

@@ -1,59 +1,68 @@
-import { canUpdateUserReport, canViewUserReport } from 'lib/auth';
+import { canUpdateReport, canViewReport } from 'lib/auth';
 import { useAuth, useCors } from 'lib/middleware';
 import { NextApiRequestQueryBody } from 'lib/types';
 import { NextApiResponse } from 'next';
 import { methodNotAllowed, ok, unauthorized } from 'next-basics';
-import { getUserReportById, updateUserReport } from 'queries';
+import { getReportById, updateReport } from 'queries';
 
-export interface UserReportRequestQuery {
+export interface ReportRequestQuery {
   id: string;
 }
 
-export interface UserReportRequestBody {
+export interface ReportRequestBody {
   websiteId: string;
-  reportName: string;
-  templateName: string;
+  type: string;
+  name: string;
+  description: string;
   parameters: string;
 }
 
 export default async (
-  req: NextApiRequestQueryBody<UserReportRequestQuery, UserReportRequestBody>,
+  req: NextApiRequestQueryBody<ReportRequestQuery, ReportRequestBody>,
   res: NextApiResponse,
 ) => {
   await useCors(req, res);
   await useAuth(req, res);
 
   if (req.method === 'GET') {
-    const { id: userReportId } = req.query;
+    const { id: reportId } = req.query;
 
-    const data = await getUserReportById(userReportId);
+    const data = await getReportById(reportId);
 
-    if (!(await canViewUserReport(req.auth, data))) {
+    if (!(await canViewReport(req.auth, data))) {
       return unauthorized(res);
     }
 
+    data.parameters = JSON.parse(data.parameters);
+
     return ok(res, data);
   }
 
   if (req.method === 'POST') {
-    const { id: userReportId } = req.query;
+    const { id: reportId } = req.query;
 
-    const data = await getUserReportById(userReportId);
+    const { websiteId, type, name, description, parameters } = req.body;
 
-    if (!(await canUpdateUserReport(req.auth, data))) {
+    const data = await getReportById(reportId);
+
+    if (!(await canUpdateReport(req.auth, data))) {
       return unauthorized(res);
     }
 
-    const updated = await updateUserReport(
+    const result = await updateReport(
       {
-        ...req.body,
-      },
+        websiteId,
+        type,
+        name,
+        description,
+        parameters: JSON.stringify(parameters),
+      } as any,
       {
-        id: userReportId,
+        id: reportId,
       },
     );
 
-    return ok(res, updated);
+    return ok(res, result);
   }
 
   return methodNotAllowed(res);

pages/api/reports/index.ts

@@ -3,17 +3,21 @@ import { useAuth, useCors } from 'lib/middleware';
 import { NextApiRequestQueryBody } from 'lib/types';
 import { NextApiResponse } from 'next';
 import { methodNotAllowed, ok } from 'next-basics';
-import { createUserReport, getUserReports } from 'queries';
+import { createReport, getReports } from 'queries';
 
-export interface UserReportRequestBody {
+export interface ReportRequestBody {
   websiteId: string;
-  reportName: string;
-  templateName: string;
-  parameters: string;
+  name: string;
+  type: string;
+  description: string;
+  parameters: {
+    window: string;
+    urls: string[];
+  };
 }
 
 export default async (
-  req: NextApiRequestQueryBody<any, UserReportRequestBody>,
+  req: NextApiRequestQueryBody<any, ReportRequestBody>,
   res: NextApiResponse,
 ) => {
   await useCors(req, res);
@@ -24,19 +28,25 @@ export default async (
   } = req.auth;
 
   if (req.method === 'GET') {
-    const data = await getUserReports(userId);
+    const data = await getReports(userId);
 
     return ok(res, data);
   }
 
   if (req.method === 'POST') {
-    const data = await createUserReport({
+    const { websiteId, type, name, description, parameters } = req.body;
+
+    const result = await createReport({
       id: uuid(),
       userId,
-      ...req.body,
-    });
+      websiteId,
+      type,
+      name,
+      description,
+      parameters: JSON.stringify(parameters),
+    } as any);
 
-    return ok(res, data);
+    return ok(res, result);
   }
 
   return methodNotAllowed(res);

pages/reports/[id].js

@@ -0,0 +1,20 @@
+import { useRouter } from 'next/router';
+import AppLayout from 'components/layout/AppLayout';
+import FunnelReport from 'components/pages/reports/funnel/FunnelReport';
+import useMessages from 'hooks/useMessages';
+
+export default function ReportsPage() {
+  const { formatMessage, labels } = useMessages();
+  const router = useRouter();
+  const { id } = router.query;
+
+  if (!id) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={formatMessage(labels.websites)}>
+      <FunnelReport reportId={id} />
+    </AppLayout>
+  );
+}

pages/reports/index.js

@@ -1,13 +1,21 @@
+import { useState } from 'react';
+import { Item, Tabs } from 'react-basics';
 import AppLayout from 'components/layout/AppLayout';
 import ReportList from 'components/pages/reports/ReportList';
 import useMessages from 'hooks/useMessages';
 
 export default function ReportsPage() {
+  const [tab, setTab] = useState('create');
   const { formatMessage, labels } = useMessages();
 
   return (
     <AppLayout title={formatMessage(labels.reports)}>
-      <ReportList />
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
+        <Item key="create">{formatMessage(labels.reports)}</Item>
+        <Item key="saved">{formatMessage(labels.save)}</Item>
+      </Tabs>
+      {tab === 'create' && <ReportList />}
+      {tab === 'saved' && <h1>My reports</h1>}
     </AppLayout>
   );
 }