Refactored forms and pages.

next.config.js

@@ -60,7 +60,7 @@ const redirects = [
   {
     source: '/settings',
     destination: process.env.CLOUD_MODE
-      ? `${process.env.CLOUD_URL}/settings/websites`
+      ? `${process.env.CLOUD_URL}/websites`
       : '/settings/websites',
     permanent: true,
   },

src/app/(main)/reports/ReportDeleteButton.js

@@ -0,0 +1,42 @@
+import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
+import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
+import { useApi, useMessages } from 'components/hooks';
+import { setValue } from 'store/cache';
+
+export function ReportDeleteButton({ reportId, reportName, onDelete }) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
+
+  const handleConfirm = close => {
+    mutate(reportId, {
+      onSuccess: () => {
+        setValue('reports', Date.now());
+        onDelete?.();
+        close();
+      },
+    });
+  };
+
+  return (
+    <ModalTrigger>
+      <Button>
+        <Icon>
+          <Icons.Trash />
+        </Icon>
+        <Text>{formatMessage(labels.delete)}</Text>
+      </Button>
+      <Modal>
+        {close => (
+          <ConfirmDeleteForm
+            name={reportName}
+            onConfirm={handleConfirm.bind(null, close)}
+            onClose={close}
+          />
+        )}
+      </Modal>
+    </ModalTrigger>
+  );
+}
+
+export default ReportDeleteButton;

src/app/(main)/reports/ReportsDataTable.js

@@ -0,0 +1,22 @@
+'use client';
+import { useApi } from 'components/hooks';
+import ReportsTable from './ReportsTable';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+import DataTable from 'components/common/DataTable';
+import useCache from 'store/cache';
+
+function useReports() {
+  const { get } = useApi();
+  const modified = useCache(state => state?.reports);
+  return useFilterQuery(['reports', modified], params => get(`/reports`, params));
+}
+
+export default function ReportsDataTable() {
+  const queryResult = useReports();
+
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => <ReportsTable data={data} showDomain={true} />}
+    </DataTable>
+  );
+}

src/app/(main)/reports/ReportsHeader.js

@@ -1,22 +1,23 @@
 'use client';
 import PageHeader from 'components/layout/PageHeader';
-import Link from 'next/link';
 import { Button, Icon, Icons, Text } from 'react-basics';
 import { useMessages } from 'components/hooks';
+import { useRouter } from 'next/navigation';
 
 export function ReportsHeader() {
   const { formatMessage, labels } = useMessages();
+  const router = useRouter();
+
+  const handleClick = () => router.push('/reports/create');
 
   return (
     <PageHeader title={formatMessage(labels.reports)}>
-      <Link href="/reports/create">
-        <Button variant="primary">
-          <Icon>
-            <Icons.Plus />
-          </Icon>
-          <Text>{formatMessage(labels.createReport)}</Text>
-        </Button>
-      </Link>
+      <Button variant="primary" onClick={handleClick}>
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Text>{formatMessage(labels.createReport)}</Text>
+      </Button>
     </PageHeader>
   );
 }

src/app/(main)/reports/ReportsTable.js

@@ -1,27 +1,14 @@
-import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
 import LinkButton from 'components/common/LinkButton';
 import { useMessages } from 'components/hooks';
 import useUser from 'components/hooks/useUser';
-import {
-  Button,
-  GridColumn,
-  GridTable,
-  Icon,
-  Icons,
-  Modal,
-  ModalTrigger,
-  Text,
-} from 'react-basics';
+import { GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
 import { REPORT_TYPES } from 'lib/constants';
+import ReportDeleteButton from './ReportDeleteButton';
 
-export function ReportsTable({ data = [], onDelete, showDomain }) {
+export function ReportsTable({ data = [], showDomain }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
-  const handleConfirm = (id, callback) => {
-    onDelete?.(id, callback);
-  };
-
   return (
     <GridTable data={data}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
@@ -43,26 +30,15 @@ export function ReportsTable({ data = [], onDelete, showDomain }) {
           const { id, name, userId, website } = row;
           return (
             <>
-              <LinkButton href={`/reports/${id}`}>{formatMessage(labels.view)}</LinkButton>
               {(user.id === userId || user.id === website?.userId) && (
-                <ModalTrigger>
-                  <Button>
-                    <Icon>
-                      <Icons.Trash />
-                    </Icon>
-                    <Text>{formatMessage(labels.delete)}</Text>
-                  </Button>
-                  <Modal>
-                    {close => (
-                      <ConfirmDeleteForm
-                        name={name}
-                        onConfirm={handleConfirm.bind(null, id, close)}
-                        onClose={close}
-                      />
-                    )}
-                  </Modal>
-                </ModalTrigger>
+                <ReportDeleteButton reportId={id} reportName={name} />
               )}
+              <LinkButton href={`/reports/${id}`}>
+                <Icon>
+                  <Icons.ArrowRight />
+                </Icon>
+                <Text>{formatMessage(labels.view)}</Text>
+              </LinkButton>
             </>
           );
         }}

src/app/(main)/reports/BaseParameters.js → src/app/(main)/reports/[id]/BaseParameters.js

@@ -1,10 +1,10 @@
+import { useContext } from 'react';
 import { FormRow } from 'react-basics';
+import { parseDateRange } from 'lib/date';
 import DateFilter from 'components/input/DateFilter';
 import WebsiteSelect from 'components/input/WebsiteSelect';
-import { parseDateRange } from 'lib/date';
-import { useContext } from 'react';
-import { ReportContext } from './Report';
 import { useMessages } from 'components/hooks';
+import { ReportContext } from './Report';
 
 export function BaseParameters({
   showWebsiteSelect = true,

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

@@ -1,13 +1,13 @@
 import { useContext, useRef } from 'react';
-import { useApi, useMessages } from 'components/hooks';
 import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
-import { ReportContext } from '../Report';
 import Empty from 'components/common/Empty';
-import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
 import Icons from 'components/icons';
-import FieldAddForm from '../FieldAddForm';
-import BaseParameters from '../BaseParameters';
-import ParameterList from '../ParameterList';
+import { useApi, useMessages } from 'components/hooks';
+import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
+import { ReportContext } from '../[id]/Report';
+import FieldAddForm from '../[id]/FieldAddForm';
+import ParameterList from '../[id]/ParameterList';
+import BaseParameters from '../[id]/BaseParameters';
 import styles from './EventDataParameters.module.css';
 
 function useFields(websiteId, startDate, endDate) {

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

@@ -1,7 +1,7 @@
-import Report from '../Report';
-import ReportHeader from '../ReportHeader';
-import ReportMenu from '../ReportMenu';
-import ReportBody from '../ReportBody';
+import Report from '../[id]/Report';
+import ReportHeader from '../[id]/ReportHeader';
+import ReportMenu from '../[id]/ReportMenu';
+import ReportBody from '../[id]/ReportBody';
 import EventDataParameters from './EventDataParameters';
 import EventDataTable from './EventDataTable';
 import Nodes from 'assets/nodes.svg';

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

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

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

@@ -5,7 +5,7 @@ import useTheme from 'components/hooks/useTheme';
 import BarChart from 'components/metrics/BarChart';
 import { formatLongNumber } from 'lib/format';
 import styles from './FunnelChart.module.css';
-import { ReportContext } from '../Report';
+import { ReportContext } from '../[id]/Report';
 
 export function FunnelChart({ className, loading }) {
   const { report } = useContext(ReportContext);

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

@@ -13,10 +13,10 @@ import {
 } from 'react-basics';
 import Icons from 'components/icons';
 import UrlAddForm from './UrlAddForm';
-import { ReportContext } from '../Report';
-import BaseParameters from '../BaseParameters';
-import ParameterList from '../ParameterList';
-import PopupForm from '../PopupForm';
+import { ReportContext } from '../[id]/Report';
+import BaseParameters from '../[id]/BaseParameters';
+import ParameterList from '../[id]/ParameterList';
+import PopupForm from '../[id]/PopupForm';
 
 export function FunnelParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);

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

@@ -2,10 +2,10 @@
 import FunnelChart from './FunnelChart';
 import FunnelTable from './FunnelTable';
 import FunnelParameters from './FunnelParameters';
-import Report from '../Report';
-import ReportHeader from '../ReportHeader';
-import ReportMenu from '../ReportMenu';
-import ReportBody from '../ReportBody';
+import Report from '../[id]/Report';
+import ReportHeader from '../[id]/ReportHeader';
+import ReportMenu from '../[id]/ReportMenu';
+import ReportBody from '../[id]/ReportBody';
 import Funnel from 'assets/funnel.svg';
 import { REPORT_TYPES } from 'lib/constants';
 

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

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

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

@@ -10,14 +10,14 @@ import {
   Popup,
   TooltipPopup,
 } from 'react-basics';
-import { ReportContext } from '../Report';
 import Icons from 'components/icons';
-import BaseParameters from '../BaseParameters';
-import ParameterList from '../ParameterList';
+import BaseParameters from '../[id]/BaseParameters';
+import { ReportContext } from '../[id]/Report';
+import ParameterList from '../[id]/ParameterList';
+import FilterSelectForm from '../[id]/FilterSelectForm';
+import FieldSelectForm from '../[id]/FieldSelectForm';
+import PopupForm from '../[id]/PopupForm';
 import styles from './InsightsParameters.module.css';
-import PopupForm from '../PopupForm';
-import FilterSelectForm from '../FilterSelectForm';
-import FieldSelectForm from '../FieldSelectForm';
 
 export function InsightsParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);

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

@@ -1,8 +1,8 @@
 'use client';
-import Report from '../Report';
-import ReportHeader from '../ReportHeader';
-import ReportMenu from '../ReportMenu';
-import ReportBody from '../ReportBody';
+import Report from '../[id]/Report';
+import ReportHeader from '../[id]/ReportHeader';
+import ReportMenu from '../[id]/ReportMenu';
+import ReportBody from '../[id]/ReportBody';
 import InsightsParameters from './InsightsParameters';
 import InsightsTable from './InsightsTable';
 import Lightbulb from 'assets/lightbulb.svg';

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

@@ -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 '../Report';
+import { ReportContext } from '../[id]/Report';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 
 export function InsightsTable() {

src/app/(main)/reports/page.tsx

@@ -1,11 +1,11 @@
 import ReportsHeader from './ReportsHeader';
-import ReportsList from './ReportsList';
+import ReportsDataTable from './ReportsDataTable';
 
 export default function ReportsPage() {
   return (
     <>
       <ReportsHeader />
-      <ReportsList />
+      <ReportsDataTable />
     </>
   );
 }

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

@@ -1,9 +1,9 @@
 import { useContext, useRef } from 'react';
 import { useMessages } from 'components/hooks';
 import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
-import { ReportContext } from '../Report';
+import { ReportContext } from '../[id]/Report';
 import { MonthSelect } from 'components/input/MonthSelect';
-import BaseParameters from '../BaseParameters';
+import BaseParameters from '../[id]/BaseParameters';
 import { parseDateRange } from 'lib/date';
 
 export function RetentionParameters() {

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

@@ -1,10 +1,10 @@
 'use client';
 import RetentionTable from './RetentionTable';
 import RetentionParameters from './RetentionParameters';
-import Report from '../Report';
-import ReportHeader from '../ReportHeader';
-import ReportMenu from '../ReportMenu';
-import ReportBody from '../ReportBody';
+import Report from '../[id]/Report';
+import ReportHeader from '../[id]/ReportHeader';
+import ReportMenu from '../[id]/ReportMenu';
+import ReportBody from '../[id]/ReportBody';
 import Magnet from 'assets/magnet.svg';
 import { REPORT_TYPES } from 'lib/constants';
 import { parseDateRange } from 'lib/date';