Add event editing page with delete functionality
This commit introduces a new page for editing events at the route `dashboard/events/[slug]/edit`. It includes features for loading event details, updating event data via a form, and a confirmation dialog for deleting events. Error handling and loading states are also implemented.
This commit is contained in:
121
frontend/src/app/(main)/dashboard/events/[slug]/edit/page.tsx
Normal file
121
frontend/src/app/(main)/dashboard/events/[slug]/edit/page.tsx
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
// src/app/dashboard/events/[slug]/edit/page.tsx
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { useParams, useRouter } from "next/navigation";
|
||||||
|
import { useEvents } from "@/context/event-context";
|
||||||
|
import { EventResponse } from "@/client";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { EventForm } from "@/components/events/event-form";
|
||||||
|
import { Loader2, Trash2 } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
} from "@/components/ui/alert-dialog";
|
||||||
|
|
||||||
|
export default function EditEventPage() {
|
||||||
|
const params = useParams<{ slug: string }>();
|
||||||
|
const router = useRouter();
|
||||||
|
const { getEventBySlug, updateEvent, deleteEvent, isUpdating, isDeleting } =
|
||||||
|
useEvents();
|
||||||
|
const [event, setEvent] = useState<EventResponse | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchEvent = async () => {
|
||||||
|
try {
|
||||||
|
const eventData = await getEventBySlug(params.slug);
|
||||||
|
setEvent(eventData || null);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to fetch event:", err);
|
||||||
|
setError("Failed to load event. Please try again.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (params.slug) {
|
||||||
|
fetchEvent();
|
||||||
|
}
|
||||||
|
}, [params.slug, getEventBySlug]);
|
||||||
|
|
||||||
|
const handleDeleteEvent = async () => {
|
||||||
|
if (!event) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await deleteEvent(event.slug);
|
||||||
|
router.push("/dashboard/events");
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to delete event:", err);
|
||||||
|
alert("Failed to delete event. Please try again.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-64">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !event) {
|
||||||
|
return (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||||||
|
{error || "Event not found"}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="shadow-lg">
|
||||||
|
<CardHeader className="flex flex-row justify-between items-center">
|
||||||
|
<CardTitle className="text-2xl">Edit Event: {event.title}</CardTitle>
|
||||||
|
<AlertDialog>
|
||||||
|
<AlertDialogTrigger asChild>
|
||||||
|
<Button variant="destructive" size="sm">
|
||||||
|
<Trash2 className="h-4 w-4 mr-2" />
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</AlertDialogTrigger>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
This will permanently delete the event "{event.title}" and all
|
||||||
|
associated data. This action cannot be undone.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={handleDeleteEvent}
|
||||||
|
className="bg-red-600 hover:bg-red-700"
|
||||||
|
disabled={isDeleting}
|
||||||
|
>
|
||||||
|
{isDeleting ? "Deleting..." : "Delete Event"}
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<EventForm
|
||||||
|
event={event}
|
||||||
|
mode="edit"
|
||||||
|
onSubmit={(data) => updateEvent(event.id, data)}
|
||||||
|
isSubmitting={isUpdating}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user