import clsx from 'clsx' import { useFollows } from 'web/hooks/use-follows' import { useUser, useUserById } from 'web/hooks/use-user' import { follow, unfollow } from 'web/lib/firebase/users' import { Avatar } from './avatar' import { FollowButton } from './follow-button' import { Col } from './layout/col' import { Row } from './layout/row' import { UserLink } from './user-page' export function FollowList(props: { userIds: string[] }) { const { userIds } = props const currentUser = useUser() const followedUserIds = useFollows(currentUser?.id) const onFollow = (userId: string) => { if (!currentUser) return follow(currentUser.id, userId) } const onUnfollow = (userId: string) => { if (!currentUser) return unfollow(currentUser.id, userId) } return ( <Col className="gap-2"> {userIds.length === 0 && ( <div className="text-gray-500">No users yet...</div> )} {userIds.map((userId) => ( <UserFollowItem key={userId} userId={userId} isFollowing={ followedUserIds ? followedUserIds.includes(userId) : false } onFollow={() => onFollow(userId)} onUnfollow={() => onUnfollow(userId)} hideFollowButton={userId === currentUser?.id} /> ))} </Col> ) } function UserFollowItem(props: { userId: string isFollowing: boolean onFollow: () => void onUnfollow: () => void hideFollowButton?: boolean className?: string }) { const { userId, isFollowing, onFollow, onUnfollow, hideFollowButton, className, } = props const user = useUserById(userId) return ( <Row className={clsx('items-center justify-between gap-2 p-2', className)}> <Row className="items-center gap-2"> <Avatar username={user?.username} avatarUrl={user?.avatarUrl} /> {user && <UserLink name={user.name} username={user.username} />} </Row> {!hideFollowButton && ( <FollowButton isFollowing={isFollowing} onFollow={onFollow} onUnfollow={onUnfollow} /> )} </Row> ) }