95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
getPendingFollowRequests,
|
|
acceptFollowRequest,
|
|
rejectFollowRequest,
|
|
type RemoteActor,
|
|
} from "@/lib/api";
|
|
import { useAuth } from "@/hooks/use-auth";
|
|
import { UserAvatar } from "@/components/user-avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { toast } from "sonner";
|
|
import Link from "next/link";
|
|
|
|
interface Props {
|
|
compact?: boolean;
|
|
}
|
|
|
|
export function PendingRequests({ compact = false }: Props) {
|
|
const { token } = useAuth();
|
|
const [requests, setRequests] = useState<RemoteActor[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!token) return;
|
|
getPendingFollowRequests(token)
|
|
.then(setRequests)
|
|
.catch(() => toast.error("Failed to load follow requests"))
|
|
.finally(() => setLoading(false));
|
|
}, [token]);
|
|
|
|
const accept = async (actorUrl: string) => {
|
|
if (!token) return;
|
|
setRequests((prev) => prev.filter((r) => r.url !== actorUrl));
|
|
await acceptFollowRequest(actorUrl, token).catch(() => {
|
|
toast.error("Failed to accept follow request");
|
|
});
|
|
};
|
|
|
|
const reject = async (actorUrl: string) => {
|
|
if (!token) return;
|
|
setRequests((prev) => prev.filter((r) => r.url !== actorUrl));
|
|
await rejectFollowRequest(actorUrl, token).catch(() => {
|
|
toast.error("Failed to reject follow request");
|
|
});
|
|
};
|
|
|
|
if (loading) return <p className="text-sm text-muted-foreground">Loading…</p>;
|
|
if (requests.length === 0)
|
|
return <p className="text-sm text-muted-foreground">No pending requests.</p>;
|
|
|
|
return (
|
|
<ul className={compact ? "space-y-2" : "space-y-3"}>
|
|
{requests.map((actor) => (
|
|
<li
|
|
key={actor.url}
|
|
className="flex items-center justify-between gap-3"
|
|
>
|
|
<Link
|
|
href={`/users/@${actor.handle}`}
|
|
className="flex items-center gap-2 min-w-0 hover:opacity-80"
|
|
>
|
|
<UserAvatar
|
|
src={actor.avatarUrl}
|
|
alt={actor.displayName}
|
|
className="h-8 w-8 shrink-0"
|
|
/>
|
|
<div className="min-w-0">
|
|
<p className="text-sm font-medium truncate">
|
|
{actor.displayName || actor.handle}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground truncate font-mono">
|
|
@{actor.handle}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
<div className="flex gap-2 shrink-0">
|
|
<Button size="sm" onClick={() => accept(actor.url)}>
|
|
Accept
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => reject(actor.url)}
|
|
>
|
|
Reject
|
|
</Button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|