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' import { OnlineUserAvatar } from 'web/components/online-user-list' 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 ( {userIds.length === 0 && (
No users yet...
)} {userIds.map((userId) => ( onFollow(userId)} onUnfollow={() => onUnfollow(userId)} hideFollowButton={userId === currentUser?.id} /> ))} ) } 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 ( {!hideFollowButton && ( )} ) }