feat: add workshop registration

Author: Raphico

src/app/(app)/workshop/[workshopId]/_components/register-button.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { useFormStatus } from "react-dom"
+
+import { Button } from "@/components/ui/button"
+import { Icons } from "@/components/icons"
+
+export function RegisterButton() {
+  const { pending } = useFormStatus()
+  return (
+    <Button type="submit" size="sm">
+      {pending && (
+        <Icons.spinner
+          className="mr-2 size-4 animate-spin"
+          aria-hidden="true"
+        />
+      )}
+      Register
+    </Button>
+  )
+}

src/app/(app)/workshop/[workshopId]/page.tsx

@@ -5,6 +5,7 @@ import { env } from "@/env"
 import { eq } from "drizzle-orm"
 
 import { redirects } from "@/config/constants"
+import { registerUserAndNotifyAction } from "@/server/actions/registration"
 import { getUserSession } from "@/server/data/user"
 import { getWorkshop } from "@/server/data/workshop"
 import { db } from "@/server/db"
@@ -19,6 +20,7 @@ import { Shell } from "@/components/shell"
 
 import { OrganizerSection } from "./_components/organizer-section"
 import { OrganizerSectionSkeleton } from "./_components/organizer-section-skeleton"
+import { RegisterButton } from "./_components/register-button"
 import { WorkshopSettings } from "./_components/workshop-settings"
 
 interface WorkshopPageProps {
@@ -68,6 +70,12 @@ export default async function WorkshopPage({ params }: WorkshopPageProps) {
 
   const isCurrentUserWorkshop = workshop.organizerId === user.id
 
+  const registerUserAndNotify = registerUserAndNotifyAction.bind(null, {
+    workshopId: workshop.id,
+    workshopTitle: workshop.title,
+    participantId: user.id,
+  })
+
   return (
     <Shell className="max-w-xl gap-4">
       <div className="flex w-full flex-col items-start space-y-1">
@@ -122,16 +130,10 @@ export default async function WorkshopPage({ params }: WorkshopPageProps) {
         </React.Suspense>
 
         <div className="flex w-full justify-end">
-          {!isCurrentUserWorkshop ? (
-            <Button size="sm">
-              {/* {isPending && (
-                <Icons.spinner
-                  className="mr-2 size-4 animate-spin"
-                  aria-hidden="true"
-                />
-              )} */}
-              Register
-            </Button>
+          {isCurrentUserWorkshop ? (
+            <form action={registerUserAndNotify}>
+              <RegisterButton />
+            </form>
           ) : (
             <Button size="sm">Start</Button>
           )}

src/app/api/email/new-participant/route.ts

@@ -1,17 +1,62 @@
 "use server"
 
 import { revalidateTag } from "next/cache"
+import { env } from "@/env"
 import { and, eq } from "drizzle-orm"
 
-import { getErrorMessage } from "@/utils/handle-error"
+import { resend } from "@/lib/resend"
+import { getErrorMessage, showErrorToast } from "@/utils/handle-error"
+import NewParticipantEmail from "@/components/emails/new-participant-email"
 
+import { getWorkshopOrganizer } from "../data/workshop"
 import { db } from "../db"
 import { registrations } from "../db/schema"
 
-export async function addParticipantAction(input: {
+interface RegisterUserProps {
   workshopId: string
   participantId: string
-}) {
+}
+
+export async function registerUserAndNotifyAction(
+  input: RegisterUserProps & {
+    workshopTitle: string
+  }
+) {
+  const { error } = await registerUserAction({
+    workshopId: input.workshopId,
+    participantId: input.participantId,
+  })
+
+  if (!error) {
+    showErrorToast(error)
+  }
+
+  try {
+    const organizer = await getWorkshopOrganizer(input.workshopId)
+
+    if (!organizer) {
+      throw new Error("Workshop must have an organizer")
+    }
+
+    const { error } = await resend.emails.send({
+      from: env.EMAIL_FROM_ADDRESS,
+      to: ["raphicogit@gmail.com"],
+      subject: "New Registration for your workshop",
+      react: NewParticipantEmail({
+        WorkshopTitle: input.workshopTitle,
+        organizerUsername: organizer.username,
+      }),
+    })
+
+    if (error) {
+      console.error(getErrorMessage(error))
+    }
+  } catch (err) {
+    console.error(getErrorMessage(err))
+  }
+}
+
+export async function registerUserAction(input: RegisterUserProps) {
   try {
     const checkUserRegistered = await db.query.registrations.findFirst({
       where: and(

src/server/actions/registration.ts

@@ -72,7 +72,7 @@ export async function updateWorkshopAction(
   }
 }
 
-export async function deleteWorkshopAction(id: string) {
+export async function deleteWorkshopAction(workshopId: string) {
   try {
     const { user } = await getUserSession()
 
@@ -82,7 +82,7 @@ export async function deleteWorkshopAction(id: string) {
 
     await db
       .delete(workshops)
-      .where(and(eq(workshops.organizerId, user.id), eq(workshops.id, id)))
+      .where(and(eq(workshops.organizerId, user.id), eq(workshops.id, workshopId)))
 
     revalidateTag(`workshops-${user.id}`)
 

src/server/actions/workshop.ts

@@ -91,6 +91,7 @@ export async function getWorkshopOrganizer(organizerId: string) {
     return await db.query.users.findFirst({
       columns: {
         id: true,
+        email: true,
         username: true,
         image: true,
       },