refactor: update workshop page

Author: Raphico

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

@@ -25,13 +25,9 @@ export function WorkshopButton({
   userId,
   hasWorkshopCompleted,
 }: WorkshopButtonProps) {
-  if (hasWorkshopCompleted) {
-    return (
-      <Button disabled size="sm">
-        Ended
-      </Button>
-    )
-  }
+  if (hasWorkshopCompleted) return
+
+  if (!isUserRegistered && hasWorkshopStarted) return
 
   if (isUserOrganizer) {
     return (
@@ -54,20 +50,12 @@ export function WorkshopButton({
     )
   }
 
-  if (hasWorkshopStarted && isUserRegistered) {
-    return (
-      <Link
-        className={cn(buttonVariants({ size: "sm" }))}
-        href={`/session/${workshopId}`}
-      >
-        Join
-      </Link>
-    )
-  }
-
   return (
-    <Button size="sm" disabled>
-      Closed
-    </Button>
+    <Link
+      className={cn(buttonVariants({ size: "sm" }))}
+      href={`/session/${workshopId}`}
+    >
+      Join
+    </Link>
   )
 }

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

@@ -17,9 +17,13 @@ import { useDeleteWorkshopAlert } from "@/components/workshops/delete-workshop-a
 
 interface WorkshopSettingsProps {
   workshop: NonNullable<Awaited<ReturnType<typeof getWorkshop>>>
+  showEditButton: boolean
 }
 
-export function WorkshopSettings({ workshop }: WorkshopSettingsProps) {
+export function WorkshopSettings({
+  workshop,
+  showEditButton,
+}: WorkshopSettingsProps) {
   const [open, setOpen] = React.useState(false)
 
   const { setShowCreateEditWorkshopModal, CreateEditWorkshopModal } =
@@ -45,17 +49,21 @@ export function WorkshopSettings({ workshop }: WorkshopSettingsProps) {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
-          <DropdownMenuItem
-            onClick={() => {
-              setOpen(false)
-              setShowCreateEditWorkshopModal(true)
-            }}
-            aria-label="Edit Workshop"
-          >
-            <Icons.pen className="mr-2 size-4" aria-hidden="true" />
-            Edit
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
+          {showEditButton && (
+            <>
+              <DropdownMenuItem
+                onClick={() => {
+                  setOpen(false)
+                  setShowCreateEditWorkshopModal(true)
+                }}
+                aria-label="Edit Workshop"
+              >
+                <Icons.pen className="mr-2 size-4" aria-hidden="true" />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
           <DropdownMenuItem
             aria-label="Delete Workshop"
             onClick={() => {

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

@@ -84,7 +84,12 @@ export default async function WorkshopPage({ params }: WorkshopPageProps) {
             </Badge>
           </div>
 
-          {isUserOrganizer && <WorkshopSettings workshop={workshop} />}
+          {isUserOrganizer && (
+            <WorkshopSettings
+              workshop={workshop}
+              showEditButton={!workshop.hasStarted && !workshop.hasCompleted}
+            />
+          )}
         </div>
 
         <div className="flex items-center gap-2">
@@ -126,13 +131,15 @@ export default async function WorkshopPage({ params }: WorkshopPageProps) {
         </React.Suspense>
 
         <div className="flex w-full justify-end space-x-4">
-          <CopyButton
-            variant="secondary"
-            className="gap-2 text-secondary-foreground"
-            value={workshop.accessCode}
-          >
-            Copy code
-          </CopyButton>
+          {!workshop.hasStarted && !workshop.hasCompleted && (
+            <CopyButton
+              variant="secondary"
+              className="gap-2 text-secondary-foreground"
+              value={workshop.accessCode}
+            >
+              Copy code
+            </CopyButton>
+          )}
 
           <WorkshopButton
             userId={user.id}