Function GroupInfo

packages/web/src/modules/GroupInfo.tsx:25–102

(props: GroupInfoProps)

}

function GroupInfo(props: GroupInfoProps) {
    const { visible, onClose, group } = props;

    const action = useAction();
    const hasLinkman = useSelector(
        (state: State) => !!state.linkmans[group?._id as string],
    );
    const [largerAvatar, toggleLargetAvatar] = useState(false);

    if (!group) {
        return null;
    }

    async function handleJoinGroup() {
        onClose();

        if (!group) {
            return;
        }
        const groupRes = await joinGroup(group._id);
        if (groupRes) {
            groupRes.type = 'group';
            action.addLinkman(groupRes, true);

            const messages = await getLinkmanHistoryMessages(group._id, 0);
            if (messages) {
                action.addLinkmanHistoryMessages(group._id, messages);
            }
        }
    }

    function handleFocusGroup() {
        onClose();

        if (!group) {
            return;
        }
        action.setFocus(group._id);
    }

    return (
        <Dialog
            className={Style.infoDialog}
            visible={visible}
            onClose={onClose}
        >
            <div className={Style.coantainer}>
                <div className={Style.header}>
                    <Avatar
                        size={60}
                        src={group.avatar}
                        onMouseEnter={() => toggleLargetAvatar(true)}
                        onMouseLeave={() => toggleLargetAvatar(false)}
                    />
                    <img
                        className={`${Style.largeAvatar} ${
                            largerAvatar ? 'show' : 'hide'
                        }`}