108 lines
4.8 KiB
TypeScript
108 lines
4.8 KiB
TypeScript
import { useRosettaBreakpoints } from "@/app/hooks/useRosettaBreakpoints";
|
|
import { useGroupInviteStatus } from "@/app/providers/DialogProvider/useGroupInviteStatus";
|
|
import { useGroups } from "@/app/providers/DialogProvider/useGroups";
|
|
import { GroupStatus } from "@/app/providers/ProtocolProvider/protocol/packets/packet.group.invite.info";
|
|
import { Avatar, Button, Flex, Paper, Skeleton, Text } from "@mantine/core";
|
|
import { IconBan, IconCheck, IconLink, IconPlus, IconX } from "@tabler/icons-react";
|
|
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export interface GroupInviteMessageProps {
|
|
groupInviteCode: string;
|
|
}
|
|
|
|
export function GroupInviteMessage(props: GroupInviteMessageProps) {
|
|
const {parseGroupString, prepareForRoute, joinGroup, loading} = useGroups();
|
|
const [groupInfo, setGroupInfo] = useState({
|
|
groupId: '',
|
|
title: '',
|
|
description: '',
|
|
encryptKey: ''
|
|
});
|
|
const {inviteStatus} =
|
|
useGroupInviteStatus(groupInfo.groupId);
|
|
const colorStatus = (
|
|
inviteStatus === GroupStatus.NOT_JOINED ? 'blue' :
|
|
inviteStatus === GroupStatus.JOINED ? 'green' :
|
|
'red'
|
|
);
|
|
const navigate = useNavigate();
|
|
const {lg} = useRosettaBreakpoints();
|
|
|
|
useEffect(() => {
|
|
initGroupInfo();
|
|
}, [props.groupInviteCode]);
|
|
|
|
const initGroupInfo = async () => {
|
|
const info = await parseGroupString(props.groupInviteCode);
|
|
if(!info){
|
|
setGroupInfo({
|
|
groupId: 'Invalid',
|
|
title: 'Invalid',
|
|
description: 'Invalid',
|
|
encryptKey: ''
|
|
});
|
|
return;
|
|
}
|
|
setGroupInfo(info);
|
|
}
|
|
|
|
const onClickButton = async () => {
|
|
if(inviteStatus === GroupStatus.NOT_JOINED){
|
|
await joinGroup(props.groupInviteCode);
|
|
return;
|
|
}
|
|
if(inviteStatus === GroupStatus.JOINED){
|
|
navigate(`/main/chat/${prepareForRoute(groupInfo.groupId)}`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{groupInfo.groupId === '' && (
|
|
<Skeleton miw={200} height={100} mt={'xs'} p={'sm'} />
|
|
)}
|
|
{groupInfo.groupId != '' && (
|
|
<Paper withBorder mt={'xs'} p={'sm'}>
|
|
<Flex align={'center'} gap={'md'}>
|
|
{lg && (
|
|
<Avatar size={50} bg={colorStatus}>
|
|
<IconLink color={'white'} size={25} />
|
|
</Avatar>
|
|
)}
|
|
<Flex direction={'column'}>
|
|
<Text w={150} fz={13} c={colorStatus} fw={500}>{groupInfo.title}</Text>
|
|
<Text fz={10} c={'gray'}>
|
|
{inviteStatus === GroupStatus.NOT_JOINED && "Invite to join in this group."}
|
|
{inviteStatus === GroupStatus.JOINED && "You are already a member of this group."}
|
|
{inviteStatus === GroupStatus.INVALID && "This group invite is invalid."}
|
|
{inviteStatus === GroupStatus.BANNED && "You are banned in this group."}
|
|
</Text>
|
|
{inviteStatus === GroupStatus.NOT_JOINED && (
|
|
<Button loading={loading} onClick={onClickButton} leftSection={
|
|
<IconPlus size={14} />
|
|
} mt={'xs'} variant={'light'} size={'compact-xs'}>Join Group</Button>
|
|
)}
|
|
{inviteStatus === GroupStatus.JOINED && (
|
|
<Button loading={loading} onClick={onClickButton} leftSection={
|
|
<IconCheck size={14} />
|
|
} mt={'xs'} variant={'light'} color={'green'} size={'compact-xs'}>In group</Button>
|
|
)}
|
|
{inviteStatus === GroupStatus.INVALID && (
|
|
<Button loading={loading} onClick={onClickButton} leftSection={
|
|
<IconX size={14} />
|
|
} mt={'xs'} variant={'light'} color={'red'} size={'compact-xs'}>Invalid</Button>
|
|
)}
|
|
{inviteStatus === GroupStatus.BANNED && (
|
|
<Button loading={loading} onClick={onClickButton} leftSection={
|
|
<IconBan size={14} />
|
|
} mt={'xs'} variant={'light'} color={'red'} size={'compact-xs'}>Banned</Button>
|
|
)}
|
|
</Flex>
|
|
</Flex>
|
|
</Paper>
|
|
)}
|
|
</>
|
|
);
|
|
} |