Hey everyone ! I’m running into an issue:
I’ve a next.js application deployed on vercel, suppose I’m on this page:
https://link-on.vercel.app/pages/Events/editEvent/94
and I reload this page, then it start giving:
500
Internal Server Error.
"use client";
import { use } from "react";
import { toast } from "react-toastify";
import createAPI from "@/app/lib/axios";
import { useState, useEffect } from "react";
import { useRouter, useParams } from "next/navigation";
import Rightnav from "@/app/assets/components/rightnav/page";
export default function EditEvent({params}) {
const api = createAPI();
const router = useRouter();
const { editEvent } = use(params);
const [eventName, setEventName] = useState("");
const [eventLocation, setEventLocation] = useState("");
const [description, setDescription] = useState("");
const [startDate, setStartDate] = useState("");
const [startTime, setStartTime] = useState("");
const [endDate, setEndDate] = useState("");
const [endTime, setEndTime] = useState("");
const [coverImage, setCoverImage] = useState(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const [errors, setErrors] = useState({});
const handleFileChange = (e) => {
const file = e.target.files[0];
if (file) setCoverImage(file);
};
const fetchSpecificEvent = () => {
if (!editEvent) return
api.post("/api/event-details", { event_id: editEvent })
.then((res) => {
if (res.data.code === "200") {
const data = res.data.data.event;
setEventName(data.name);
setEventLocation(data.location);
setDescription(data.description);
setStartDate(data.start_date);
setStartTime(data.start_time);
setEndDate(data.end_date);
setEndTime(data.end_time);
} else {
toast.error("Error fetching event details");
}
})
.catch(() => toast.error("Error fetching event details"));
};
useEffect(() => {
fetchSpecificEvent();
}, [editEvent]);
const validateForm = () => {
const newErrors = {};
if (!eventName.trim()) newErrors.eventName = "Event name is required.";
if (!eventLocation.trim()) newErrors.eventLocation = "Location is required.";
if (!description.trim()) newErrors.description = "Description is required.";
if (!startDate) newErrors.startDate = "Start date is required.";
if (!startTime) newErrors.startTime = "Start time is required.";
if (!endDate) newErrors.endDate = "End date is required.";
if (!endTime) newErrors.endTime = "End time is required.";
const startDateTime = new Date(`${startDate}T${startTime}`);
const endDateTime = new Date(`${endDate}T${endTime}`);
const currentDateTime = new Date();
if (startDateTime >= endDateTime) {
newErrors.endDate = "End date/time must be after start date/time.";
newErrors.endTime = "End date/time must be after start date/time.";
}
if (startDateTime < currentDateTime) {
newErrors.startDate = "Event start date/time cannot be in the past.";
newErrors.startTime = "Event start date/time cannot be in the past.";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const updateEvent = () => {
if (!validateForm()) {
return;
}
setIsSubmitting(true);
const formData = new FormData();
formData.append("event_id", editEvent);
formData.append("name", eventName);
formData.append("location", eventLocation);
formData.append("description", description);
formData.append("start_date", startDate);
formData.append("start_time", startTime);
formData.append("end_date", endDate);
formData.append("end_time", endTime);
if (coverImage) formData.append("cover", coverImage);
api
.post("/api/update-event", formData, {
headers: { "Content-Type": "multipart/form-data" },
})
.then((res) => {
if (res.data.code === "200") {
toast.success(res.data.message);
router.push('/pages/Events');
} else {
toast.error("Error: " + res.data.message);
}
})
.catch(() => {
toast.error("An unexpected error occurred");
})
.finally(() => {
setIsSubmitting(false);
});
};
return (
<div className="container-fluid mt-2 pt-5">
<div className="container ">
<div className="row">
<div className="col-md-2 rounded">
<Rightnav />
</div>
<div className="col-md-9 ps-4" style={{marginTop:"1.5em"}}>
<div className="card shadow-lg border-0 p-3">
<div className="card-body">
<h5 className="fw-bold fs-4">Update Event</h5>
<div className="mt-4">
<label className="form-label text-muted">Event Name</label>
<input
className={`form-control ${errors.eventName ? "is-invalid" : ""}`}
value={eventName}
onChange={(e) => setEventName(e.target.value)}
/>
{errors.eventName && (
<div className="invalid-feedback">{errors.eventName}</div>
)}
</div>
<div className="mt-4">
<label className="form-label text-muted">Location</label>
<input
className={`form-control ${errors.eventLocation ? "is-invalid" : ""}`}
value={eventLocation}
onChange={(e) => setEventLocation(e.target.value)}
/>
{errors.eventLocation && (
<div className="invalid-feedback">{errors.eventLocation}</div>
)}
</div>
<div className="mt-4">
<label className="form-label text-muted">Description</label>
<textarea
className={`form-control ${errors.description ? "is-invalid" : ""}`}
rows="3"
value={description}
onChange={(e) => setDescription(e.target.value)}
></textarea>
{errors.description && (
<div className="invalid-feedback">{errors.description}</div>
)}
</div>
<div className="mt-4 d-flex gap-3">
<div className="w-50">
<label className="form-label text-muted">Start Date</label>
<input
type="date"
className={`form-control ${errors.startDate ? "is-invalid" : ""}`}
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
/>
{errors.startDate && (
<div className="invalid-feedback">{errors.startDate}</div>
)}
</div>
<div className="w-50">
<label className="form-label text-muted">Start Time</label>
<input
type="time"
className={`form-control ${errors.startTime ? "is-invalid" : ""}`}
value={startTime}
onChange={(e) => setStartTime(e.target.value)}
/>
{errors.startTime && (
<div className="invalid-feedback">{errors.startTime}</div>
)}
</div>
</div>
<div className="mt-4 d-flex gap-3">
<div className="w-50">
<label className="form-label text-muted">End Date</label>
<input
type="date"
className={`form-control ${errors.endDate ? "is-invalid" : ""}`}
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
/>
{errors.endDate && (
<div className="invalid-feedback">{errors.endDate}</div>
)}
</div>
<div className="w-50">
<label className="form-label text-muted">End Time</label>
<input
type="time"
className={`form-control ${errors.endTime ? "is-invalid" : ""}`}
value={endTime}
onChange={(e) => setEndTime(e.target.value)}
/>
{errors.endTime && (
<div className="invalid-feedback">{errors.endTime}</div>
)}
</div>
</div>
<div className="mt-4">
<label className="form-label text-muted">Cover Image</label>
<input
type="file"
className="form-control"
accept="image/*"
onChange={handleFileChange}
/>
</div>
<div className="mt-4 d-flex justify-content-end">
<button className="btn btn-primary" onClick={updateEvent} disabled={isSubmitting}
>
{isSubmitting ? 'Updating...' : 'Update Event'}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
Need suggestions on this !
