From a387d3adb48a03032f982121f11cf0aeb53f57ef Mon Sep 17 00:00:00 2001
From: Riko Pernando <rikopernando96@gmail.com>
Date: Sat, 26 Apr 2025 18:54:37 +0700
Subject: [PATCH 1/2] feat(event): slicing modal input for registering the
 selected event

---
 apps/web/app/events/[slug]/client-page.tsx    | 36 ++++++--
 apps/web/app/events/[slug]/page.tsx           | 36 +++++---
 .../components/events/registration-modal.tsx  | 89 +++++++++++++++++++
 3 files changed, 142 insertions(+), 19 deletions(-)
 create mode 100644 apps/web/components/events/registration-modal.tsx

diff --git a/apps/web/app/events/[slug]/client-page.tsx b/apps/web/app/events/[slug]/client-page.tsx
index 95d4313..8effec2 100644
--- a/apps/web/app/events/[slug]/client-page.tsx
+++ b/apps/web/app/events/[slug]/client-page.tsx
@@ -19,6 +19,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { RegistrationModal } from '@/components/events/registration-modal';
 
 interface Event {
   title: string;
@@ -62,7 +63,6 @@ const ClientEventPage: FC<ClientEventPageProps> = ({ event }) => {
   const handleSocialShare = (platform: string) => {
     const text = encodeURIComponent(shareData.text);
     const url = encodeURIComponent(shareData.url);
-    // const title = encodeURIComponent(shareData.title);
 
     const shareUrls = {
       twitter: `https://twitter.com/intent/tweet?text=${text}&url=${url}`,
@@ -79,6 +79,14 @@ const ClientEventPage: FC<ClientEventPageProps> = ({ event }) => {
     );
   };
 
+  const handleRegistration = async (data: {
+    fullName: string;
+    email: string;
+  }) => {
+    // Here you would typically handle the registration with your backend
+    console.log('Registration submitted:', data);
+  };
+
   return (
     <div className="min-h-screen py-12">
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -160,7 +168,8 @@ const ClientEventPage: FC<ClientEventPageProps> = ({ event }) => {
               <h2 className="text-2xl font-semibold mb-4">Tentang Acara</h2>
               <div className="prose prose-neutral dark:prose-invert max-w-none">
                 <p className="text-muted-foreground">
-                  {event.description}
+                  {event.description ||
+                    `Bergabunglah dalam ${event.title} untuk meningkatkan kemampuan pengembangan software Anda. Acara ini dirancang untuk berbagi pengetahuan dan pengalaman dalam dunia teknologi.`}
                 </p>
 
                 <h3 className="text-xl font-semibold mt-6 mb-3">
@@ -169,7 +178,13 @@ const ClientEventPage: FC<ClientEventPageProps> = ({ event }) => {
                 <ul className="list-disc list-inside space-y-2 text-muted-foreground">
                   {event.learningPoints?.map((point, index) => (
                     <li key={index}>{point}</li>
-                  ))}
+                  )) ||
+                    [
+                      'Fundamental dan konsep dasar',
+                      'Best practices dan pattern',
+                      'Tips dan trik dari praktisi',
+                      'Studi kasus dan implementasi praktis',
+                    ].map((point, index) => <li key={index}>{point}</li>)}
                 </ul>
 
                 <h3 className="text-xl font-semibold mt-6 mb-3">
@@ -178,7 +193,12 @@ const ClientEventPage: FC<ClientEventPageProps> = ({ event }) => {
                 <ul className="list-disc list-inside space-y-2 text-muted-foreground">
                   {event.requirements?.map((req, index) => (
                     <li key={index}>{req}</li>
-                  ))}
+                  )) ||
+                    [
+                      'Laptop dengan spesifikasi standar',
+                      'Pengetahuan dasar pemrograman',
+                      'Semangat belajar yang tinggi',
+                    ].map((req, index) => <li key={index}>{req}</li>)}
                 </ul>
 
                 {event.coordinates && (
@@ -249,10 +269,10 @@ const ClientEventPage: FC<ClientEventPageProps> = ({ event }) => {
                 )}
 
                 {event.status === 'upcoming' ? (
-                  <Button className="w-full">
-                    Daftar Sekarang
-                    <ExternalLink className="ml-2 h-4 w-4" />
-                  </Button>
+                  <RegistrationModal
+                    eventTitle={event.title}
+                    onSubmit={handleRegistration}
+                  />
                 ) : (
                   <Button variant="outline" className="w-full">
                     Lihat Dokumentasi
diff --git a/apps/web/app/events/[slug]/page.tsx b/apps/web/app/events/[slug]/page.tsx
index a7fa046..49e0e71 100644
--- a/apps/web/app/events/[slug]/page.tsx
+++ b/apps/web/app/events/[slug]/page.tsx
@@ -3,15 +3,15 @@ import { notFound } from 'next/navigation';
 import { events } from '@/constants/events';
 
 type Props = {
-  params: { slug: string }
-}
+  params: { slug: string };
+};
 
 export async function generateMetadata(
   props: Props,
   parent: ResolvingMetadata
 ): Promise<Metadata> {
   const { params } = props;
-  const event = events.find(e => e.slug === params.slug);
+  const event = events.find((e) => e.slug === params.slug);
 
   if (!event) {
     return {
@@ -22,10 +22,14 @@ export async function generateMetadata(
 
   return {
     title: `${event.title} | LampungDevTech`,
-    description: event.description || `Bergabunglah dalam ${event.title} untuk meningkatkan kemampuan pengembangan software Anda.`,
+    description:
+      event.description ||
+      `Bergabunglah dalam ${event.title} untuk meningkatkan kemampuan pengembangan software Anda.`,
     openGraph: {
       title: event.title,
-      description: event.description || `Bergabunglah dalam ${event.title} untuk meningkatkan kemampuan pengembangan software Anda.`,
+      description:
+        event.description ||
+        `Bergabunglah dalam ${event.title} untuk meningkatkan kemampuan pengembangan software Anda.`,
       images: [
         {
           url: event.image,
@@ -40,7 +44,9 @@ export async function generateMetadata(
     twitter: {
       card: 'summary_large_image',
       title: event.title,
-      description: event.description || `Bergabunglah dalam ${event.title} untuk meningkatkan kemampuan pengembangan software Anda.`,
+      description:
+        event.description ||
+        `Bergabunglah dalam ${event.title} untuk meningkatkan kemampuan pengembangan software Anda.`,
       images: [event.image],
     },
   };
@@ -49,12 +55,20 @@ export async function generateMetadata(
 // Split into client and server components
 import ClientEventPage from './client-page';
 
-export default async function EventDetailPage({ params }: { params: { slug: string } }) {
-  const event = events.find(e => e.slug === params.slug);
-  
+export default async function EventDetailPage({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const event = events.find((e) => e.slug === params.slug);
+
   if (!event) {
     notFound();
   }
 
-  return <ClientEventPage event={{ ...event, status: event.status as 'upcoming' | 'past' }} />;
-}
\ No newline at end of file
+  return (
+    <ClientEventPage
+      event={{ ...event, status: event.status as 'upcoming' | 'past' }}
+    />
+  );
+}
diff --git a/apps/web/components/events/registration-modal.tsx b/apps/web/components/events/registration-modal.tsx
new file mode 100644
index 0000000..e03606a
--- /dev/null
+++ b/apps/web/components/events/registration-modal.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { ExternalLink } from 'lucide-react';
+
+interface RegistrationModalProps {
+  eventTitle: string;
+  onSubmit: (data: { fullName: string; email: string }) => void;
+  trigger?: React.ReactNode;
+}
+
+export function RegistrationModal({
+  eventTitle,
+  onSubmit,
+  trigger,
+}: RegistrationModalProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(formData);
+    setIsOpen(false);
+    setFormData({ fullName: '', email: '' });
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button className="w-full">
+            Daftar Sekarang
+            <ExternalLink className="ml-2 h-4 w-4" />
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Daftar Event</DialogTitle>
+          <DialogDescription>
+            Silakan isi form pendaftaran untuk mengikuti event {eventTitle}
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="fullName">Nama Lengkap</Label>
+            <Input
+              id="fullName"
+              value={formData.fullName}
+              onChange={(e) =>
+                setFormData({ ...formData, fullName: e.target.value })
+              }
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={formData.email}
+              onChange={(e) =>
+                setFormData({ ...formData, email: e.target.value })
+              }
+              required
+            />
+          </div>
+          <Button type="submit" className="w-full">
+            Kirim Pendaftaran
+          </Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

From 3ee616596d1bdde871fcef8c2f5cf9e87b553fe1 Mon Sep 17 00:00:00 2001
From: Riko Pernando <rikopernando96@gmail.com>
Date: Sat, 26 Apr 2025 19:18:40 +0700
Subject: [PATCH 2/2] feat(event): event register api and integrate it for UI

---
 apps/web/app/api/events/register/route.ts     | 67 +++++++++++++++++++
 apps/web/app/events/[slug]/client-page.tsx    | 11 +--
 .../components/events/registration-modal.tsx  | 64 +++++++++++++++---
 apps/web/components/ui/use-toast.tsx          |  7 ++
 4 files changed, 132 insertions(+), 17 deletions(-)
 create mode 100644 apps/web/app/api/events/register/route.ts
 create mode 100644 apps/web/components/ui/use-toast.tsx

diff --git a/apps/web/app/api/events/register/route.ts b/apps/web/app/api/events/register/route.ts
new file mode 100644
index 0000000..413c975
--- /dev/null
+++ b/apps/web/app/api/events/register/route.ts
@@ -0,0 +1,67 @@
+import { NextResponse } from 'next/server';
+import { supabase } from '@/lib/supabase';
+
+export async function POST(request: Request) {
+  try {
+    const { fullName, email, eventId } = await request.json();
+
+    if (!fullName || !email || !eventId) {
+      return NextResponse.json(
+        { error: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
+
+    // First, create or get the profile
+    const { data: profile, error: profileError } = await supabase
+      .from('profiles')
+      .upsert(
+        {
+          email,
+          full_name: fullName,
+        },
+        { onConflict: 'email' }
+      )
+      .select()
+      .single();
+
+    if (profileError) {
+      return NextResponse.json(
+        { error: 'Failed to create profile' },
+        { status: 500 }
+      );
+    }
+
+    // Then, register for the event
+    const { data: registration, error: registrationError } = await supabase
+      .from('events_participants')
+      .insert({
+        event_id: eventId,
+        profile_id: profile.id,
+        status: 'registered',
+      })
+      .select()
+      .single();
+
+    if (registrationError) {
+      if (registrationError.code === '23505') {
+        return NextResponse.json(
+          { error: 'Already registered for this event' },
+          { status: 409 }
+        );
+      }
+      return NextResponse.json(
+        { error: 'Failed to register for event' },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json(registration);
+  } catch (error) {
+    console.error('Registration error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/apps/web/app/events/[slug]/client-page.tsx b/apps/web/app/events/[slug]/client-page.tsx
index 8effec2..14f61b5 100644
--- a/apps/web/app/events/[slug]/client-page.tsx
+++ b/apps/web/app/events/[slug]/client-page.tsx
@@ -22,6 +22,7 @@ import {
 import { RegistrationModal } from '@/components/events/registration-modal';
 
 interface Event {
+  id: string;
   title: string;
   date: string;
   time: string;
@@ -79,14 +80,6 @@ const ClientEventPage: FC<ClientEventPageProps> = ({ event }) => {
     );
   };
 
-  const handleRegistration = async (data: {
-    fullName: string;
-    email: string;
-  }) => {
-    // Here you would typically handle the registration with your backend
-    console.log('Registration submitted:', data);
-  };
-
   return (
     <div className="min-h-screen py-12">
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -270,8 +263,8 @@ const ClientEventPage: FC<ClientEventPageProps> = ({ event }) => {
 
                 {event.status === 'upcoming' ? (
                   <RegistrationModal
+                    eventId={event.id}
                     eventTitle={event.title}
-                    onSubmit={handleRegistration}
                   />
                 ) : (
                   <Button variant="outline" className="w-full">
diff --git a/apps/web/components/events/registration-modal.tsx b/apps/web/components/events/registration-modal.tsx
index e03606a..347a54b 100644
--- a/apps/web/components/events/registration-modal.tsx
+++ b/apps/web/components/events/registration-modal.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { useToast } from '@/components/ui/use-toast';
 import {
   Dialog,
   DialogContent,
@@ -12,20 +13,22 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
-import { ExternalLink } from 'lucide-react';
+import { ExternalLink, Loader2 } from 'lucide-react';
 
 interface RegistrationModalProps {
+  eventId: string;
   eventTitle: string;
-  onSubmit: (data: { fullName: string; email: string }) => void;
   trigger?: React.ReactNode;
 }
 
 export function RegistrationModal({
+  eventId,
   eventTitle,
-  onSubmit,
   trigger,
 }: RegistrationModalProps) {
+  const { toast } = useToast();
   const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [formData, setFormData] = useState({
     fullName: '',
     email: '',
@@ -33,9 +36,45 @@ export function RegistrationModal({
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    onSubmit(formData);
-    setIsOpen(false);
-    setFormData({ fullName: '', email: '' });
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/events/register', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          ...formData,
+          eventId,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to register');
+      }
+
+      toast({
+        title: 'Registration Successful!',
+        description: 'You have successfully registered for the event.',
+      });
+
+      setIsOpen(false);
+      setFormData({ fullName: '', email: '' });
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Registration Failed',
+        description:
+          error instanceof Error
+            ? error.message
+            : 'Failed to register for the event',
+      });
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
@@ -65,6 +104,7 @@ export function RegistrationModal({
                 setFormData({ ...formData, fullName: e.target.value })
               }
               required
+              disabled={isLoading}
             />
           </div>
           <div className="space-y-2">
@@ -77,10 +117,18 @@ export function RegistrationModal({
                 setFormData({ ...formData, email: e.target.value })
               }
               required
+              disabled={isLoading}
             />
           </div>
-          <Button type="submit" className="w-full">
-            Kirim Pendaftaran
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Mendaftar...
+              </>
+            ) : (
+              'Kirim Pendaftaran'
+            )}
           </Button>
         </form>
       </DialogContent>
diff --git a/apps/web/components/ui/use-toast.tsx b/apps/web/components/ui/use-toast.tsx
new file mode 100644
index 0000000..bbabe97
--- /dev/null
+++ b/apps/web/components/ui/use-toast.tsx
@@ -0,0 +1,7 @@
+import { Toast } from '@/components/ui/toast';
+
+export function useToast() {
+  return {
+    toast: Toast,
+  };
+}