68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import { t } from "@lingui/core/macro";
|
|
import { Trans } from "@lingui/react/macro";
|
|
import { useAuth } from "../hooks/useAuth.ts";
|
|
import { useFollows } from "../hooks/useFollows.ts";
|
|
|
|
interface FollowUserButtonProps {
|
|
targetUserId: string;
|
|
targetUsername: string;
|
|
}
|
|
|
|
interface FollowPlaylistButtonProps {
|
|
targetPlaylistId: string;
|
|
isPublic: boolean;
|
|
}
|
|
|
|
export function FollowUserButton(
|
|
{ targetUserId, targetUsername }: FollowUserButtonProps,
|
|
) {
|
|
const { user } = useAuth();
|
|
const { followedUserIds, followUser, unfollowUser, isLoaded } = useFollows();
|
|
|
|
if (!user || user.id === targetUserId) return null;
|
|
|
|
const isFollowing = followedUserIds.has(targetUserId);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`follow-btn${isFollowing ? " follow-btn--following" : ""}`}
|
|
disabled={!isLoaded}
|
|
onClick={() =>
|
|
isFollowing ? unfollowUser(targetUserId) : followUser(targetUserId)}
|
|
aria-label={isFollowing
|
|
? t`Unfollow ${targetUsername}`
|
|
: t`Follow ${targetUsername}`}
|
|
>
|
|
{isFollowing ? <Trans>Following</Trans> : <Trans>Follow</Trans>}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export function FollowPlaylistButton(
|
|
{ targetPlaylistId, isPublic }: FollowPlaylistButtonProps,
|
|
) {
|
|
const { user } = useAuth();
|
|
const { followedPlaylistIds, followPlaylist, unfollowPlaylist, isLoaded } =
|
|
useFollows();
|
|
|
|
if (!user || !isPublic) return null;
|
|
|
|
const isFollowing = followedPlaylistIds.has(targetPlaylistId);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`follow-btn${isFollowing ? " follow-btn--following" : ""}`}
|
|
disabled={!isLoaded}
|
|
onClick={() =>
|
|
isFollowing
|
|
? unfollowPlaylist(targetPlaylistId)
|
|
: followPlaylist(targetPlaylistId)}
|
|
aria-label={isFollowing ? t`Unfollow playlist` : t`Follow playlist`}
|
|
>
|
|
{isFollowing ? <Trans>Following</Trans> : <Trans>Follow</Trans>}
|
|
</button>
|
|
);
|
|
}
|