feat: allow creating and editing vanity invites

components/cards/InviteCard.tsx

@@ -8,21 +8,31 @@ import { Button } from "../ui/button";
 import { AlertDialogFooter, AlertDialogHeader, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger } from "../ui/alert-dialog";
 import { toast } from "../ui/use-toast";
 import { Input } from "../ui/input";
-import { useState } from "react";
+import { useMemo, useState } from "react";
-import { deleteInvite, editInvite } from "@/lib/actions";
+import { deleteInvite, editInvite, editInviteChannel } from "@/lib/actions";
+import { ChannelDropdown } from "../pages/inspector/InviteList";
 
 export function InviteCard({
   invite,
-  channel,
+  channel: channelInput,
+  channelList,
   user,
 }: {
   invite: ChannelInvite;
   channel?: Channel;
+  channelList?: Channel[];
   user?: User;
 }) {
-  const [editDraft, setEditDraft] = useState("");
+  const [editDraft, setEditDraft] = useState(invite._id);
   const [deleted, setDeleted] = useState(false);
   const [code, setCode] = useState(invite._id);
+  const [channelId, setChannelId] = useState(channelInput?._id ?? "");
+  const [channelDraft, setChannelDraft] = useState(channelInput?._id ?? "");
+
+  const channel = useMemo(
+    () => channelList?.find(channel => channel._id == channelId) || channelInput,
+    [channelId, channelList, channelInput]
+);
 
   if (deleted) return <></>;
 
@@ -73,20 +83,29 @@ export function InviteCard({
                         </AlertDialogHeader>
                         <AlertDialogDescription>
                             <p className="mb-2">Invites are case sensitive.</p>
-                            <Input
+                            <div className="flex gap-2">
-                                value={editDraft}
+                                <Input
-                                onChange={(e) => setEditDraft(e.currentTarget.value)}
+                                    value={editDraft}
-                                placeholder={code}
+                                    onChange={(e) => setEditDraft(e.currentTarget.value)}
-                            />
+                                    placeholder={code}
+                                />
+                                <ChannelDropdown
+                                    channels={channelList || []}
+                                    value={channelDraft}
+                                    setValue={setChannelDraft}
+                                />
+                            </div>
                         </AlertDialogDescription>
                         <AlertDialogFooter>
                             <AlertDialogAction
                                 disabled={!editDraft}
                                 onClick={async () => {
                                     try {
-                                        await editInvite(code, editDraft);
+                                        if (code != editDraft) await editInvite(code, editDraft);
+                                        if (channel?._id != channelDraft) await editInviteChannel(editDraft, channelDraft);
                                         setCode(editDraft);
                                         setEditDraft("");
+                                        setChannelId(channelDraft);
                                         toast({ title: "Invite edited" });
                                     } catch(e) {
                                         toast({

components/pages/inspector/InviteList.tsx

@@ -7,34 +7,35 @@ import { Command, CommandItem } from "@/components/ui/command";
 import { Input } from "@/components/ui/input";
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
 import { toast } from "@/components/ui/use-toast";
-import { bulkDeleteInvites } from "@/lib/actions";
+import { bulkDeleteInvites, createInvite } from "@/lib/actions";
 import { ChannelInvite } from "@/lib/db";
 import { ChevronsUpDown } from "lucide-react";
 import { useMemo, useState } from "react";
 import { Channel, Server, User } from "revolt-api";
 
-export default function ServerInviteList({ server, invites, channels, users }: {
+export default function ServerInviteList({ server, invites: invitesInput, channels, users }: {
   server: Server,
   invites: ChannelInvite[],
   channels?: Channel[],
   users?: User[],
 }) {
+  const [invites, setInvites] = useState(invitesInput);
   const [selectVanityOnly, setSelectVanityOnly] = useState(false);
   const [selectChannel, setSelectChannel] = useState(false);
   const [selectUser, setSelectUser] = useState(false);
   const [vanityFilter, setVanityFilter] = useState<boolean | null>(null);
   const [channelFilter, setChannelFilter] = useState("");
   const [userFilter, setUserFilter] = useState("");
-  const [deletedInvites, setDeletedInvites] = useState<string[]>([]);
+  const [inviteDraft, setInviteDraft] = useState("");
+  const [inviteChannelDraft, setInviteChannelDraft] = useState("");
   
   const filteredInvites = useMemo(() => {
     return invites
-      ?.filter(invite => !deletedInvites.includes(invite._id))
       ?.filter(invite => vanityFilter === true ? invite.vanity : vanityFilter === false ? !invite.vanity : true)
       ?.filter(invite => channelFilter ? invite.channel == channelFilter : true)
       ?.filter(invite => userFilter ? invite.creator == userFilter : true)
       ?.reverse();
-  }, [vanityFilter, channelFilter, userFilter, invites, deletedInvites]);
+  }, [vanityFilter, channelFilter, userFilter, invites]);
 
   return (
     <div>
@@ -139,38 +140,97 @@ export default function ServerInviteList({ server, invites, channels, users }: {
         </Popover>
 
         <AlertDialog>
-            <AlertDialogTrigger asChild>
+          <AlertDialogTrigger asChild>
-                <Button disabled={!filteredInvites.length}>Bulk delete</Button>
+            <Button disabled={!filteredInvites.length} variant="destructive">Bulk delete</Button>
-            </AlertDialogTrigger>
+          </AlertDialogTrigger>
-            <AlertDialogContent>
+          <AlertDialogContent>
-                <AlertDialogHeader>
+            <AlertDialogHeader>
-                    <AlertDialogTitle>
+              <AlertDialogTitle>
-                        Bulk delete invites
+                Bulk delete invites
-                    </AlertDialogTitle>
+              </AlertDialogTitle>
-                </AlertDialogHeader>
+            </AlertDialogHeader>
-                <AlertDialogDescription>
+            <AlertDialogDescription>
-                    This will delete all invites that match your filter options.
+              This will delete all invites that match your filter options.
-                    <br />
+              <br />
-                    <b>{filteredInvites.length}</b> invite{filteredInvites.length == 1 ? '' : 's'} will be deleted.
+              <b>{filteredInvites.length}</b> invite{filteredInvites.length == 1 ? '' : 's'} will be deleted.
-                </AlertDialogDescription>
+            </AlertDialogDescription>
-                <AlertDialogFooter>
+            <AlertDialogFooter>
-                    <AlertDialogAction
+              <AlertDialogAction
-                        onClick={async () => {
+                onClick={async () => {
-                            try {
+                  try {
-                              await bulkDeleteInvites(filteredInvites.map(i => i._id));
+                    await bulkDeleteInvites(filteredInvites.map(i => i._id));
-                              setDeletedInvites([...deletedInvites, ...filteredInvites.map(i => i._id)]);
+                    setInvites(invites.filter(invite => !filteredInvites.find(i => i._id == invite._id)));
-                              toast({ title: "Selected invites have been deleted" });
+                    toast({ title: "Selected invites have been deleted" });
-                            } catch(e) {
+                  } catch(e) {
-                                toast({
+                    toast({
-                                    title: "Failed to delete invite",
+                      title: "Failed to delete invites",
-                                    description: String(e),
+                      description: String(e),
-                                    variant: "destructive",
+                      variant: "destructive",
-                                });
+                    });
-                            }
+                  }
-                        }}
+                }}
-                    >Bulk delete</AlertDialogAction>
+              >Bulk delete</AlertDialogAction>
-                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
-                </AlertDialogFooter>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button disabled={!filteredInvites.length}>Create vanity invite</Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                Create vanity invite
+              </AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogDescription>
+              <p className="mb-2">Invites are case sensitive.</p>
+              <div className="flex gap-2">
+                <Input
+                  value={inviteDraft}
+                  onChange={(e) => setInviteDraft(e.currentTarget.value)}
+                  placeholder="fortnite"
+                />
+                <ChannelDropdown
+                  channels={channels ?? []}
+                  value={inviteChannelDraft}
+                  setValue={setInviteChannelDraft}
+                />
+              </div>
+              </AlertDialogDescription>
+              <AlertDialogFooter>
+                <AlertDialogAction
+                  disabled={!inviteDraft || !inviteChannelDraft}
+                  onClick={async () => {
+                    try {
+                      const newInvite: ChannelInvite = {
+                        _id: inviteDraft,
+                        channel: inviteChannelDraft,
+                        creator: server.owner,
+                        server: server._id,
+                        type: "Server",
+                        vanity: true,
+                      };
+                      await createInvite(newInvite);
+                      setInvites([...invites, newInvite]);
+                      setInviteDraft("");
+                      toast({
+                        title: "Vanity invite created",
+                        description: <a href={`https://rvlt.gg/${inviteDraft}`}>rvlt.gg/{inviteDraft}</a>
+                      });
+                    } catch(e) {
+                      toast({
+                        title: "Failed to create invite",
+                        description: String(e),
+                        variant: "destructive",
+                      });
+                    }
+                  }}
+                >Create</AlertDialogAction>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+              </AlertDialogFooter>
             </AlertDialogContent>
         </AlertDialog>
       </div>
@@ -178,9 +238,49 @@ export default function ServerInviteList({ server, invites, channels, users }: {
       {filteredInvites.map(invite => (<InviteCard
         invite={invite}
         channel={channels?.find(c => c._id == invite.channel)}
+        channelList={channels}
         user={users?.find(c => c._id == invite.creator)}
         key={invite._id}
       />))}
     </div>
   )
 }
+
+export function ChannelDropdown({ channels, value, setValue }: {
+  channels: Channel[],
+  value: string,
+  setValue: (value: string) => any,
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+  <Popover open={expanded} onOpenChange={setExpanded}>
+    <PopoverTrigger asChild>
+      <Button
+        variant="outline"
+        role="combobox"
+        aria-expanded={expanded}
+        className="flex-1 justify-between"
+      >
+        {value
+          ? '#' + (channels?.find(c => c._id == value) as any)?.name
+          : "Channel"}
+        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent className="w-[200px] p-0">
+      <Command>
+        {channels?.map((channel) => (
+          <CommandItem
+            key={String(channel._id)}
+            onSelect={async () => {
+              setExpanded(false);
+              setValue(channel._id);
+            }}
+          >{'#' + (channel as any).name}</CommandItem>
+        ))}
+      </Command>
+    </PopoverContent>
+  </Popover>
+  );
+}

lib/actions.ts

@@ -618,6 +618,26 @@ export async function editInvite(invite: string, newInvite: string) {
     .insertOne({ ...value, _id: newInvite });
 }
 
+export async function editInviteChannel(invite: string, newChannel: string) {
+  await checkPermission("channels/update/invites", { invite, newChannel });
+
+  if (!invite) throw new Error("invite is empty");
+
+  await mongo()
+    .db("revolt")
+    .collection<ChannelInvite>("channel_invites")
+    .updateOne({ _id: invite }, { $set: { channel: newChannel } });
+}
+
+export async function createInvite(invite: ChannelInvite) {
+  await checkPermission("channels/update/invites", invite);
+
+  await mongo()
+    .db("revolt")
+    .collection<ChannelInvite>("channel_invites")
+    .insertOne(invite);
+}
+
 export async function bulkDeleteInvites(invites: string[]) {
   await checkPermission("channels/update/invites", invites);