61 lines
1.6 KiB
TypeScript
Executable File
61 lines
1.6 KiB
TypeScript
Executable File
import {Button, ButtonProps} from '@common/ui/buttons/button';
|
|
import {useAuth} from '@common/auth/use-auth';
|
|
import {User} from '@common/auth/user';
|
|
import {useIsUserFollowing} from '@common/users/queries/use-followed-users';
|
|
import {useFollowUser} from '@common/users/queries/use-follow-user';
|
|
import {useUnfollowUser} from '@common/users/queries/use-unfollow-user';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import clsx from 'clsx';
|
|
|
|
interface Props extends Omit<ButtonProps, 'onClick' | 'disabled'> {
|
|
user: User;
|
|
minWidth?: string | null;
|
|
}
|
|
export function FollowButton({
|
|
user,
|
|
className,
|
|
minWidth = 'min-w-82',
|
|
...buttonProps
|
|
}: Props) {
|
|
const {user: currentUser} = useAuth();
|
|
const {isFollowing, isLoading} = useIsUserFollowing(user);
|
|
const followUser = useFollowUser();
|
|
const unfollowUser = useUnfollowUser();
|
|
|
|
const mergedClassName = clsx(className, minWidth);
|
|
|
|
if (isFollowing) {
|
|
return (
|
|
<Button
|
|
{...buttonProps}
|
|
className={mergedClassName}
|
|
onClick={() => unfollowUser.mutate({user})}
|
|
disabled={
|
|
!currentUser ||
|
|
currentUser?.id === user.id ||
|
|
unfollowUser.isPending ||
|
|
isLoading
|
|
}
|
|
>
|
|
<Trans message="Unfollow" />
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
{...buttonProps}
|
|
className={mergedClassName}
|
|
onClick={() => followUser.mutate({user})}
|
|
disabled={
|
|
!currentUser ||
|
|
currentUser?.id === user.id ||
|
|
followUser.isPending ||
|
|
isLoading
|
|
}
|
|
>
|
|
<Trans message="Follow" />
|
|
</Button>
|
|
);
|
|
}
|