97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
import { Check, Copy, RefreshCw } from "lucide-react";
|
|
import React from "react";
|
|
import { useOrigin } from "~/hooks/use-origin";
|
|
import { ModalType, useModalStore } from "~/stores/modal-store";
|
|
import { Button } from "../ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "../ui/dialog";
|
|
import { Input } from "../ui/input";
|
|
import { Label } from "../ui/label";
|
|
|
|
export default function CreateServerInviteModal() {
|
|
const { type, data, isOpen, onClose } = useModalStore();
|
|
const [inviteCode, setInviteCode] = React.useState<string | undefined>(
|
|
undefined,
|
|
);
|
|
const origin = useOrigin();
|
|
const [isCopied, setCopied] = React.useState(false);
|
|
|
|
const isModalOpen = type === ModalType.CREATE_SERVER_INVITE && isOpen;
|
|
const inviteLink = `${origin}/app/invite/${inviteCode}`;
|
|
|
|
const onOpenChange = (openState: boolean) => {
|
|
onClose();
|
|
};
|
|
|
|
const regenerateInviteCode = () => {
|
|
import("~/lib/api/client/server")
|
|
.then((m) =>
|
|
m.default.createInvite((data as { serverId: string }).serverId),
|
|
)
|
|
.then((invite) => {
|
|
setInviteCode(invite.code);
|
|
});
|
|
};
|
|
|
|
const onCopy = () => {
|
|
navigator.clipboard.writeText(inviteLink);
|
|
setCopied(true);
|
|
|
|
setTimeout(() => setCopied(false), 1000);
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
if (isModalOpen) {
|
|
import("~/lib/api/client/server")
|
|
.then((m) =>
|
|
m.default.createInvite(
|
|
(data as { serverId: string }).serverId,
|
|
),
|
|
)
|
|
.then((invite) => {
|
|
setInviteCode(invite.code);
|
|
});
|
|
} else {
|
|
setInviteCode(undefined);
|
|
}
|
|
}, [isModalOpen]);
|
|
|
|
return (
|
|
<Dialog open={isModalOpen} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Invite your friends</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<Label>Server invite link</Label>
|
|
<div className="flex items-center gap-x-2">
|
|
<Input value={inviteLink} readOnly />
|
|
<Button variant="ghost" size="icon" onClick={onCopy}>
|
|
{isCopied ? (
|
|
<Check className="size-4" />
|
|
) : (
|
|
<Copy className="size-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="link"
|
|
size="none"
|
|
className="h-9 py-2"
|
|
onClick={regenerateInviteCode}
|
|
>
|
|
Generate a new invite
|
|
<RefreshCw />
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|