51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import { LoaderIcon } from "@lume/icons";
|
|
import { cn } from "@lume/utils";
|
|
import { useEffect, useState } from "react";
|
|
import { useArk } from "../../hooks/useArk";
|
|
|
|
export function UserFollowButton({
|
|
target,
|
|
className,
|
|
}: { target: string; className?: string }) {
|
|
const ark = useArk();
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [followed, setFollowed] = useState(false);
|
|
|
|
const toggleFollow = async () => {
|
|
if (!followed) {
|
|
const add = await ark.createContact(target);
|
|
if (add) setFollowed(true);
|
|
} else {
|
|
const remove = await ark.deleteContact(target);
|
|
if (remove) setFollowed(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
async function status() {
|
|
setLoading(true);
|
|
|
|
const contacts = await ark.getUserContacts();
|
|
if (contacts?.includes(target)) {
|
|
setFollowed(true);
|
|
}
|
|
|
|
setLoading(false);
|
|
}
|
|
status();
|
|
}, []);
|
|
|
|
return (
|
|
<button type="button" onClick={toggleFollow} className={cn("", className)}>
|
|
{loading ? (
|
|
<LoaderIcon className="size-4 animate-spin" />
|
|
) : followed ? (
|
|
"Unfollow"
|
|
) : (
|
|
"Follow"
|
|
)}
|
|
</button>
|
|
);
|
|
}
|