edit events page

client/src/pages/EditEventsPage.tsx

@@ -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"),
+  slotsAvailable: Yup.number()
-  imageUrl: Yup.string().url("Invalid URL format").required("Image URL is required")
+    .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}`);
+        const res = await axios.get(`${config.serverAddress}/events/${id}`);
-        // Convert the date to the correct format for the input field
+        console.log("Fetched event data:", res.data); // Log the fetched data
-        const event = response.data;
+        setEventData(res.data);
-        event.date = new Date(event.date).toISOString().split('T')[0];
+        
-        setInitialValues(event);
+        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
+              <div>
-                label="Location"
+                <label className="block text-gray-700">Location</label>
-                name="location"
+                <select
-                type="text"
+                  name="location"
-                placeholder="Enter event location"
+                  className="form-select mt-1 block w-full"
-                labelPlacement="inside"
+                  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>

client/src/pages/ManageEventsPage.tsx

@@ -24,16 +24,16 @@ const ManageEventsPage = () => {
   const [selectedEventId, setSelectedEventId] = useState<string | null>(null);
   const navigate = useNavigate();
 
-  const fetchEvents = async () => {
-    try {
-      const res = await axios.get(config.serverAddress + "/events");
-      setEvents(res.data);
-    } catch (error) {
-      console.error("Failed to fetch events:", error);
-    }
-  };
-
   useEffect(() => {
+    const fetchEvents = async () => {
+      try {
+        const res = await axios.get(config.serverAddress + "/events");
+        setEvents(res.data);
+      } catch (error) {
+        console.error("Failed to fetch events:", error);
+      }
+    };
+
     fetchEvents();
   }, []);
 
@@ -162,6 +162,7 @@ const ManageEventsPage = () => {
               <ModalFooter>
                 <Button onPress={onClose}>Cancel</Button>
                 <Button
+                  color="danger"
                   onPress={() => {
                     deleteEvent();
                     onClose();

server/routes/events.js

@@ -11,13 +11,10 @@ const upload = multer({ storage: multer.memoryStorage() });
 
 router.get("/", async (req, res) => {
   try {
-    // Extract filter criteria from query parameters
     const { category, townCouncil, time } = req.query;
 
-    // Log incoming parameters
     console.log("Filter Parameters:", { category, townCouncil, time });
 
-    // Map time to category
     const timeToCategory = (time) => {
       if (!time) return null;
       const hour = new Date(time).getHours();
@@ -26,19 +23,15 @@ router.get("/", async (req, res) => {
       return "Evening";
     };
 
-    // Convert the time query parameter to a category
     const timeCategory = timeToCategory(time);
 
-    // Construct the filter object
     let filter = {};
     if (category) filter.category = category;
     if (townCouncil) filter.townCouncil = townCouncil;
     if (timeCategory) filter.timeCategory = timeCategory;
 
-    // Log constructed filter object
     console.log("Constructed Filter Object:", filter);
 
-    // Fetch filtered events from the database
     const filteredEvents = await Events.findAll({
       attributes: { exclude: ["evtPicture"] },
       where: {
@@ -50,7 +43,6 @@ router.get("/", async (req, res) => {
       },
     });
 
-    // Respond with the filtered events
     res.json(filteredEvents);
   } catch (error) {
     console.error("Error fetching events:", error);
@@ -63,7 +55,7 @@ router.post(
   upload.fields([{ name: "evtPicture", maxCount: 1 }]),
   async (req, res) => {
     let data = req.body;
-    let files = req.files; // Log incoming data
+    let files = req.files;
 
     let validationSchema = yup.object({
       title: yup.string().trim().min(3).max(100).required(),
@@ -78,7 +70,6 @@ router.post(
     try {
       data = await validationSchema.validate(data, { abortEarly: false });
 
-      // Process valid data
       let evtPicture = files.evtPicture ? files.evtPicture[0].buffer : null;
 
       if (evtPicture) {
@@ -89,7 +80,7 @@ router.post(
 
       res.json(result);
     } catch (err) {
-      console.error("Validation error:", err); // Log the validation error
+      console.error("Validation error:", err);
       res.status(400).json({ errors: err.errors });
     }
   }
@@ -112,7 +103,7 @@ router.get("/", async (req, res) => {
 router.get("/:id", async (req, res) => {
   const id = req.params.id;
   const event = await Events.findByPk(id, {
-    attributes: { exclude: ["evtPicture"] },
+    attributes: { exclude: [] }, // Exclude evtPicture only if you don't want to include it
   });
   if (!event) {
     res.sendStatus(404);
@@ -123,24 +114,30 @@ router.get("/:id", async (req, res) => {
 
 router.get("/evtPicture/:id", async (req, res) => {
   let id = req.params.id;
-  let events = await Events.findByPk(id);
-
-  if (!events || !events.evtPicture) {
-    res.sendStatus(404);
-    return;
-  }
-
   try {
+    let events = await Events.findByPk(id);
+
+    if (!events || !events.evtPicture) {
+      res.sendStatus(404);
+      return;
+    }
+
     res.set("Content-Type", "image/jpeg");
     res.send(events.evtPicture);
   } catch (err) {
+    console.error("Error retrieving image:", err);
     res.status(500).json({ message: "Error retrieving image", error: err });
   }
 });
 
-router.put("/:id", async (req, res) => {
+router.put("/:id", upload.fields([{ name: "evtPicture", maxCount: 1 }]), async (req, res) => {
   const id = req.params.id;
   let data = req.body;
+  let files = req.files;
+
+  console.log("Received PUT request to update event with ID:", id);
+  console.log("Data received for update:", data);
+
   const validationSchema = yup.object({
     title: yup.string().trim().min(3).max(100),
     description: yup.string().trim().min(3).max(500),
@@ -153,17 +150,55 @@ router.put("/:id", async (req, res) => {
 
   try {
     data = await validationSchema.validate(data, { abortEarly: false });
+    console.log("Data after validation:", data);
+
+    const event = await Events.findByPk(id);
+    if (!event) {
+      console.log("Event not found with ID:", id);
+      return res.status(404).json({ message: "Event not found" });
+    }
+
+    let evtPicture = files.evtPicture ? files.evtPicture[0].buffer : null;
+
+    if (evtPicture) {
+      evtPicture = await sharp(evtPicture).resize(800, 600).jpeg().toBuffer();
+      data.evtPicture = evtPicture; // Add the processed image to the update data
+    }
+
+    await Events.update(data, { where: { id: id } });
+    console.log("Event updated successfully with ID:", id);
+
+    res.json({ message: "Event updated successfully" });
+  } catch (err) {
+    console.error("Error during event update:", err);
+    res.status(400).json({ errors: err.errors });
+  }
+});
+
+router.post("/register/:id", async (req, res) => {
+  const id = req.params.id;
+  let data = req.body;
+
+  // Assuming you're associating registration data with an event
+  try {
     const event = await Events.findByPk(id);
     if (!event) {
       return res.status(404).json({ message: "Event not found" });
     }
+
+    // Process registration data (e.g., save to a Registration table or similar)
+    // Here we assume that you might just be updating the event for simplicity
+    // Modify this logic as needed based on your actual requirements
     await Events.update(data, { where: { id: id } });
-    res.json({ message: "Event updated successfully" });
+
+    res.json({ message: "Registration successful" });
   } catch (err) {
+    console.error("Error during registration:", err);
     res.status(400).json({ errors: err.errors });
   }
 });
 
+
 router.delete("/:id", async (req, res) => {
   const id = req.params.id;
   const event = await Events.findByPk(id);