Updated query hooks for teams and websites.

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,29 +1,28 @@
-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?.();
       },
@@ -31,17 +30,15 @@ export function TeamDeleteForm({
   };
 
   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 }) {

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

@@ -1,7 +1,5 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useLocale } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLocale, useLogin } from 'components/hooks';
 import TeamDeleteForm from './TeamLeaveForm';
 
 export function TeamLeaveButton({
@@ -15,7 +13,7 @@ export function TeamLeaveButton({
 }) {
   const { formatMessage, labels } = useMessages();
   const { dir } = useLocale();
-  const { user } = useUser();
+  const { user } = useLogin();
 
   return (
     <ModalTrigger>
@@ -26,7 +24,7 @@ export function TeamLeaveButton({
         <Text>{formatMessage(labels.leave)}</Text>
       </Button>
       <Modal title={formatMessage(labels.leaveTeam)}>
-        {close => (
+        {(close: () => void) => (
           <TeamDeleteForm
             teamId={teamId}
             userId={user.id}

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

@@ -1,7 +1,6 @@
-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 ConfirmationForm from 'components/common/ConfirmationForm';
 
 export function TeamLeaveForm({
   teamId,
@@ -22,10 +21,10 @@ export function TeamLeaveForm({
     mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
   });
 
-  const handleSubmit = async () => {
+  const handleConfirm = async () => {
     mutate(null, {
       onSuccess: async () => {
-        setValue('team:members', Date.now());
+        touch('team:members');
         onSave();
         onClose();
       },
@@ -33,17 +32,16 @@ export function TeamLeaveForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <p>
+    <ConfirmationForm
+      buttonLabel={formatMessage(labels.leave)}
+      message={
         <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
-      </p>
-      <FormButtons flex>
-        <SubmitButton variant="danger" disabled={isPending}>
-          {formatMessage(labels.leave)}
-        </SubmitButton>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
-      </FormButtons>
-    </Form>
+      }
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      isLoading={isPending}
+      error={error}
+    />
   );
 }
 

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

@@ -1,8 +1,7 @@
 'use client';
 import DataTable from 'components/common/DataTable';
 import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
-import { useApi } from 'components/hooks';
-import { useFilterQuery } from 'components/hooks';
+import { useApi, useFilterQuery } from 'components/hooks';
 import useCache from 'store/cache';
 
 export function TeamsDataTable() {

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

@@ -2,14 +2,13 @@
 import { Flexbox } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
-import { useUser } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useLogin, useMessages } from 'components/hooks';
 import TeamsJoinButton from './TeamsJoinButton';
 import TeamsAddButton from './TeamsAddButton';
 
 export function TeamsHeader({ allowCreate = true }: { allowCreate?: boolean }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
 
   return (
     <PageHeader title={formatMessage(labels.teams)}>

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

@@ -1,13 +1,12 @@
 'use client';
 import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
 import Link from 'next/link';
-import { useMessages } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLogin } from 'components/hooks';
 import { ROLES } from 'lib/constants';
 
 export function TeamsTable({ data = [] }: { data: any[] }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
   const breakpoint = useBreakpoint();
 
   return (

src/app/(main)/settings/teams/[id]/TeamData.tsx

@@ -2,11 +2,9 @@ import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import TeamDeleteForm from '../TeamDeleteForm';
 
-export function TeamData({ teamId }: { teamId: string; onSave?: (value: string) => void }) {
+export function TeamData({ teamId }: { teamId: string }) {
   const { formatMessage, labels, messages } = useMessages();
 
-  const handleSave = () => {};
-
   return (
     <ActionForm
       label={formatMessage(labels.deleteTeam)}
@@ -15,9 +13,7 @@ export function TeamData({ teamId }: { teamId: string; onSave?: (value: string)
       <ModalTrigger>
         <Button variant="danger">{formatMessage(labels.delete)}</Button>
         <Modal title={formatMessage(labels.deleteTeam)}>
-          {(close: () => void) => (
-            <TeamDeleteForm teamId={teamId} teamName={''} onSave={handleSave} onClose={close} />
-          )}
+          {(close: () => void) => <TeamDeleteForm teamId={teamId} onClose={close} />}
         </Modal>
       </ModalTrigger>
     </ActionForm>

src/app/(main)/settings/teams/[id]/TeamEditForm.tsx

@@ -7,28 +7,37 @@ import {
   TextField,
   Button,
   Flexbox,
+  useToasts,
 } from 'react-basics';
 import { getRandomChars } from 'next-basics';
 import { useRef, useState } from 'react';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 
 const generateId = () => getRandomChars(16);
 
-export function TeamEditForm({ teamId, data, onSave, readOnly }) {
-  const { formatMessage, labels } = useMessages();
+export function TeamEditForm({
+  teamId,
+  data,
+  readOnly,
+}: {
+  teamId: string;
+  data?: { name: string; accessCode: string };
+  readOnly?: boolean;
+}) {
+  const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation({
     mutationFn: (data: any) => post(`/teams/${teamId}`, data),
   });
   const ref = useRef(null);
   const [accessCode, setAccessCode] = useState(data.accessCode);
+  const { showToast } = useToasts();
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
         ref.current.reset(data);
-        onSave?.(data);
+        showToast({ message: formatMessage(messages.saved), variant: 'success' });
       },
     });
   };

src/app/(main)/settings/teams/[id]/TeamMemberRemoveButton.tsx

@@ -1,5 +1,4 @@
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 import { setValue } from 'store/cache';
 

src/app/(main)/settings/teams/[id]/TeamMembers.tsx

@@ -1,5 +1,4 @@
-import { useApi } from 'components/hooks';
-import { useFilterQuery } from 'components/hooks';
+import { useApi, useFilterQuery } from 'components/hooks';
 import DataTable from 'components/common/DataTable';
 import useCache from 'store/cache';
 import TeamMembersTable from './TeamMembersTable';

src/app/(main)/settings/teams/[id]/TeamMembersTable.tsx

@@ -1,6 +1,5 @@
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLogin } from 'components/hooks';
 import { ROLES } from 'lib/constants';
 import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 
@@ -14,7 +13,7 @@ export function TeamMembersTable({
   readOnly: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
   const breakpoint = useBreakpoint();
 
   const roles = {

src/app/(main)/settings/teams/[id]/TeamSettings.tsx

@@ -1,66 +1,49 @@
 'use client';
-import { useEffect, useState } from 'react';
-import { Item, Loading, Tabs, useToasts, Flexbox } from 'react-basics';
+import { useState } from 'react';
+import { Item, Loading, Tabs, Flexbox } from 'react-basics';
+import TeamsContext from 'app/(main)/teams/TeamsContext';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
-import { useUser } from 'components/hooks';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useLogin, useTeam, useMessages } from 'components/hooks';
 import TeamEditForm from './TeamEditForm';
 import TeamMembers from './TeamMembers';
 import TeamWebsites from './TeamWebsites';
 import TeamData from './TeamData';
 
 export function TeamSettings({ teamId }: { teamId: string }) {
-  const { formatMessage, labels, messages } = useMessages();
-  const { user } = useUser();
-  const [values, setValues] = useState(null);
+  const { formatMessage, labels } = useMessages();
+  const { user } = useLogin();
+  const { data: team, isLoading } = useTeam(teamId);
   const [tab, setTab] = useState('details');
-  const { get, useQuery } = useApi();
-  const { showToast } = useToasts();
-  const { data, isLoading } = useQuery({
-    queryKey: ['team', teamId],
-    queryFn: () => {
-      if (teamId) {
-        return get(`/teams/${teamId}`);
-      }
-    },
-  });
-  const canEdit = data?.teamUser?.find(
+
+  if (isLoading) {
+    return <Loading position="page" />;
+  }
+
+  const canEdit = team?.teamUser?.find(
     ({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
   );
 
-  const handleSave = data => {
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
-    setValues(state => ({ ...state, ...data }));
-  };
-
-  useEffect(() => {
-    if (data) {
-      setValues(data);
-    }
-  }, [data]);
-
-  if (isLoading || !values) {
-    return <Loading />;
-  }
-
   return (
-    <Flexbox direction="column">
-      <PageHeader title={values?.name} />
-      <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
-        <Item key="details">{formatMessage(labels.details)}</Item>
-        <Item key="members">{formatMessage(labels.members)}</Item>
-        <Item key="websites">{formatMessage(labels.websites)}</Item>
-        <Item key="data">{formatMessage(labels.data)}</Item>
-      </Tabs>
-      {tab === 'details' && (
-        <TeamEditForm teamId={teamId} data={values} onSave={handleSave} readOnly={!canEdit} />
-      )}
-      {tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
-      {tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
-      {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
-    </Flexbox>
+    <TeamsContext.Provider value={team}>
+      <Flexbox direction="column">
+        <PageHeader title={team?.name} />
+        <Tabs
+          selectedKey={tab}
+          onSelect={(value: any) => setTab(value)}
+          style={{ marginBottom: 30 }}
+        >
+          <Item key="details">{formatMessage(labels.details)}</Item>
+          <Item key="members">{formatMessage(labels.members)}</Item>
+          <Item key="websites">{formatMessage(labels.websites)}</Item>
+          <Item key="data">{formatMessage(labels.data)}</Item>
+        </Tabs>
+        {tab === 'details' && <TeamEditForm teamId={teamId} data={team} readOnly={!canEdit} />}
+        {tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
+        {tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
+        {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
+      </Flexbox>
+    </TeamsContext.Provider>
   );
 }
 

src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.tsx

@@ -1,5 +1,4 @@
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 
 export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {

src/app/(main)/settings/users/UserAddForm.tsx

@@ -10,9 +10,8 @@ import {
   SubmitButton,
   Button,
 } from 'react-basics';
-import { useApi } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { ROLES } from 'lib/constants';
-import { useMessages } from 'components/hooks';
 
 export function UserAddForm({ onSave, onClose }) {
   const { post, useMutation } = useApi();

src/app/(main)/settings/users/UserDeleteButton.tsx

@@ -1,6 +1,5 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLogin } from 'components/hooks';
 import UserDeleteForm from './UserDeleteForm';
 
 export function UserDeleteButton({
@@ -13,11 +12,11 @@ export function UserDeleteButton({
   onDelete?: () => void;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
 
   return (
     <ModalTrigger disabled={userId === user?.id}>
-      <Button disabled={userId === user?.id}>
+      <Button disabled={userId === user?.id} variant="quiet">
         <Icon>
           <Icons.Trash />
         </Icon>

src/app/(main)/settings/users/UserDeleteForm.tsx

@@ -1,35 +1,33 @@
-import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
+import ConfirmationForm from 'components/common/ConfirmationForm';
+import { touch } from 'store/cache';
 
 export function UserDeleteForm({ userId, username, onSave, onClose }) {
-  const { formatMessage, FormattedMessage, labels, messages } = useMessages();
+  const { FormattedMessage, messages, labels, formatMessage } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
 
-  const handleSubmit = async (data: any) => {
-    mutate(data, {
+  const handleConfirm = async () => {
+    mutate(null, {
       onSuccess: async () => {
-        onSave();
-        onClose();
+        touch('users');
+        onSave?.();
+        onClose?.();
       },
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <p>
+    <ConfirmationForm
+      message={
         <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{username}</b> }} />
-      </p>
-      <FormButtons flex>
-        <SubmitButton variant="danger" disabled={isPending}>
-          {formatMessage(labels.delete)}
-        </SubmitButton>
-        <Button disabled={isPending} onClick={onClose}>
-          {formatMessage(labels.cancel)}
-        </Button>
-      </FormButtons>
-    </Form>
+      }
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      buttonLabel={formatMessage(labels.delete)}
+      isLoading={isPending}
+      error={error}
+    />
   );
 }
 

src/app/(main)/settings/users/UserEditForm.tsx

@@ -9,9 +9,8 @@ import {
   SubmitButton,
   PasswordField,
 } from 'react-basics';
-import { useApi } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { ROLES } from 'lib/constants';
-import { useMessages } from 'components/hooks';
 
 export function UserEditForm({
   userId,
@@ -19,8 +18,8 @@ export function UserEditForm({
   onSave,
 }: {
   userId: string;
-  data: any[];
-  onSave: (data: any) => void;
+  data: object;
+  onSave?: (data: any) => void;
 }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
@@ -44,7 +43,7 @@ export function UserEditForm({
     });
   };
 
-  const renderValue = value => {
+  const renderValue = (value: string) => {
     if (value === ROLES.user) {
       return formatMessage(labels.user);
     }

src/app/(main)/settings/users/UserWebsites.tsx

@@ -1,28 +0,0 @@
-import Page from 'components/layout/Page';
-import { useApi } from 'components/hooks';
-import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
-import { useFilterQuery } from 'components/hooks';
-import DataTable from 'components/common/DataTable';
-
-export function UserWebsites({ userId }) {
-  const { get } = useApi();
-  const queryResult = useFilterQuery({
-    queryKey: ['user:websites', userId],
-    queryFn: (params: any) => get(`/users/${userId}/websites`, params),
-  });
-  const hasData = queryResult.result && queryResult.result.data.length !== 0;
-
-  return (
-    <Page isLoading={queryResult.query.isLoading} error={queryResult.query.error}>
-      {hasData && (
-        <DataTable queryResult={queryResult}>
-          {({ data }) => (
-            <WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
-          )}
-        </DataTable>
-      )}
-    </Page>
-  );
-}
-
-export default UserWebsites;

src/app/(main)/settings/users/UsersDataTable.tsx

@@ -1,17 +1,10 @@
 'use client';
-import { useApi } from 'components/hooks';
-import { useFilterQuery } from 'components/hooks';
 import DataTable from 'components/common/DataTable';
 import UsersTable from './UsersTable';
-import useCache from 'store/cache';
+import useUsers from 'components/hooks/queries/useUsers';
 
-export function UsersDataTable({ showActions }: { showActions: boolean }) {
-  const { get } = useApi();
-  const modified = useCache((state: any) => state?.users);
-  const queryResult = useFilterQuery({
-    queryKey: ['users', { modified }],
-    queryFn: (params: { [key: string]: any }) => get(`/admin/users`, params),
-  });
+export function UsersDataTable({ showActions }: { showActions?: boolean }) {
+  const queryResult = useUsers();
 
   return (
     <DataTable queryResult={queryResult}>

src/app/(main)/settings/users/UsersTable.tsx

@@ -2,8 +2,7 @@ import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { ROLES } from 'lib/constants';
-import { useMessages } from 'components/hooks';
-import { useLocale } from 'components/hooks';
+import { useMessages, useLocale } from 'components/hooks';
 import UserDeleteButton from './UserDeleteButton';
 
 export function UsersTable({
@@ -35,12 +34,16 @@ export function UsersTable({
           })
         }
       </GridColumn>
+      <GridColumn name="websites" label={formatMessage(labels.websites)} width={'120px'}>
+        {row => row._count.website}
+      </GridColumn>
       {showActions && (
         <GridColumn name="action" label=" " alignment="end">
           {row => {
             const { id, username } = row;
             return (
               <>
+                <UserDeleteButton userId={id} username={username} />
                 <Link href={`/settings/users/${id}`}>
                   <Button>
                     <Icon>
@@ -49,7 +52,6 @@ export function UsersTable({
                     <Text>{formatMessage(labels.edit)}</Text>
                   </Button>
                 </Link>
-                <UserDeleteButton userId={id} username={username} />
               </>
             );
           }}

src/app/(main)/settings/users/[id]/UserSettings.tsx

@@ -1,58 +1,28 @@
 'use client';
-import { Key, useEffect, useState } from 'react';
-import { Item, Loading, Tabs, useToasts } from 'react-basics';
+import { Key, useState } from 'react';
+import { Item, Loading, Tabs } from 'react-basics';
 import UserEditForm from '../UserEditForm';
 import PageHeader from 'components/layout/PageHeader';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import UserWebsites from '../UserWebsites';
+import { useMessages, useUser } from 'components/hooks';
+import UserWebsites from './UserWebsites';
 
-export function UserSettings({ userId }) {
-  const { formatMessage, labels, messages } = useMessages();
-  const [edit, setEdit] = useState(false);
-  const [values, setValues] = useState(null);
+export function UserSettings({ userId }: { userId: string }) {
+  const { formatMessage, labels } = useMessages();
   const [tab, setTab] = useState<Key>('details');
-  const { get, useQuery } = useApi();
-  const { showToast } = useToasts();
-  const { data, isLoading } = useQuery({
-    queryKey: ['user', userId],
-    queryFn: () => {
-      if (userId) {
-        return get(`/users/${userId}`);
-      }
-    },
-    gcTime: 0,
-  });
+  const { data: user, isLoading } = useUser(userId, { gcTime: 0 });
 
-  const handleSave = (data: any) => {
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
-    if (data) {
-      setValues(state => ({ ...state, ...data }));
-    }
-
-    if (edit) {
-      setEdit(false);
-    }
-  };
-
-  useEffect(() => {
-    if (data) {
-      setValues(data);
-    }
-  }, [data]);
-
-  if (isLoading || !values) {
+  if (isLoading) {
     return <Loading />;
   }
 
   return (
     <>
-      <PageHeader title={values?.username} />
+      <PageHeader title={user?.username} />
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
         <Item key="details">{formatMessage(labels.details)}</Item>
         <Item key="websites">{formatMessage(labels.websites)}</Item>
       </Tabs>
-      {tab === 'details' && <UserEditForm userId={userId} data={values} onSave={handleSave} />}
+      {tab === 'details' && <UserEditForm userId={userId} data={user} />}
       {tab === 'websites' && <UserWebsites userId={userId} />}
     </>
   );

src/app/(main)/settings/users/[id]/UserWebsites.tsx

@@ -0,0 +1,18 @@
+'use client';
+import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
+import DataTable from 'components/common/DataTable';
+import { useWebsites } from 'components/hooks';
+
+export function UserWebsites({ userId }) {
+  const queryResult = useWebsites({ userId });
+
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => (
+        <WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
+      )}
+    </DataTable>
+  );
+}
+
+export default UserWebsites;

src/app/(main)/settings/websites/WebsiteSettings.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useContext, useEffect, useState, Key } from 'react';
+import { useState, Key } from 'react';
 import { Item, Tabs, useToasts, Button, Text, Icon, Icons, Loading } from 'react-basics';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
@@ -8,56 +8,42 @@ import WebsiteEditForm from './[id]/WebsiteEditForm';
 import WebsiteData from './[id]/WebsiteData';
 import TrackingCode from './[id]/TrackingCode';
 import ShareUrl from './[id]/ShareUrl';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import SettingsContext from '../SettingsContext';
+import { useWebsite, useMessages } from 'components/hooks';
+import { touch } from 'store/cache';
 
 export function WebsiteSettings({ websiteId, openExternal = false }) {
   const router = useRouter();
   const { formatMessage, labels, messages } = useMessages();
-  const { get, useQuery } = useApi();
   const { showToast } = useToasts();
-  const { websitesUrl, websitesPath, settingsPath } = useContext(SettingsContext);
-  const { data, isLoading } = useQuery({
-    queryKey: ['website', websiteId],
-    queryFn: () => get(`${websitesUrl}/${websiteId}`),
-    enabled: !!websiteId,
-    gcTime: 0,
-  });
-  const [values, setValues] = useState(null);
+
+  const { data: website, isLoading } = useWebsite(websiteId, { gcTime: 0 });
   const [tab, setTab] = useState<Key>('details');
 
   const showSuccess = () => {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
   };
 
-  const handleSave = (data: any) => {
+  const handleSave = () => {
     showSuccess();
-    setValues((state: any) => ({ ...state, ...data }));
+    touch('websites');
   };
 
   const handleReset = async (value: string) => {
     if (value === 'delete') {
-      router.push(settingsPath);
+      router.push('/settings/websites');
     } else if (value === 'reset') {
       showSuccess();
     }
   };
 
-  useEffect(() => {
-    if (data) {
-      setValues(data);
-    }
-  }, [data]);
-
-  if (isLoading || !values) {
+  if (isLoading) {
     return <Loading position="page" />;
   }
 
   return (
     <>
-      <PageHeader title={values?.name}>
-        <Link href={`${websitesPath}/${websiteId}`} target={openExternal ? '_blank' : null}>
+      <PageHeader title={website?.name}>
+        <Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
           <Button variant="primary">
             <Icon>
               <Icons.External />
@@ -73,10 +59,10 @@ export function WebsiteSettings({ websiteId, openExternal = false }) {
         <Item key="data">{formatMessage(labels.data)}</Item>
       </Tabs>
       {tab === 'details' && (
-        <WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
+        <WebsiteEditForm websiteId={websiteId} data={website} onSave={handleSave} />
       )}
       {tab === 'tracking' && <TrackingCode websiteId={websiteId} />}
-      {tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
+      {tab === 'share' && <ShareUrl websiteId={websiteId} data={website} onSave={handleSave} />}
       {tab === 'data' && <WebsiteData websiteId={websiteId} onSave={handleReset} />}
     </>
   );

src/app/(main)/settings/websites/Websites.tsx

@@ -1,10 +1,10 @@
 'use client';
-import { useUser } from 'components/hooks';
+import { useLogin } from 'components/hooks';
 import WebsitesDataTable from './WebsitesDataTable';
 import WebsitesHeader from './WebsitesHeader';
 
 export default function Websites() {
-  const { user } = useUser();
+  const { user } = useLogin();
   return (
     <>
       <WebsitesHeader showActions={user.role !== 'view-only'} />

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -1,8 +1,7 @@
 import { ReactNode } from 'react';
 import Link from 'next/link';
 import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLogin } from 'components/hooks';
 
 export interface WebsitesTableProps {
   data: any[];
@@ -22,7 +21,7 @@ export function WebsitesTable({
   children,
 }: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
   const breakpoint = useBreakpoint();
 
   return (
@@ -32,13 +31,12 @@ export function WebsitesTable({
       {showActions && (
         <GridColumn name="action" label=" " alignment="end">
           {row => {
-            const { id } = row;
-            const isOwner = row.userId === user.id || row.teamId === teamId;
+            const { id, userId } = row;
 
             return (
               <>
-                {allowEdit && isOwner && (
-                  <Link href={`/settings/${id}`}>
+                {allowEdit && !teamId && user.id === userId && (
+                  <Link href={`/settings/websites/${id}`}>
                     <Button>
                       <Icon>
                         <Icons.Edit />

src/app/(main)/settings/websites/[id]/ShareUrl.tsx

@@ -10,21 +10,20 @@ import {
 } from 'react-basics';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { getRandomChars } from 'next-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import SettingsContext from '../../SettingsContext';
 
 const generateId = () => getRandomChars(16);
 
 export function ShareUrl({ websiteId, data, onSave }) {
   const ref = useRef(null);
-  const { shareUrl, websitesUrl } = useContext(SettingsContext);
+  const { shareUrl } = useContext(SettingsContext);
   const { formatMessage, labels, messages } = useMessages();
   const { name, shareId } = data;
   const [id, setId] = useState(shareId);
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation({
-    mutationFn: (data: any) => post(`${websitesUrl}/${websiteId}`, data),
+    mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
   });
   const url = useMemo(
     () => `${shareUrl}${process.env.basePath}/share/${id}/${encodeURIComponent(name)}`,

src/app/(main)/settings/websites/[id]/TrackingCode.tsx

@@ -1,6 +1,5 @@
 import { TextArea } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useConfig } from 'components/hooks';
+import { useMessages, useConfig } from 'components/hooks';
 import { useContext } from 'react';
 import SettingsContext from '../../SettingsContext';
 

src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx

@@ -1,16 +1,7 @@
-import {
-  Button,
-  Form,
-  FormRow,
-  FormButtons,
-  FormInput,
-  SubmitButton,
-  TextField,
-} from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { useContext } from 'react';
 import SettingsContext from '../../SettingsContext';
+import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
 
 const CONFIRM_VALUE = 'DELETE';
 
@@ -23,40 +14,32 @@ export function WebsiteDeleteForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { formatMessage, labels } = useMessages();
   const { websitesUrl } = useContext(SettingsContext);
   const { del, useMutation } = useApi();
-  const { mutate, error } = useMutation({
+  const { mutate, isPending, error } = useMutation({
     mutationFn: (data: any) => del(`${websitesUrl}/${websiteId}`, data),
   });
 
-  const handleSubmit = async (data: any) => {
-    mutate(data, {
+  const handleConfirm = async () => {
+    mutate(null, {
       onSuccess: async () => {
-        onSave();
-        onClose();
+        onSave?.();
+        onClose?.();
       },
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <p>
-        <FormattedMessage
-          {...messages.actionConfirmation}
-          values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
-        />
-      </p>
-      <FormRow label={formatMessage(labels.confirm)}>
-        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
-      <FormButtons flex>
-        <SubmitButton variant="danger">{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/websites/[id]/WebsiteResetForm.tsx

@@ -1,16 +1,5 @@
-import {
-  Button,
-  Form,
-  FormRow,
-  FormButtons,
-  FormInput,
-  SubmitButton,
-  TextField,
-} from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import { useContext } from 'react';
-import SettingsContext from '../../SettingsContext';
+import { useApi, useMessages } from 'components/hooks';
+import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
 
 const CONFIRM_VALUE = 'RESET';
 
@@ -23,40 +12,30 @@ export function WebsiteResetForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
-  const { websitesUrl } = useContext(SettingsContext);
+  const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error } = useMutation({
-    mutationFn: (data: any) => post(`${websitesUrl}/${websiteId}/reset`, data),
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: (data: any) => post(`/websites/${websiteId}/reset`, data),
   });
 
-  const handleSubmit = async (data: any) => {
-    mutate(data, {
+  const handleConfirm = async () => {
+    mutate(null, {
       onSuccess: async () => {
-        onSave();
-        onClose();
+        onSave?.();
+        onClose?.();
       },
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <p>
-        <FormattedMessage
-          {...messages.actionConfirmation}
-          values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
-        />
-      </p>
-      <FormRow label={formatMessage(labels.confirm)}>
-        <FormInput name="confirm" rules={{ validate: value => value === CONFIRM_VALUE }}>
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
-      <FormButtons flex>
-        <SubmitButton variant="danger">{formatMessage(labels.reset)}</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.reset)}
+    />
   );
 }
 

src/app/(main)/teams/[id]/websites/TeamWebsites.tsx

@@ -1,14 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import TeamsContext from 'app/(main)/teams/TeamsContext';
-import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
-
-export default function TeamWebsites() {
-  const team = useContext(TeamsContext);
-
-  if (!team) {
-    return null;
-  }
-
-  return <WebsitesDataTable teamId={team.id} />;
-}

src/app/(main)/teams/[id]/websites/page.tsx

@@ -1,11 +1,11 @@
-import TeamWebsites from './TeamWebsites';
+import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
 import WebsitesHeader from 'app/(main)/settings/websites/WebsitesHeader';
 
 export default function TeamWebsitesPage({ params: { id } }: { params: { id: string } }) {
   return (
     <>
       <WebsitesHeader teamId={id} />
-      <TeamWebsites />
+      <WebsitesDataTable teamId={id} />
     </>
   );
 }

src/app/(main)/websites/WebsitesBrowse.tsx

@@ -1,9 +1,9 @@
 'use client';
 import WebsitesDataTable from '../settings/websites/WebsitesDataTable';
-import { useUser } from 'components/hooks';
+import { useLogin } from 'components/hooks';
 
 export function WebsitesBrowse() {
-  const { user } = useUser();
+  const { user } = useLogin();
   const allowEdit = !process.env.cloudMode;
 
   return <WebsitesDataTable userId={user.id} allowEdit={allowEdit} />;