button toggle works great

Author: ski043

Diff for: app/(bookingPage)/[username]/[eventName]/page.tsx

@@ -27,6 +27,7 @@ async function getData(username: string, eventName: string) {
       description: true,
       title: true,
       duration: true,
+      videoCallSoftware: true,
 
       user: {
         select: {
@@ -103,7 +104,7 @@ const BookingPage = async ({
                 <p className="flex items-center">
                   <BookMarked className="size-4 mr-2 text-primary" />
                   <span className="text-sm font-medium text-muted-foreground">
-                    Google Meet
+                    {eventType.videoCallSoftware}
                   </span>
                 </p>
               </div>

Diff for: app/actions.ts

@@ -134,6 +134,7 @@ export async function CreateEventTypeAction(
       url: submission.value.url,
       description: submission.value.description,
       userId: session.user?.id as string,
+      videoCallSoftware: submission.value.videoCallSoftware,
     },
   });
 

Diff for: app/dashboard/new/page.tsx

@@ -22,7 +22,7 @@ import Link from "next/link";
 import React, { useState } from "react";
 import { useFormState } from "react-dom";
 
-type Platform = "Zoom Meeting" | "Google Meet" | "Microsoft Teams" | null;
+type Platform = "Zoom Meeting" | "Google Meet" | "Microsoft Teams";
 
 const CreateNewEvent = () => {
   const [lastResult, action] = useFormState(CreateEventTypeAction, undefined);
@@ -39,10 +39,10 @@ const CreateNewEvent = () => {
     shouldValidate: "onBlur",
     shouldRevalidate: "onInput",
   });
-  const [activePlatform, setActivePlatform] = useState<Platform>(null);
+  const [activePlatform, setActivePlatform] = useState<Platform>("Google Meet");
 
   const togglePlatform = (platform: Platform) => {
-    setActivePlatform((prev) => (prev === platform ? null : platform));
+    setActivePlatform(platform);
   };
   return (
     <div className="h-full w-full flex-1 flex flex-col items-center justify-center">
@@ -111,6 +111,11 @@ const CreateNewEvent = () => {
             </div>
 
             <div className="grid gap-y-2">
+              <input
+                type="hidden"
+                name={fields.videoCallSoftware.name}
+                value={activePlatform}
+              />
               <Label>Video Call Provider</Label>
               <ButtonGroup className="w-full">
                 <Button

Diff for: app/lib/zodSchemas.ts

@@ -57,4 +57,5 @@ export const eventTypeSchema = z.object({
   duration: z.number().min(1).max(100),
   url: z.string().min(3).max(150),
   description: z.string().min(3).max(300),
+  videoCallSoftware: z.string(),
 });

Diff for: prisma/schema.prisma

@@ -96,12 +96,13 @@ enum Day {
 }
 
 model EventType {
-  id          String  @id @default(uuid())
-  title       String
-  duration    Int
-  url         String
-  description String
-  active      Boolean @default(true)
+  id                String  @id @default(uuid())
+  title             String
+  duration          Int
+  url               String
+  description       String
+  active            Boolean @default(true)
+  videoCallSoftware String  @default("Google Meet")
 
   user   User   @relation(fields: [userId], references: [id], onDelete: Cascade)
   userId String