m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-14 21:10:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add functionality to leave team

Browse Source
This commit is contained in:
Francis Cao 2024-02-07 11:33:35 -08:00
parent d7f32e6987
commit 0016a9f4e1
4 changed files with 23 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/(main)/settings/teams/TeamLeaveButton.tsx
View File

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

2
src/app/(main)/settings/teams/TeamLeaveForm.tsx
View File

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

2
src/app/(main)/settings/teams/TeamsJoinButton.tsx
View File

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

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

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