feat: add join workshop with access code

Author: Raphico

README.md

@@ -1,4 +1,4 @@
-# [Byte](https://byte-liart.vercel.app)
+# [Byte](https://byte.raphico.tech)
 
 A platform for developers to plan and manage virtual workshops
 
@@ -32,12 +32,11 @@ The architecture of this project revolves around a streamlined development and d
 - [x] Add auth with lucia
 - [x] Workshop creation
 - [x] Edit workshop
-- [x] Complete workshop page
 - [ ] Interactive workshop session(e.g video conferencing, live chat code editor)
 - [x] Delete workshop
 - [x] Participant registration
-- [ ] Join workshops with workshop code
-- [ ] Complete workshop & dashboard page
+- [x] Join workshops with workshop code
+- [x] Complete workshop & dashboard page
 
 ## Running locally
 

src/app/(app)/dashboard/page.tsx

@@ -34,7 +34,7 @@ export default async function DashboardPage() {
           <PageHeaderHeading>Upcoming</PageHeaderHeading>
         </PageHeader>
 
-        <CreateJoinWorkshopDropdown />
+        <CreateJoinWorkshopDropdown userId={user.id} />
       </div>
 
       {workshops.length ? (

src/app/(app)/explore/page.tsx

@@ -1,6 +1,9 @@
 import { type Metadata } from "next"
+import { redirect } from "next/navigation"
 import { env } from "@/env"
 
+import { redirects } from "@/config/constants"
+import { getUserSession } from "@/server/data/user"
 import { getWorkshops } from "@/server/data/workshop"
 import { EmptyShell } from "@/components/empty-shell"
 import { PageHeader, PageHeaderHeading } from "@/components/page-header"
@@ -16,6 +19,12 @@ export const metadata: Metadata = {
 }
 
 export default async function DashboardPage() {
+  const { user } = await getUserSession()
+
+  if (!user) {
+    redirect(redirects.toLogin)
+  }
+
   const workshops = await getWorkshops()
 
   return (
@@ -25,7 +34,7 @@ export default async function DashboardPage() {
           <PageHeaderHeading>Explore</PageHeaderHeading>
         </PageHeader>
 
-        <CreateJoinWorkshopDropdown />
+        <CreateJoinWorkshopDropdown userId={user.id} />
       </div>
       {workshops.length ? (
         <section className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">

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

@@ -16,7 +16,7 @@ export function WorkshopRegistrants({ registrants }: WorkshopRegistrantsProps) {
   return (
     <div className="flex -space-x-4 rtl:space-x-reverse">
       {displayedRegistrants.map((registrant) => (
-        <Avatar key={registrant.id}>
+        <Avatar className="size-8" key={registrant.id}>
           <AvatarImage
             src={registrant.image ?? ""}
             alt={`@${registrant.username}`}
@@ -27,7 +27,7 @@ export function WorkshopRegistrants({ registrants }: WorkshopRegistrantsProps) {
         </Avatar>
       ))}
 
-      {extraRegistrantsCount && (
+      {extraRegistrantsCount !== 0 && (
         <div className="z-50 flex size-10 items-center justify-center rounded-full bg-muted text-xs font-medium text-white">
           +{extraRegistrantsCount}
         </div>

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

@@ -34,7 +34,7 @@ export default function WorkshopLoading() {
         </div>
         <div className="flex -space-x-4 rtl:space-x-reverse">
           {Array.from({ length: 4 }).map((_, i) => (
-            <Skeleton key={i} className="size-10 rounded-full" />
+            <Skeleton key={i} className="size-6 rounded-full" />
           ))}
         </div>
       </div>

src/components/workshops/create-join-workshop-dropdown.tsx

@@ -13,17 +13,30 @@ import {
 import { Icons } from "@/components/icons"
 
 import { useCreateEditWorkshopModal } from "./create-edit-workshop-modal"
+import { useJoinWorkshopWithCodeModal } from "./join-workshop-with-code-modal"
 
-export function CreateJoinWorkshopDropdown() {
+interface CreateJoinWorkshopDropdownProps {
+  userId: string
+}
+
+export function CreateJoinWorkshopDropdown({
+  userId,
+}: CreateJoinWorkshopDropdownProps) {
   const [open, setOpen] = React.useState(false)
   const { setShowCreateEditWorkshopModal, CreateEditWorkshopModal } =
     useCreateEditWorkshopModal({
       text: "Create",
     })
 
+  const { JoinWorkshopWithCodeModal, setShowJoinWorkshopWithCodeModal } =
+    useJoinWorkshopWithCodeModal({
+      userId,
+    })
+
   return (
     <>
       <CreateEditWorkshopModal />
+      <JoinWorkshopWithCodeModal />
       <DropdownMenu open={open} onOpenChange={setOpen}>
         <DropdownMenuTrigger asChild>
           <Button
@@ -47,7 +60,12 @@ export function CreateJoinWorkshopDropdown() {
             Create Workshop
           </DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => {
+              setOpen(false)
+              setShowJoinWorkshopWithCodeModal(true)
+            }}
+          >
             <Icons.video className="mr-2 size-4" aria-hidden="true" />
             Join Workshop
           </DropdownMenuItem>

src/components/workshops/join-workshop-with-code-form.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { type UseFormReturn } from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { type JoinWorkshopWithCodeSchema } from "@/lib/zod/schemas/workshops"
+
+import { Form, FormControl, FormField, FormItem, FormMessage } from "../ui/form"
+import { Input } from "../ui/input"
+
+interface JoinWorkshopWithCodeFormProps
+  extends Omit<React.ComponentPropsWithoutRef<"form">, "onSubmit"> {
+  form: UseFormReturn<JoinWorkshopWithCodeSchema>
+  onSubmit: (values: JoinWorkshopWithCodeSchema) => void
+}
+
+export function JoinWorkshopWithCodeForm({
+  form,
+  onSubmit,
+  children,
+  className,
+  ...props
+}: JoinWorkshopWithCodeFormProps) {
+  return (
+    <Form {...form}>
+      <form
+        className={cn("grid gap-4", className)}
+        onSubmit={form.handleSubmit(onSubmit)}
+        {...props}
+      >
+        <FormField
+          control={form.control}
+          name="accessCode"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Input placeholder="Workshop access code" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {children}
+      </form>
+    </Form>
+  )
+}

src/components/workshops/join-workshop-with-code-modal.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+
+import { registerUserWithAccessCode } from "@/server/actions/registration"
+import {
+  joinWorkshopWithCodeSchema,
+  type JoinWorkshopWithCodeSchema,
+} from "@/lib/zod/schemas/workshops"
+import { showErrorToast } from "@/utils/handle-error"
+
+import { Icons } from "../icons"
+import { Button } from "../ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { JoinWorkshopWithCodeForm } from "./join-workshop-with-code-form"
+
+interface JoinWorkshopWithCodeModalProps {
+  userId: string
+}
+
+export function JoinWorkshopWithCodeModal({
+  showJoinWorkshopWithCodeModal,
+  setShowJoinWorkshopWithCodeModal,
+  props,
+}: {
+  showJoinWorkshopWithCodeModal: boolean
+  setShowJoinWorkshopWithCodeModal: React.Dispatch<
+    React.SetStateAction<boolean>
+  >
+  props: JoinWorkshopWithCodeModalProps
+}) {
+  const [isPending, startTransition] = React.useTransition()
+
+  const form = useForm<JoinWorkshopWithCodeSchema>({
+    resolver: zodResolver(joinWorkshopWithCodeSchema),
+    defaultValues: {
+      accessCode: "",
+    },
+  })
+
+  const onSubmit = (values: JoinWorkshopWithCodeSchema) => {
+    startTransition(async () => {
+      const { error } = await registerUserWithAccessCode({
+        userId: props.userId,
+        accessCode: values.accessCode,
+      })
+
+      if (error) {
+        showErrorToast(error)
+      }
+
+      setShowJoinWorkshopWithCodeModal(false)
+      toast.success("Registration Successful")
+      form.reset()
+    })
+  }
+
+  return (
+    <Dialog
+      open={showJoinWorkshopWithCodeModal}
+      onOpenChange={setShowJoinWorkshopWithCodeModal}
+    >
+      <DialogContent className="max-w-sm">
+        <DialogHeader className="items-center">
+          <DialogTitle className="text-base">Join Workshop</DialogTitle>
+        </DialogHeader>
+        <JoinWorkshopWithCodeForm onSubmit={onSubmit} form={form}>
+          <Button disabled={isPending}>
+            {isPending && (
+              <Icons.spinner
+                className="mr-2 size-4 animate-spin"
+                aria-hidden="true"
+              />
+            )}
+            Join
+          </Button>
+        </JoinWorkshopWithCodeForm>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function useJoinWorkshopWithCodeModal(
+  props: JoinWorkshopWithCodeModalProps
+) {
+  const [showJoinWorkshopWithCodeModal, setShowJoinWorkshopWithCodeModal] =
+    React.useState(false)
+
+  const JoinWorkshopWithCodeModalCallback = React.useCallback(
+    () => (
+      <JoinWorkshopWithCodeModal
+        showJoinWorkshopWithCodeModal={showJoinWorkshopWithCodeModal}
+        setShowJoinWorkshopWithCodeModal={setShowJoinWorkshopWithCodeModal}
+        props={props}
+      />
+    ),
+    [showJoinWorkshopWithCodeModal, props]
+  )
+
+  return React.useMemo(
+    () => ({
+      showJoinWorkshopWithCodeModal,
+      setShowJoinWorkshopWithCodeModal,
+      JoinWorkshopWithCodeModal: JoinWorkshopWithCodeModalCallback,
+    }),
+    [JoinWorkshopWithCodeModalCallback, showJoinWorkshopWithCodeModal]
+  )
+}

src/lib/zod/schemas/registration.ts

@@ -0,0 +1,20 @@
+import { z } from "zod"
+
+export const registrationSchema = z.object({
+  userId: z.string(),
+  workshopId: z.string(),
+})
+
+export const registerUserWithAccessCode = z.object({
+  userId: registrationSchema.shape.userId,
+  accessCode: z
+    .string()
+    .min(8)
+    .max(8)
+    .describe("The access code to the workshop"),
+})
+
+export type RegisterUserWithAccessCode = z.infer<
+  typeof registerUserWithAccessCode
+>
+export type RegistrationSchema = z.infer<typeof registrationSchema>

src/lib/zod/schemas/workshops.ts

@@ -41,4 +41,11 @@ export const createEditWorkshopSchema = z.object({
     .describe("The workshop scheduled date"),
 })
 
+export const joinWorkshopWithCodeSchema = z.object({
+  accessCode: createEditWorkshopSchema.shape.accessCode,
+})
+
+export type JoinWorkshopWithCodeSchema = z.infer<
+  typeof joinWorkshopWithCodeSchema
+>
 export type CreateEditWorkshopSchema = z.infer<typeof createEditWorkshopSchema>

src/server/actions/registration.ts

@@ -3,17 +3,55 @@
 import { revalidateTag } from "next/cache"
 import { eq } from "drizzle-orm"
 
+import {
+  type RegisterUserWithAccessCode,
+  type RegistrationSchema,
+} from "@/lib/zod/schemas/registration"
 import { getErrorMessage } from "@/utils/handle-error"
 
 import { db } from "../db"
-import { registrations } from "../db/schema"
+import { registrations, workshops } from "../db/schema"
 
-interface RegistrationProps {
-  workshopId: string
-  userId: string
+export async function registerUserWithAccessCode(
+  input: RegisterUserWithAccessCode
+) {
+  try {
+    const workshop = await db.query.workshops.findFirst({
+      columns: {
+        id: true,
+        organizerId: true,
+      },
+      where: eq(workshops.accessCode, input.accessCode),
+    })
+
+    if (!workshop) {
+      throw new Error("Workshop not found")
+    }
+
+    if ((workshop.organizerId = input.userId)) {
+      throw new Error("You cannot register for your own workshop")
+    }
+
+    const { error } = await registerUserAction({
+      userId: input.userId,
+      workshopId: workshop.id,
+    })
+
+    if (error) {
+      throw new Error(error)
+    }
+
+    return {
+      error: null,
+    }
+  } catch (err) {
+    return {
+      error: getErrorMessage(err),
+    }
+  }
 }
 
-export async function registerUserAction(input: RegistrationProps) {
+export async function registerUserAction(input: RegistrationSchema) {
   try {
     await db.insert(registrations).values({
       registrantId: input.userId,
@@ -32,7 +70,7 @@ export async function registerUserAction(input: RegistrationProps) {
   }
 }
 
-export async function cancelRegistrationAction(input: RegistrationProps) {
+export async function cancelRegistrationAction(input: RegistrationSchema) {
   try {
     await db
       .delete(registrations)