66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
import { cn } from "@lume/utils";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Spinner } from "@lume/ui";
|
|
import { useUserContext } from "./provider";
|
|
import { NostrAccount } from "@lume/system";
|
|
|
|
export function UserFollowButton({
|
|
simple = false,
|
|
className,
|
|
}: {
|
|
simple?: boolean;
|
|
className?: string;
|
|
}) {
|
|
const user = useUserContext();
|
|
|
|
const [t] = useTranslation();
|
|
const [loading, setLoading] = useState(false);
|
|
const [followed, setFollowed] = useState(false);
|
|
|
|
const toggleFollow = async () => {
|
|
setLoading(true);
|
|
if (!followed) {
|
|
const add = await NostrAccount.follow(user.pubkey, user.profile?.name);
|
|
if (add) setFollowed(true);
|
|
} else {
|
|
const remove = await NostrAccount.unfollow(user.pubkey);
|
|
if (remove) setFollowed(false);
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
async function status() {
|
|
setLoading(true);
|
|
|
|
const contacts = await NostrAccount.getContactList();
|
|
if (contacts?.includes(user.pubkey)) {
|
|
setFollowed(true);
|
|
}
|
|
|
|
setLoading(false);
|
|
}
|
|
status();
|
|
}, []);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
disabled={loading}
|
|
onClick={() => toggleFollow()}
|
|
className={cn("w-max", className)}
|
|
>
|
|
{loading ? (
|
|
<Spinner className="size-4" />
|
|
) : followed ? (
|
|
!simple ? (
|
|
t("user.unfollow")
|
|
) : null
|
|
) : (
|
|
t("user.follow")
|
|
)}
|
|
</button>
|
|
);
|
|
}
|