117 lines
3.8 KiB
TypeScript
117 lines
3.8 KiB
TypeScript
import { cancelInvitation } from '@/service/house.api';
|
|
import { INVITE_STATUS } from '@/types/enum';
|
|
import { authClient } from '@lib/auth-client';
|
|
import { m } from '@paraglide/messages';
|
|
import { useMutation } from '@tanstack/react-query';
|
|
import { Item, ItemContent, ItemDescription, ItemTitle } from '@ui/item';
|
|
import { Skeleton } from '@ui/skeleton';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@ui/table';
|
|
import { toast } from 'sonner';
|
|
import RoleBadge from '../avatar/role-badge';
|
|
import { Button } from '../ui/button';
|
|
|
|
type InvitationListProps = {
|
|
activeHouse: ReturnType<typeof authClient.useActiveOrganization>['data'];
|
|
};
|
|
|
|
const CurrentUserInvitationList = ({ activeHouse }: InvitationListProps) => {
|
|
const { refetch } = authClient.useActiveOrganization();
|
|
|
|
const { mutate: cancelInvitationMutation } = useMutation({
|
|
mutationFn: cancelInvitation,
|
|
onSuccess: () => {
|
|
refetch();
|
|
// _setOpen(false);
|
|
toast.success(m.houses_page_message_delete_house_success(), {
|
|
richColors: true,
|
|
});
|
|
},
|
|
onError: (error: ReturnError) => {
|
|
console.error(error);
|
|
const code = error.code as Parameters<
|
|
typeof m.backend_message
|
|
>[0]['code'];
|
|
toast.error(m.backend_message({ code }), {
|
|
richColors: true,
|
|
});
|
|
},
|
|
});
|
|
|
|
const handleCancelInvitation = (id: string) => {
|
|
cancelInvitationMutation({ data: { id } });
|
|
};
|
|
|
|
if (!activeHouse) {
|
|
return <Skeleton className="col-span-2 h-80 w-full rounded-xl" />;
|
|
}
|
|
|
|
return (
|
|
<div className="overflow-hidden rounded-md border col-span-1 lg:col-span-3 shadow-xs bg-linear-to-br from-primary/5 to-card">
|
|
<Table className="bg-white">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="px-4 bg-primary text-white text-sm w-1/2">
|
|
{m.houses_page_ui_view_table_header_invite()}
|
|
</TableHead>
|
|
<TableHead className="px-4 bg-primary text-white text-sm w-1/2"></TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{activeHouse.invitations.length > 0 ? (
|
|
activeHouse.invitations.map((item) => (
|
|
<TableRow>
|
|
<TableCell>
|
|
<Item>
|
|
<ItemContent>
|
|
<ItemTitle>
|
|
<strong>{m.houses_user_page_invite_label_to()}:</strong>{' '}
|
|
{item.email} - <RoleBadge type={item.role} />
|
|
</ItemTitle>
|
|
<ItemDescription>
|
|
<strong>
|
|
{m.houses_user_page_invite_label_status()}:{' '}
|
|
{m.invite_status({
|
|
status: item.status as INVITE_STATUS,
|
|
})}
|
|
</strong>
|
|
</ItemDescription>
|
|
</ItemContent>
|
|
</Item>
|
|
</TableCell>
|
|
<TableCell className="p-6">
|
|
<div className="flex justify-end gap-2">
|
|
{item.status !== INVITE_STATUS.CANCELED && (
|
|
<Button
|
|
variant="outline"
|
|
className="cursor-pointer w-20 py-4"
|
|
onClick={() => handleCancelInvitation(item.id)}
|
|
>
|
|
{m.ui_cancel_btn()}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={2} className="h-24 text-center">
|
|
No results.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CurrentUserInvitationList;
|