111 lines
3.6 KiB
TypeScript
111 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Image from "next/image";
|
|
import {
|
|
confirmParticipantAction,
|
|
rejectParticipantAction,
|
|
} from "@/features/trip/actions";
|
|
|
|
export interface PendingJoinRequest {
|
|
id: string;
|
|
user: { name: string; image: string | null };
|
|
}
|
|
|
|
interface OrganizerJoinRequestsProps {
|
|
tripId: string;
|
|
pending: PendingJoinRequest[];
|
|
}
|
|
|
|
export function OrganizerJoinRequests({
|
|
tripId,
|
|
pending,
|
|
}: OrganizerJoinRequestsProps) {
|
|
const router = useRouter();
|
|
const [loadingId, setLoadingId] = useState<string | null>(null);
|
|
const [error, setError] = useState("");
|
|
|
|
async function run(
|
|
participantId: string,
|
|
action: "confirm" | "reject"
|
|
) {
|
|
setLoadingId(participantId);
|
|
setError("");
|
|
const result =
|
|
action === "confirm"
|
|
? await confirmParticipantAction(tripId, participantId)
|
|
: await rejectParticipantAction(tripId, participantId);
|
|
setLoadingId(null);
|
|
if (result.error) {
|
|
setError(result.error);
|
|
return;
|
|
}
|
|
router.refresh();
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-xl border border-amber-200 bg-amber-50/70 p-4 sm:p-5">
|
|
<h2 className="text-sm font-bold text-amber-950 sm:text-base">
|
|
Permintaan join ({pending.length})
|
|
</h2>
|
|
<p className="mt-1 text-xs text-amber-900/80 sm:text-sm">
|
|
Setujui atau tolak siapa yang boleh ikut trip ini.
|
|
</p>
|
|
{error && (
|
|
<p className="mt-3 rounded-lg bg-red-50 px-3 py-2 text-xs font-medium text-red-700 sm:text-sm">
|
|
{error}
|
|
</p>
|
|
)}
|
|
<ul className="mt-4 space-y-3">
|
|
{pending.map((p) => (
|
|
<li
|
|
key={p.id}
|
|
className="flex flex-col gap-3 rounded-xl border border-amber-100 bg-white/90 p-3 sm:flex-row sm:items-center sm:justify-between"
|
|
>
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
{p.user.image ? (
|
|
<Image
|
|
src={p.user.image}
|
|
alt=""
|
|
width={40}
|
|
height={40}
|
|
className="h-10 w-10 shrink-0 rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-600 text-sm font-bold text-white">
|
|
{p.user.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-semibold text-neutral-800">
|
|
{p.user.name}
|
|
</p>
|
|
<p className="text-xs text-amber-800/80">Menunggu persetujuan</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex shrink-0 gap-2">
|
|
<button
|
|
type="button"
|
|
disabled={loadingId !== null}
|
|
onClick={() => run(p.id, "reject")}
|
|
className="rounded-lg border border-neutral-200 bg-white px-3 py-2 text-xs font-semibold text-neutral-600 hover:bg-neutral-50 disabled:opacity-50 sm:text-sm"
|
|
>
|
|
{loadingId === p.id ? "…" : "Tolak"}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={loadingId !== null}
|
|
onClick={() => run(p.id, "confirm")}
|
|
className="rounded-lg bg-primary-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-primary-700 disabled:opacity-50 sm:text-sm"
|
|
>
|
|
{loadingId === p.id ? "Memproses…" : "Setujui"}
|
|
</button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|