import { PencilIcon } from '@heroicons/react/outline' import { User } from 'common/user' import { useEffect, useState } from 'react' import { useFollowers, useFollows } from 'web/hooks/use-follows' import { prefetchUsers, useUser } from 'web/hooks/use-user' import { FollowList } from './follow-list' import { Col } from './layout/col' import { Modal } from './layout/modal' import { Tabs } from './layout/tabs' import { useDiscoverUsers } from 'web/hooks/use-users' import { TextButton } from './text-button' export function FollowingButton(props: { user: User }) { const { user } = props const [isOpen, setIsOpen] = useState(false) const followingIds = useFollows(user.id) const followerIds = useFollowers(user.id) return ( <> setIsOpen(true)}> {followingIds?.length ?? ''}{' '} Following ) } export function EditFollowingButton(props: { user: User; className?: string }) { const { user, className } = props const [isOpen, setIsOpen] = useState(false) const followingIds = useFollows(user.id) const followerIds = useFollowers(user.id) return ( setIsOpen(true)}> Following ) } export function FollowersButton(props: { user: User }) { const { user } = props const [isOpen, setIsOpen] = useState(false) const followingIds = useFollows(user.id) const followerIds = useFollowers(user.id) return ( <> setIsOpen(true)}> {followerIds?.length ?? ''}{' '} Followers ) } function FollowingFollowersDialog(props: { user: User followingIds: string[] followerIds: string[] defaultTab: 'following' | 'followers' isOpen: boolean setIsOpen: (isOpen: boolean) => void }) { const { user, followingIds, followerIds, defaultTab, isOpen, setIsOpen } = props useEffect(() => { prefetchUsers([...followingIds, ...followerIds]) }, [followingIds, followerIds]) const currentUser = useUser() const discoverUserIds = useDiscoverUsers() useEffect(() => { prefetchUsers(discoverUserIds) }, [discoverUserIds]) return (
{user.name}
@{user.username}
, }, { title: 'Followers', content: , }, ...(currentUser ? [ { title: 'Discover', content: , }, ] : []), ]} defaultIndex={defaultTab === 'following' ? 0 : 1} />
) }