From 193e9fa4d2a6f3ab558b94f294ae5fb55e2499b0 Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@hotmail.it>
Date: Wed, 12 Mar 2025 09:48:50 +0100
Subject: [PATCH] Refactor event creation form with improved UI and validation

Replaced basic HTML form with styled components for better UI consistency. Added fields for start/end time and location URL, along with live slug validation to prevent reserved slugs. Enhanced layout and structure for improved usability and responsiveness.
---
 .../app/(main)/dashboard/events/new/page.tsx  | 267 +++++++++++-------
 1 file changed, 167 insertions(+), 100 deletions(-)

diff --git a/frontend/src/app/(main)/dashboard/events/new/page.tsx b/frontend/src/app/(main)/dashboard/events/new/page.tsx
index a96f3ff..aba17f1 100644
--- a/frontend/src/app/(main)/dashboard/events/new/page.tsx
+++ b/frontend/src/app/(main)/dashboard/events/new/page.tsx
@@ -3,41 +3,73 @@
 import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useEvents } from "@/context/event-context";
-import { EventCreate } from "@/client/types.gen";
+import { EventCreate } from "@/client";
 import Navbar from "@/components/layout/navbar";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { RESERVED_SLUGS } from "@/constants";
 
-const CreateEventPage: React.FC = () => {
+export default function CreateEventPage() {
   const router = useRouter();
   const { createEvent, isCreating } = useEvents();
+  const [slugError, setSlugError] = useState<string | null>(null);
 
   const [formData, setFormData] = useState<EventCreate>({
     title: "",
     description: "",
     location_name: "",
     location_address: "",
+    location_url: "",
     event_date: "",
+    event_start_time: "",
+    event_end_time: "",
     timezone: "UTC",
     slug: "",
     is_public: false,
+    rsvp_enabled: true,
   });
 
   const onChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const { name, value, type } = e.target;
+
     const checked =
       type === "checkbox" ? (e.target as HTMLInputElement).checked : undefined;
-    setFormData({
-      ...formData,
+
+    setFormData((prev) => ({
+      ...prev,
       [name]: type === "checkbox" ? checked : value,
-    });
+    }));
+
+    // live validation for slug
+    if (name === "slug") {
+      if (RESERVED_SLUGS.includes(value)) {
+        setSlugError(`The slug "${value}" is reserved.`);
+      } else {
+        setSlugError(null);
+      }
+    }
+  };
+
+  const onTogglePublic = (checked: boolean) => {
+    setFormData((prev) => ({ ...prev, is_public: checked }));
   };
 
   const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    if (RESERVED_SLUGS.includes(formData.slug)) {
+      alert(
+        `The slug "${formData.slug}" is reserved and cannot be used. Please choose another slug.`,
+      );
+      return;
+    }
+
     try {
       const event = await createEvent(formData);
       router.push(`/dashboard/events/${event.slug}`);
@@ -50,105 +82,140 @@ const CreateEventPage: React.FC = () => {
   return (
     <>
       <Navbar />
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
-        <h1 className="text-3xl font-bold mb-8">Create New Event</h1>
+      <div className="container mx-auto px-4 py-12 max-w-4xl">
+        <Card className="shadow-lg">
+          <CardHeader>
+            <CardTitle className="text-2xl">Create New Event</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={onSubmit} className="grid grid-cols-1 gap-6">
+              <div>
+                <Label className={"mb-2"}>Event Title *</Label>
+                <Input
+                  required
+                  name="title"
+                  placeholder="My Awesome Event"
+                  value={formData.title}
+                  onChange={onChange}
+                />
+              </div>
 
-        <form
-          onSubmit={onSubmit}
-          className="bg-background shadow-lg rounded-md p-6 space-y-4"
-        >
-          <input
-            name="title"
-            value={formData.title}
-            onChange={onChange}
-            placeholder="Event Title"
-            required
-            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
-          />
+              <div>
+                <Label className={"mb-2"}>Description</Label>
+                <Textarea
+                  name="description"
+                  placeholder="Quick description of your event"
+                  value={formData.description || ""}
+                  onChange={onChange}
+                />
+              </div>
 
-          <textarea
-            name="description"
-            value={formData.description || ""}
-            onChange={onChange}
-            placeholder="Event Description"
-            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
-          />
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <Label className={"mb-2"}>Event Date *</Label>
+                  <Input
+                    type="date"
+                    required
+                    name="event_date"
+                    value={formData.event_date}
+                    onChange={onChange}
+                  />
+                </div>
+                <div>
+                  <Label className={"mb-2"}>Slug *</Label>
+                  <Input
+                    required
+                    name="slug"
+                    pattern="^[a-z0-9-]+$"
+                    placeholder="my-awesome-event"
+                    value={formData.slug}
+                    onChange={onChange}
+                    className={slugError ? "border-red-500" : ""}
+                  />
+                  {slugError && (
+                    <p className="text-sm text-red-500 mt-1">{slugError}</p>
+                  )}
+                </div>
+              </div>
 
-          <input
-            name="slug"
-            value={formData.slug}
-            onChange={onChange}
-            placeholder="Slug (event-slug)"
-            pattern="^[a-z0-9-]+$"
-            required
-            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
-          />
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <Label className={"mb-2"}>Start Time</Label>
+                  <Input
+                    type="time"
+                    name="event_start_time"
+                    value={formData.event_start_time || ""}
+                    onChange={onChange}
+                  />
+                </div>
+                <div>
+                  <Label className={"mb-2"}>End Time</Label>
+                  <Input
+                    type="time"
+                    name="event_end_time"
+                    value={formData.event_end_time || ""}
+                    onChange={onChange}
+                  />
+                </div>
+              </div>
 
-          <input
-            type="datetime-local"
-            name="event_date"
-            value={formData.event_date}
-            onChange={onChange}
-            required
-            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
-          />
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <Label className={"mb-2"}>Location Name</Label>
+                  <Input
+                    name="location_name"
+                    placeholder="Venue name"
+                    value={formData.location_name || ""}
+                    onChange={onChange}
+                  />
+                </div>
+                <div>
+                  <Label className={"mb-2"}>Location Address</Label>
+                  <Input
+                    name="location_address"
+                    placeholder="123 Main Street"
+                    value={formData.location_address || ""}
+                    onChange={onChange}
+                  />
+                </div>
+              </div>
 
-          <input
-            name="location_name"
-            value={formData.location_name || ""}
-            onChange={onChange}
-            placeholder="Location Name (e.g., Central Park)"
-            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
-          />
+              <div>
+                <Label className={"mb-2"}>Location URL</Label>
+                <Input
+                  type="url"
+                  name="location_url"
+                  placeholder="https://maps.app/location"
+                  value={formData.location_url || ""}
+                  onChange={onChange}
+                />
+              </div>
 
-          <input
-            name="location_address"
-            value={formData.location_address || ""}
-            onChange={onChange}
-            placeholder="Location Address"
-            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
-          />
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id="is_public"
+                  checked={formData.is_public}
+                  onCheckedChange={onTogglePublic}
+                />
+                <Label htmlFor="is_public">Public Event</Label>
+              </div>
 
-          <select
-            name="timezone"
-            value={formData.timezone}
-            onChange={onChange}
-            required
-            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
-          >
-            <option value="UTC">UTC</option>
-            <option value="Europe">Europe</option>
-            {/*<option value="Europe/London">Europe/London</option>*/}
-            {/* Additional timezone options */}
-          </select>
-
-          <label className="inline-flex items-center mt-2 text-foreground">
-            <input
-              type="checkbox"
-              name="is_public"
-              checked={formData.is_public}
-              onChange={onChange}
-              className="checkbox mr-2 rounded bg-background"
-            />
-            Public Event
-          </label>
-
-          <div className="flex items-center justify-end gap-4 mt-4">
-            <Button type="submit" disabled={isCreating}>
-              {isCreating ? "Creating..." : "Create Event"}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => router.back()}
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
+              <div className="flex justify-end gap-2 mt-4">
+                <Button
+                  variant="outline"
+                  type="button"
+                  onClick={() => router.back()}
+                >
+                  Cancel
+                </Button>
+                <Button disabled={isCreating} type="submit">
+                  {isCreating ? "Creating..." : "Create Event"}
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
       </div>
     </>
   );
-};
-
-export default CreateEventPage;
+}