diff --git a/src/app/_components/delete-lobby-dialog.tsx b/src/app/_components/delete-lobby-dialog.tsx
new file mode 100644
index 0000000..3b8fa59
--- /dev/null
+++ b/src/app/_components/delete-lobby-dialog.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { api } from "@/trpc/react";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+
+function DeleteLobbyDialog({ lobbyId }: { lobbyId: string }) {
+ const [loading, setLoading] = React.useState(false);
+ const { mutateAsync } = api.lobby.delete.useMutation();
+ const router = useRouter();
+ const handleConfirm = async () => {
+ setLoading(true);
+ const result = await mutateAsync({ lobbyId });
+ if (result) {
+ router.push("/");
+ } else toast.error("Something went wrong");
+ setLoading(false);
+ };
+
+ return (
+
+
+
+
+ Are you absolutely sure?
+
+ This action cannot be undone. You will permanently delete this
+ lobby!
+
+
+
+ Cancel
+
+ Delete Lobby
+
+
+
+
+ );
+}
+
+export default DeleteLobbyDialog;
diff --git a/src/app/_components/lobby-membership-dialog.tsx b/src/app/_components/lobby-membership-dialog.tsx
new file mode 100644
index 0000000..3c05ee6
--- /dev/null
+++ b/src/app/_components/lobby-membership-dialog.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { api } from "@/trpc/react";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+
+function LobbyMembershipDialog({
+ lobbyId,
+ join,
+}: {
+ lobbyId: string;
+ join: boolean;
+}) {
+ const [loading, setLoading] = React.useState(false);
+ const { mutateAsync } = api.lobby.membership.useMutation();
+ const router = useRouter();
+ const handleConfirm = async () => {
+ setLoading(true);
+ const result = await mutateAsync({ lobbyId, join });
+ if (result) {
+ if (!join) router.push("/");
+ else toast.success("Successfully joined the lobby.");
+ } else toast.error("Something went wrong");
+ setLoading(false);
+ };
+
+ const labelText = join ? "join" : "leave";
+
+ return (
+
+
+
+
+
+ {labelText} Lobby
+
+
+ You are about to {labelText} the lobby.
+
+
+
+ Cancel
+
+ {labelText}
+
+
+
+
+ );
+}
+
+export default LobbyMembershipDialog;
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..0863e40
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+ ...props
+}: React.ComponentProps
) {
+ return
+}
+
+function AlertDialogTrigger({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogPortal({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogOverlay({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+ )
+}
+
+function AlertDialogHeader({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDialogFooter({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogDescription({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogAction({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogCancel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export {
+ AlertDialog,
+ AlertDialogPortal,
+ AlertDialogOverlay,
+ AlertDialogTrigger,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogFooter,
+ AlertDialogTitle,
+ AlertDialogDescription,
+ AlertDialogAction,
+ AlertDialogCancel,
+}
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
new file mode 100644
index 0000000..1421354
--- /dev/null
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+ "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+ {
+ variants: {
+ variant: {
+ default: "bg-card text-card-foreground",
+ destructive:
+ "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Alert({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
+ )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/src/server/api/routers/lobby.ts b/src/server/api/routers/lobby.ts
index 0ea15bf..e77404b 100644
--- a/src/server/api/routers/lobby.ts
+++ b/src/server/api/routers/lobby.ts
@@ -1,6 +1,6 @@
import { z } from "zod";
-import { lobbies } from "@/server/db/schema";
+import { lobbies, lobbyMembers } from "@/server/db/schema";
import {
createTRPCRouter,
protectedProcedure,
@@ -11,6 +11,23 @@ import { and, eq } from "drizzle-orm";
export const lobbyRouter = createTRPCRouter({
// queries
+ getAll: protectedProcedure.query(async ({ ctx }) => {
+ const ownedLobbies = await ctx.db.query.lobbies.findMany({
+ where: eq(lobbies.createdById, ctx.session.user.id),
+ });
+ const joinedLobbies = await ctx.db.query.lobbyMembers.findMany({
+ where: eq(lobbyMembers.userId, ctx.session.user.id),
+ with: {
+ lobby: true,
+ },
+ });
+
+ return [
+ ...ownedLobbies,
+ ...(joinedLobbies?.map(({ lobby }) => lobby) ?? []),
+ ];
+ }),
+
get: publicProcedure
.input(
z.object({
@@ -26,6 +43,7 @@ export const lobbyRouter = createTRPCRouter({
columns: {
image: true,
name: true,
+ id: true,
},
},
members: {
@@ -34,6 +52,7 @@ export const lobbyRouter = createTRPCRouter({
columns: {
image: true,
name: true,
+ id: true,
},
},
},
@@ -97,4 +116,37 @@ export const lobbyRouter = createTRPCRouter({
.returning({ id: lobbies.id });
return lobby;
}),
+
+ membership: protectedProcedure
+ .input(
+ z.object({
+ lobbyId: z.string(),
+ join: z.boolean(),
+ }),
+ )
+ .mutation(async ({ ctx, input }) => {
+ if (input.join) {
+ return (
+ await ctx.db
+ .insert(lobbyMembers)
+ .values({
+ lobbyId: input.lobbyId,
+ userId: ctx.session.user.id,
+ })
+ .returning()
+ )[0];
+ } else {
+ return (
+ await ctx.db
+ .delete(lobbyMembers)
+ .where(
+ and(
+ eq(lobbyMembers.lobbyId, input.lobbyId),
+ eq(lobbyMembers.userId, ctx.session.user.id),
+ ),
+ )
+ .returning()
+ )[0];
+ }
+ }),
});
diff --git a/src/server/auth/config.ts b/src/server/auth/config.ts
index d7e4bd5..c69f9ba 100644
--- a/src/server/auth/config.ts
+++ b/src/server/auth/config.ts
@@ -30,7 +30,7 @@ declare module "next-auth" {
// // role: UserRole;
// }
}
-export type PublicUser = Pick;
+export type PublicUser = Pick;
/**
* Options for NextAuth.js used to configure adapters, providers, callbacks, etc.