72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import clsx from 'clsx'
|
|
import { useFollows } from 'web/hooks/use-follows'
|
|
import { useUser } from 'web/hooks/use-user'
|
|
import { follow, unfollow } from 'web/lib/firebase/users'
|
|
import { withTracking } from 'web/lib/service/analytics'
|
|
|
|
export function FollowButton(props: {
|
|
isFollowing: boolean | undefined
|
|
onFollow: () => void
|
|
onUnfollow: () => void
|
|
small?: boolean
|
|
className?: string
|
|
}) {
|
|
const { isFollowing, onFollow, onUnfollow, small, className } = props
|
|
|
|
const user = useUser()
|
|
|
|
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 (!user || isFollowing === undefined)
|
|
return (
|
|
<button
|
|
className={clsx('btn btn-sm invisible', small && smallStyle, className)}
|
|
>
|
|
Follow
|
|
</button>
|
|
)
|
|
|
|
if (isFollowing) {
|
|
return (
|
|
<button
|
|
className={clsx(
|
|
'btn btn-outline btn-sm',
|
|
small && smallStyle,
|
|
className
|
|
)}
|
|
onClick={withTracking(onUnfollow, 'unfollow')}
|
|
>
|
|
Following
|
|
</button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
className={clsx('btn btn-sm', small && smallStyle, className)}
|
|
onClick={withTracking(onFollow, 'follow')}
|
|
>
|
|
Follow
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export function UserFollowButton(props: { userId: string; small?: boolean }) {
|
|
const { userId, small } = props
|
|
const currentUser = useUser()
|
|
const following = useFollows(currentUser?.id)
|
|
const isFollowing = following?.includes(userId)
|
|
|
|
if (!currentUser || currentUser.id === userId) return null
|
|
|
|
return (
|
|
<FollowButton
|
|
isFollowing={isFollowing}
|
|
onFollow={() => follow(currentUser.id, userId)}
|
|
onUnfollow={() => unfollow(currentUser.id, userId)}
|
|
small={small}
|
|
/>
|
|
)
|
|
}
|