import clsx from 'clsx' import { User } from 'common/user' import { useEffect, useState } from 'react' import { useUser } from 'web/hooks/use-user' import { withTracking } from 'web/lib/service/analytics' import { Row } from 'web/components/layout/row' import { useMemberGroups } from 'web/hooks/use-group' import { TextButton } from 'web/components/text-button' import { Group } from 'common/group' import { Modal } from 'web/components/layout/modal' import { Col } from 'web/components/layout/col' import { joinGroup, leaveGroup } from 'web/lib/firebase/groups' import { firebaseLogin } from 'web/lib/firebase/users' import { GroupLink } from 'web/pages/groups' import toast from 'react-hot-toast' export function GroupsButton(props: { user: User }) { const { user } = props const [isOpen, setIsOpen] = useState(false) const groups = useMemberGroups(user.id, undefined, { by: 'mostRecentChatActivityTime', }) return ( <> setIsOpen(true)}> {groups?.length ?? ''} Groups ) } function GroupsDialog(props: { user: User groups: Group[] isOpen: boolean setIsOpen: (isOpen: boolean) => void }) { const { user, groups, isOpen, setIsOpen } = props return (
{user.name}
@{user.username}
) } function GroupsList(props: { groups: Group[] }) { const { groups } = props return ( {groups.length === 0 && (
No groups yet...
)} {groups .sort((group1, group2) => group2.createdTime - group1.createdTime) .map((group) => ( ))} ) } function GroupItem(props: { group: Group; className?: string }) { const { group, className } = props return ( ) } export function JoinOrLeaveGroupButton(props: { group: Group small?: boolean className?: string }) { const { group, small, className } = props const currentUser = useUser() const [isMember, setIsMember] = useState(false) useEffect(() => { if (currentUser && group.memberIds.includes(currentUser.id)) { setIsMember(group.memberIds.includes(currentUser.id)) } }, [currentUser, group]) const onJoinGroup = () => { if (!currentUser) return setIsMember(true) joinGroup(group, currentUser.id).catch(() => { setIsMember(false) toast.error('Failed to join group') }) } const onLeaveGroup = () => { if (!currentUser) return setIsMember(false) leaveGroup(group, currentUser.id).catch(() => { setIsMember(true) toast.error('Failed to leave group') }) } const smallStyle = 'btn !btn-xs border-2 border-gray-500 bg-white normal-case text-gray-500 hover:border-gray-500 hover:bg-white hover:text-gray-500' if (!currentUser || isMember === undefined) { if (!group.anyoneCanJoin) return
Closed
return ( ) } if (isMember) { return ( ) } if (!group.anyoneCanJoin) return
Closed
return ( ) }