Updated query hooks for teams and websites.

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 }) {