edit events page
This commit is contained in:
Harini312821
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@nextui-org/react";
|
||||
import { Formik, Form } from "formik";
|
||||
import * as Yup from "yup";
|
||||
@@ -7,8 +7,10 @@ import { useNavigate, useParams } from "react-router-dom";
|
||||
import NextUIFormikInput from "../components/NextUIFormikInput";
|
||||
import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
|
||||
import config from "../config";
|
||||
import InsertImage from "../components/InsertImage";
|
||||
import { ArrowUTurnLeftIcon } from "../icons";
|
||||
|
||||
// Validation schema
|
||||
const validationSchema = Yup.object({
|
||||
title: Yup.string()
|
||||
.trim()
|
||||
@@ -32,52 +34,94 @@ const validationSchema = Yup.object({
|
||||
time: Yup.string().required("Time is required"),
|
||||
location: Yup.string().required("Location is required"),
|
||||
category: Yup.string().required("Category is required"),
|
||||
slotsAvailable: Yup.number().integer().required("Slots Available is required"),
|
||||
imageUrl: Yup.string().url("Invalid URL format").required("Image URL is required")
|
||||
slotsAvailable: Yup.number()
|
||||
.integer()
|
||||
.required("Slots Available is required"),
|
||||
evtPicture: Yup.mixed(), // Make this optional if not required
|
||||
});
|
||||
|
||||
const EditEventsPage = () => {
|
||||
const [eventData, setEventData] = useState<any>(null);
|
||||
const [imageFile, setImageFile] = useState<File | null>(null); // State to handle image file
|
||||
const [townCouncils, setTownCouncils] = useState<string[]>([]);
|
||||
const { id } = useParams(); // Get event ID from URL
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [initialValues, setInitialValues] = useState({
|
||||
title: "",
|
||||
description: "",
|
||||
date: "",
|
||||
time: "",
|
||||
location: "",
|
||||
category: "",
|
||||
slotsAvailable: "",
|
||||
imageUrl: ""
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchEvent = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${config.serverAddress}/events/${id}`);
|
||||
// Convert the date to the correct format for the input field
|
||||
const event = response.data;
|
||||
event.date = new Date(event.date).toISOString().split('T')[0];
|
||||
setInitialValues(event);
|
||||
const res = await axios.get(`${config.serverAddress}/events/${id}`);
|
||||
console.log("Fetched event data:", res.data); // Log the fetched data
|
||||
setEventData(res.data);
|
||||
|
||||
if (res.data.evtPicture) {
|
||||
// Optionally handle existing image
|
||||
setImageFile(null); // You might want to set this to the existing image URL if applicable
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch event data:", error);
|
||||
console.error("Failed to fetch event:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTownCouncils = async () => {
|
||||
try {
|
||||
const res = await axios.get(`${config.serverAddress}/users/town-councils-metadata`);
|
||||
setTownCouncils(JSON.parse(res.data).townCouncils);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch town councils:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchEvent();
|
||||
fetchTownCouncils();
|
||||
}, [id]);
|
||||
|
||||
const initialValues = {
|
||||
title: eventData?.title || "",
|
||||
description: eventData?.description || "",
|
||||
date: eventData?.date ? new Date(eventData.date).toLocaleDateString('en-CA') : "", // Convert date to YYYY-MM-DD format
|
||||
time: eventData?.time || "",
|
||||
location: eventData?.location || "",
|
||||
category: eventData?.category || "",
|
||||
slotsAvailable: eventData?.slotsAvailable || "",
|
||||
evtPicture: null, // Initialize with null or handle separately
|
||||
};
|
||||
|
||||
const handleSubmit = async (
|
||||
values: any,
|
||||
{ setSubmitting, resetForm, setFieldError }: any
|
||||
) => {
|
||||
console.log("Submitting form with values:", values); // Debug log
|
||||
|
||||
console.log("From data:", values)
|
||||
const formData = new FormData();
|
||||
formData.append("title", values.title);
|
||||
formData.append("description", values.description);
|
||||
formData.append("date", values.date);
|
||||
formData.append("time", values.time);
|
||||
formData.append("location", values.location);
|
||||
formData.append("category", values.category);
|
||||
formData.append("slotsAvailable", values.slotsAvailable);
|
||||
|
||||
if (imageFile) {
|
||||
formData.append("evtPicture", imageFile); // Append image file to form data
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.put(`${config.serverAddress}/events/${id}`, values);
|
||||
const response = await axios.put(
|
||||
`${config.serverAddress}/events/${id}`,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log("Server response:", response); // Debug log
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
console.log("Event updated successfully:", response.data);
|
||||
resetForm(); // Clear form after successful submit
|
||||
navigate("/events");
|
||||
setImageFile(null); // Reset image file state
|
||||
navigate("/admin/events");
|
||||
} else {
|
||||
console.error("Error updating event:", response.statusText);
|
||||
}
|
||||
@@ -109,9 +153,9 @@ const EditEventsPage = () => {
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
enableReinitialize
|
||||
enableReinitialize={true} // Ensure form updates with new data
|
||||
>
|
||||
{({ isValid, dirty, isSubmitting }) => (
|
||||
{({ isValid, dirty, isSubmitting, setFieldValue }) => (
|
||||
<Form className="flex flex-col gap-5">
|
||||
<NextUIFormikInput
|
||||
label="Title"
|
||||
@@ -139,13 +183,22 @@ const EditEventsPage = () => {
|
||||
placeholder="Enter event time"
|
||||
labelPlacement="inside"
|
||||
/>
|
||||
<NextUIFormikInput
|
||||
label="Location"
|
||||
name="location"
|
||||
type="text"
|
||||
placeholder="Enter event location"
|
||||
labelPlacement="inside"
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-gray-700">Location</label>
|
||||
<select
|
||||
name="location"
|
||||
className="form-select mt-1 block w-full"
|
||||
onChange={(e) => setFieldValue("location", e.target.value)}
|
||||
value={eventData?.location || ""}
|
||||
>
|
||||
<option value="">Select a town council</option>
|
||||
{townCouncils.map((townCouncil, index) => (
|
||||
<option key={index} value={townCouncil}>
|
||||
{townCouncil}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<NextUIFormikInput
|
||||
label="Category"
|
||||
name="category"
|
||||
@@ -160,13 +213,22 @@ const EditEventsPage = () => {
|
||||
placeholder="Enter slots available"
|
||||
labelPlacement="inside"
|
||||
/>
|
||||
<div className="mb-4">
|
||||
<InsertImage
|
||||
onImageSelected={(file) => {
|
||||
setImageFile(file); // Set image file
|
||||
setFieldValue("evtPicture", file); // Set form field value
|
||||
}}
|
||||
// Optionally handle displaying current image
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row-reverse border">
|
||||
<Button
|
||||
type="submit"
|
||||
className="bg-red-600 text-white text-xl w-1/6"
|
||||
disabled={!isValid || !dirty || isSubmitting}
|
||||
>
|
||||
<p>Edit Events</p>
|
||||
<p>Edit Event</p>
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
Reference in New Issue
Block a user