Updated query hooks for teams and websites.

next.config.js

@@ -3,13 +3,25 @@ require('dotenv').config();
 const path = require('path');
 const pkg = require('./package.json');
 
+const basePath = process.env.BASE_PATH || '';
+const forceSSL = process.env.FORCE_SSL || '';
+const collectApiEndpoint = process.env.COLLECT_API_ENDPOINT || '';
+const defaultLocale = process.env.DEFAULT_LOCALE || '';
+const trackerScriptName = process.env.TRACKER_SCRIPT_NAME || '';
+const cloudMode = process.env.CLOUD_MODE || '';
+const cloudUrl = process.env.CLOUD_URL || '';
+const frameAncestors = process.env.ALLOWED_FRAME_URLS || '';
+const disableLogin = process.env.DISABLE_LOGIN || '';
+const disableUI = process.env.DISABLE_UI || '';
+const hostURL = process.env.HOST_URL || '';
+
 const contentSecurityPolicy = [
   `default-src 'self'`,
   `img-src *`,
   `script-src 'self' 'unsafe-eval' 'unsafe-inline'`,
   `style-src 'self' 'unsafe-inline'`,
   `connect-src 'self' api.umami.is cloud.umami.is`,
-  `frame-ancestors 'self' ${process.env.ALLOWED_FRAME_URLS || ''}`,
+  `frame-ancestors 'self' ${frameAncestors}`,
 ];
 
 const headers = [
@@ -26,7 +38,7 @@ const headers = [
   },
 ];
 
