Updated query hooks for teams and websites.

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

@@ -1,7 +1,7 @@
 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';
+import { touch } from 'store/cache';
+import ConfirmationForm from 'components/common/ConfirmationForm';
 
 export function ReportDeleteButton({
   reportId,
@@ -12,14 +12,16 @@ export function ReportDeleteButton({
   reportName: string;
   onDelete?: () => void;
 }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { del, useMutation } = useApi();
-  const { mutate } = useMutation({ mutationFn: reportId => del(`/reports/${reportId}`) });
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: reportId => del(`/reports/${reportId}`),
+  });
 
   const handleConfirm = (close: () => void) => {
     mutate(reportId as any, {
       onSuccess: () => {
-        setValue('reports', Date.now());
+        touch('reports');
         onDelete?.();
         close();
       },
@@ -28,16 +30,23 @@ export function ReportDeleteButton({
 
   return (
     <ModalTrigger>
-      <Button>
+      <Button variant="quiet">
         <Icon>
           <Icons.Trash />
         </Icon>
         <Text>{formatMessage(labels.delete)}</Text>
       </Button>
-      <Modal>
-        {close => (
-          <ConfirmDeleteForm
-            name={reportName}
+      <Modal title={formatMessage(labels.deleteReport)}>
+        {(close: () => void) => (
+          <ConfirmationForm
+            message={
+              <FormattedMessage
+                {...messages.confirmDelete}
+                values={{ target: <b>{reportName}</b> }}
+              />
+            }
+            isLoading={isPending}
+            error={error}
             onConfirm={handleConfirm.bind(null, close)}
             onClose={close}
           />

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

@@ -1,13 +1,12 @@
 import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
 import LinkButton from 'components/common/LinkButton';
-import { useMessages } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLogin } from 'components/hooks';
 import { REPORT_TYPES } from 'lib/constants';
 import ReportDeleteButton from './ReportDeleteButton';
 
 export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomain?: boolean }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
   const breakpoint = useBreakpoint();
 
   return (

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

@@ -1,7 +1,6 @@
 import { JSX, useCallback, useContext, useMemo } from 'react';
 import { Loading, StatusLight } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useTheme } from 'components/hooks';
+import { useMessages, useTheme } from 'components/hooks';
 import BarChart from 'components/metrics/BarChart';
 import { formatLongNumber } from 'lib/format';
 import { ReportContext } from '../[id]/Report';