95 lines
2.1 KiB
TypeScript
95 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { LoadingIcon } from "@/components/LoadingIcon";
|
|
import { callServerPromise } from "@/components/callServerPromise";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { useAuth, useClerk } from "@clerk/nextjs";
|
|
import { MoreVertical } from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
export function ButtonAction({
|
|
action,
|
|
children,
|
|
routerAction = "back",
|
|
...rest
|
|
}: {
|
|
action: () => Promise<any>;
|
|
routerAction?: "refresh" | "back";
|
|
children: React.ReactNode;
|
|
}) {
|
|
const [pending, setPending] = useState(false);
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<button
|
|
onClick={async () => {
|
|
if (pending) return;
|
|
|
|
setPending(true);
|
|
await callServerPromise(action());
|
|
setPending(false);
|
|
|
|
if (routerAction === "back") {
|
|
router.back();
|
|
router.refresh();
|
|
}
|
|
else if (routerAction === "refresh") router.refresh();
|
|
}}
|
|
{...rest}
|
|
>
|
|
{children} {pending && <LoadingIcon />}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export function ButtonActionMenu(props: {
|
|
title?: string;
|
|
actions: {
|
|
title: string;
|
|
action: () => Promise<any>;
|
|
}[];
|
|
}) {
|
|
const user = useAuth();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const clerk = useClerk();
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button className="gap-2" variant="outline" disabled={isLoading}>
|
|
{props.title}
|
|
{isLoading ? <LoadingIcon /> : <MoreVertical size={14} />}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56">
|
|
{props.actions.map((action) => (
|
|
<DropdownMenuItem
|
|
key={action.title}
|
|
onClick={async () => {
|
|
if (!user.isSignedIn) {
|
|
clerk.openSignIn({
|
|
redirectUrl: window.location.href,
|
|
});
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
await callServerPromise(action.action());
|
|
setIsLoading(false);
|
|
}}
|
|
>
|
|
{action.title}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|