Add functionality to leave team

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

@@ -1,23 +1,23 @@
+import { useLocale, useLogin, useMessages } from 'components/hooks';
+import { useRouter } from 'next/navigation';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import { useMessages, useLocale, useLogin } from 'components/hooks';
+import { touch } from 'store/modified';
 import TeamDeleteForm from './TeamLeaveForm';
 
-export function TeamLeaveButton({
-  teamId,
-  teamName,
-  onLeave,
-}: {
-  teamId: string;
-  teamName: string;
-  onLeave?: () => void;
-}) {
+export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName: string }) {
   const { formatMessage, labels } = useMessages();
+  const router = useRouter();
   const { dir } = useLocale();
   const { user } = useLogin();
 
+  const handleLeave = async () => {
+    touch('teams');
+    router.push('/settings/teams');
+  };
+
   return (
     <ModalTrigger>
-      <Button>
+      <Button variant="secondary">
         <Icon rotate={dir === 'rtl' ? 180 : 0}>
           <Icons.Logout />
         </Icon>
@@ -29,7 +29,7 @@ export function TeamLeaveButton({
             teamId={teamId}
             userId={user.id}
             teamName={teamName}
-            onSave={onLeave}
+            onSave={handleLeave}
             onClose={close}
           />
         )}

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

@@ -35,7 +35,7 @@ export function TeamLeaveForm({
     <ConfirmationForm
       buttonLabel={formatMessage(labels.leave)}
       message={
-        <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
+        <FormattedMessage {...messages.confirmLeave} values={{ target: <b>{teamName}</b> }} />
       }
       onConfirm={handleConfirm}
       onClose={onClose}

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

@@ -2,6 +2,7 @@ import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';
 import TeamJoinForm from './TeamJoinForm';
+import { touch } from 'store/modified';
 
 export function TeamsJoinButton() {
   const { formatMessage, labels, messages } = useMessages();
@@ -9,6 +10,7 @@ export function TeamsJoinButton() {
 
   const handleJoin = () => {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    touch('teams');
   };
 
   return (

src/app/(main)/settings/teams/[teamId]/team/TeamDetails.tsx

@@ -1,13 +1,13 @@
-import { useContext, useState } from 'react';
-import { Item, Tabs, Flexbox, Text, Icon } from 'react-basics';
+import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
+import { useLogin, useMessages } from 'components/hooks';
+import Icons from 'components/icons';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
-import Icons from 'components/icons';
-import { useLogin, useMessages } from 'components/hooks';
-import TeamEditForm from './TeamEditForm';
+import { useContext, useState } from 'react';
+import { Flexbox, Item, Tabs } from 'react-basics';
+import TeamLeaveButton from '../../TeamLeaveButton';
 import TeamAdmin from './TeamAdmin';
-import LinkButton from 'components/common/LinkButton';
-import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamEditForm from './TeamEditForm';
 
 export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
@@ -22,14 +22,7 @@ export function TeamDetails({ teamId }: { teamId: string }) {
   return (
     <Flexbox direction="column">
       <PageHeader title={team?.name} icon={<Icons.Users />}>
-        {!canEdit && (
-          <LinkButton href={`/teams/${teamId}`}>
-            <Icon>
-              <Icons.Logout />
-            </Icon>
-            <Text>{formatMessage(labels.leaveTeam)}</Text>
-          </LinkButton>
-        )}
+        {!canEdit && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
         <Item key="details">{formatMessage(labels.details)}</Item>