-if (process.env.FORCE_SSL) {
+if (forceSSL) {
   headers.push({
     key: 'Strict-Transport-Security',
     value: 'max-age=63072000; includeSubDomains; preload',
@@ -35,15 +47,15 @@ if (process.env.FORCE_SSL) {
 
 const rewrites = [];
 
-if (process.env.COLLECT_API_ENDPOINT) {
+if (collectApiEndpoint) {
   rewrites.push({
-    source: process.env.COLLECT_API_ENDPOINT,
+    source: collectApiEndpoint,
     destination: '/api/send',
   });
 }
 
-if (process.env.TRACKER_SCRIPT_NAME) {
-  const names = process.env.TRACKER_SCRIPT_NAME?.split(',').map(name => name.trim());
+if (trackerScriptName) {
+  const names = trackerScriptName?.split(',').map(name => name.trim());
 
   if (names) {
     names.forEach(name => {
@@ -58,36 +70,37 @@ if (process.env.TRACKER_SCRIPT_NAME) {
 const redirects = [
   {
     source: '/settings',
-    destination: process.env.CLOUD_MODE
-      ? `${process.env.CLOUD_URL}/settings/websites`
-      : '/settings/websites',
+    destination: cloudMode ? `${cloudUrl}/settings/websites` : '/settings/websites',
+    permanent: true,
+  },
+  {
+    source: '/teams/:id',
+    destination: '/teams/:id/websites',
     permanent: true,
   },
 ];
 
-if (process.env.CLOUD_MODE && process.env.CLOUD_URL && process.env.DISABLE_LOGIN) {
+if (cloudMode && cloudUrl && disableLogin) {
   redirects.push({
     source: '/login',
-    destination: process.env.CLOUD_URL,
+    destination: cloudUrl,
     permanent: false,
   });
 }
 
-const basePath = process.env.BASE_PATH;
-
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: false,
   env: {
-    basePath: basePath || '',
-    cloudMode: process.env.CLOUD_MODE || '',
-    cloudUrl: process.env.CLOUD_URL || '',
+    basePath,
+    cloudMode,
+    cloudUrl,
     configUrl: '/config',
     currentVersion: pkg.version,
-    defaultLocale: process.env.DEFAULT_LOCALE || '',
-    disableLogin: process.env.DISABLE_LOGIN || '',
-    disableUI: process.env.DISABLE_UI || '',
-    hostUrl: process.env.HOST_URL || '',
+    defaultLocale,
+    disableLogin,
+    disableUI,
+    hostURL,
   },
   basePath,
   output: 'standalone',

src/app/(main)/dashboard/Dashboard.tsx

@@ -3,20 +3,17 @@ import { Button, Icon, Icons, Loading, Text } from 'react-basics';
 import Link from 'next/link';
 import PageHeader from 'components/layout/PageHeader';
 import Pager from 'components/common/Pager';
-import WebsiteChartList from '../../(main)/websites/[id]/WebsiteChartList';
+import WebsiteChartList from 'app/(main)/websites/[id]/WebsiteChartList';
 import DashboardSettingsButton from 'app/(main)/dashboard/DashboardSettingsButton';
 import DashboardEdit from 'app/(main)/dashboard/DashboardEdit';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import { useApi } from 'components/hooks';
 import useDashboard from 'store/dashboard';
-import { useMessages } from 'components/hooks';
-import { useLocale } from 'components/hooks';
-import { useFilterQuery } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLocale, useLogin, useFilterQuery } from 'components/hooks';
 
 export function Dashboard() {
   const { formatMessage, labels, messages } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
   const { showCharts, editing } = useDashboard();
   const { dir } = useLocale();
   const { get } = useApi();

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';

src/app/(main)/settings/layout.tsx

@@ -1,12 +1,11 @@
 'use client';
 import { usePathname } from 'next/navigation';
-import { useUser } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useLogin, useMessages } from 'components/hooks';
 import SideNav from 'components/layout/SideNav';
 import styles from './layout.module.css';
 
 export default function SettingsLayout({ children }) {
-  const { user } = useUser();
+  const { user } = useLogin();
   const pathname = usePathname();
   const { formatMessage, labels } = useMessages();
   const cloudMode = !!process.env.cloudMode;

src/app/(main)/settings/profile/DateRangeSetting.tsx

@@ -1,8 +1,7 @@
 import DateFilter from 'components/input/DateFilter';
 import { Button, Flexbox } from 'react-basics';
-import { useDateRange } from 'components/hooks';
+import { useDateRange, useMessages } from 'components/hooks';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
-import { useMessages } from 'components/hooks';
 import { DateRange } from 'lib/types';
 
 export function DateRangeSetting() {

src/app/(main)/settings/profile/LanguageSetting.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import { Button, Dropdown, Item, Flexbox } from 'react-basics';
-import { useLocale } from 'components/hooks';
+import { useLocale, useMessages } from 'components/hooks';
 import { DEFAULT_LOCALE } from 'lib/constants';
 import { languages } from 'lib/lang';
-import { useMessages } from 'components/hooks';
 import styles from './LanguageSetting.module.css';
 
 export function LanguageSetting() {

src/app/(main)/settings/profile/PasswordEditForm.tsx

@@ -1,7 +1,6 @@
 import { useRef } from 'react';
 import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 
 export function PasswordEditForm({ onSave, onClose }) {
   const { formatMessage, labels, messages } = useMessages();

src/app/(main)/settings/profile/ProfileSettings.tsx

@@ -5,12 +5,11 @@ import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting';
 import LanguageSetting from 'app/(main)/settings/profile/LanguageSetting';
 import ThemeSetting from 'app/(main)/settings/profile/ThemeSetting';
 import PasswordChangeButton from './PasswordChangeButton';
-import { useUser } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useLogin, useMessages } from 'components/hooks';
 import { ROLES } from 'lib/constants';
 
 export function ProfileSettings() {
-  const { user } = useUser();
+  const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
   const cloudMode = Boolean(process.env.cloudMode);
 

src/app/(main)/settings/profile/TimezoneSetting.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { Dropdown, Item, Button, Flexbox } from 'react-basics';
 import { listTimeZones } from 'timezone-support';
-import { useTimezone } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useTimezone, useMessages } from 'components/hooks';
 import { getTimezone } from 'lib/date';
 import styles from './TimezoneSetting.module.css';
 

src/app/(main)/settings/teams/TeamAddForm.tsx

@@ -8,8 +8,7 @@ import {
   SubmitButton,
 } from 'react-basics';
 import { setValue } from 'store/cache';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 
 export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
   const { formatMessage, labels } = useMessages();

src/app/(main)/settings/teams/TeamDeleteForm.tsx

@@ -1,47 +1,44 @@
-import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import { setValue } from 'store/cache';
+import { useApi, useMessages } from 'components/hooks';
+import { touch } from 'store/cache';
+import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
+
+const CONFIRM_VALUE = 'DELETE';
 
 export function TeamDeleteForm({
   teamId,
-  teamName,
   onSave,
   onClose,
 }: {
   teamId: string;
-  teamName: string;
-  onSave: () => void;
-  onClose: () => void;
+  onSave?: () => void;
+  onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { labels, formatMessage } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({
     mutationFn: (data: any) => del(`/teams/${teamId}`, data),
   });
 
-  const handleSubmit = async data => {
-    mutate(data, {
+  const handleConfirm = async () => {
+    mutate(null, {
       onSuccess: async () => {
-        setValue('teams', Date.now());
+        touch('teams');
         onSave?.();
         onClose?.();
       },
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <p>
-        <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
-      </p>
-      <FormButtons flex>
-        <SubmitButton variant="danger" disabled={isPending}>
-          {formatMessage(labels.delete)}
-        </SubmitButton>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
-      </FormButtons>
-    </Form>
+    <TypeConfirmationForm
+      confirmationValue={CONFIRM_VALUE}
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      isLoading={isPending}
+      error={error}
+      buttonLabel={formatMessage(labels.delete)}
+      buttonVariant="danger"
+    />
   );
 }
 

src/app/(main)/settings/teams/TeamJoinForm.tsx

@@ -8,8 +8,7 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { setValue } from 'store/cache';
 
 export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {