edit events

client/src/components/EventsPicture.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useRef, useState } from "react";
+import config from "../config";
+import { Button, Image } from "@nextui-org/react";
+import { popErrorToast } from "../utilities";
+import instance from "../security/http";
+
+export default function EventsPicture({
+  eventId,
+  editable,
+}: {
+  eventId: string;
+  editable: boolean;
+}) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [loading, setLoading] = useState(false);
+  const [imageUrl, setImageUrl] = useState<string>(`${config.serverAddress}/events/evtPicture/${eventId}`);
+
+  const uploadProfileImage = async (eventId: string, file: File) => {
+    const formData = new FormData();
+    formData.append("image", file);
+
+    try {
+      const response = await instance.put(
+        `${config.serverAddress}/events/event-image/${eventId}`,
+        formData
+      );
+      return response.data;
+    } catch (error) {
+      popErrorToast(error);
+    }
+  };
+
+  const handleButtonClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const file = event.target.files[0];
+      uploadAndHandleSubmit(file);
+    }
+  };
+
+  const uploadAndHandleSubmit = async (file: File) => {
+    setLoading(true);
+    try {
+      await uploadProfileImage(eventId, file);
+      // Update the image URL to reflect the newly uploaded image
+      setImageUrl(`${config.serverAddress}/events/evtPicture/${eventId}?timestamp=${new Date().getTime()}`);
+    } catch (error) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    setImageUrl(`${config.serverAddress}/events/evtPicture/${eventId}`);
+  }, [eventId]);
+
+  return (
+    <div>
+      <input
+        aria-label="profile image selector"
+        ref={fileInputRef}
+        className="hidden"
+        type="file"
+        accept="image/*"
+        onChange={handleFileChange}
+      />
+      <Button
+        className="w-48 h-48 p-0"
+        onPress={editable ? handleButtonClick : () => {}}
+        isLoading={loading}
+      >
+        {loading ? (
+          <></>
+        ) : (
+          <Image
+            src={imageUrl}
+          />
+        )}
+      </Button>
+    </div>
+  );
+}

client/src/pages/CreateEventsPage.tsx

@@ -6,6 +6,7 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import NextUIFormikInput from "../components/NextUIFormikInput";
 import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
+import NextUIFormikSelect from "../components/NextUIFormikSelect";
 import config from "../config";
 import InsertImage from "../components/InsertImage";
 import { ArrowUTurnLeftIcon } from "../icons";
@@ -163,19 +164,18 @@ const CreateEventsPage = () => {
                 labelPlacement="inside"
               />
               <div>
-                <label className="block text-gray-700">Location</label>
+                {townCouncils.length > 0 && (
-                <select
+                  <NextUIFormikSelect
-                  name="location"
+                    label="Town council"
-                  className="form-select mt-1 block w-full"
+                    name="location"
-                  onChange={(e) => setFieldValue("location", e.target.value)}
+                    placeholder="Choose the town council for the event"
-                >
+                    labelPlacement="inside"
-                  <option value="">Select a town council</option>
+                    options={townCouncils.map((townCouncil) => ({
-                  {townCouncils.map((townCouncil, index) => (
+                      key: townCouncil,
-                    <option key={index} value={townCouncil}>
+                      label: townCouncil,
-                      {townCouncil}
+                    }))}
-                    </option>
+                  />
-                  ))}
+                )}
-                </select>
               </div>
               <NextUIFormikInput
                 label="Category"
@@ -193,6 +193,7 @@ const CreateEventsPage = () => {
               />
               <div className="mb-4">
                 <InsertImage
+                  label="Event image"
                   onImageSelected={(file) => {
                     setImageFile(file); // Set image file
                     setFieldValue("evtPicture", file); // Set form field value

client/src/pages/EditEventsPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Button } from "@nextui-org/react";
+import { Button, Input, Image } from "@nextui-org/react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
 import axios from "axios";
@@ -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";
+import EventsPicture from "../components/EventsPicture";
+import NextUIFormikSelect from "../components/NextUIFormikSelect";
+import instance from "../security/http"
 
 // Validation schema
 const validationSchema = Yup.object({
@@ -42,39 +44,33 @@ const validationSchema = Yup.object({
 
 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 fetchEvent = async () => {
+    try {
+      const res = await axios.get(`${config.serverAddress}/events/${id}`);
+      console.log("Fetched event data:", res.data); // Log the fetched data
+      setEventData(res.data);
+    } catch (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);
+    }
+  };
+
   useEffect(() => {
-    const fetchEvent = async () => {
-      try {
-        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:", 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 || "",
@@ -84,44 +80,22 @@ const EditEventsPage = () => {
     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("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(
+      const response = await instance.put(
         `${config.serverAddress}/events/${id}`,
-        formData,
+        values,
-        {
-          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
-        setImageFile(null); // Reset image file state
+        window.location.href = "/admin/events";
-        navigate("/admin/events");
       } else {
         console.error("Error updating event:", response.statusText);
       }
@@ -142,7 +116,7 @@ const EditEventsPage = () => {
         <Button
           variant="light"
           onPress={() => {
-            navigate(-1);
+            window.location.href = "/admin/events";
           }}
         >
           <ArrowUTurnLeftIcon />
@@ -155,7 +129,7 @@ const EditEventsPage = () => {
           onSubmit={handleSubmit}
           enableReinitialize={true} // Ensure form updates with new data
         >
-          {({ isValid, dirty, isSubmitting, setFieldValue }) => (
+          {({ isValid, dirty, isSubmitting }) => (
             <Form className="flex flex-col gap-5">
               <NextUIFormikInput
                 label="Title"
@@ -184,20 +158,18 @@ const EditEventsPage = () => {
                 labelPlacement="inside"
               />
               <div>
-                <label className="block text-gray-700">Location</label>
+                {townCouncils.length > 0 && (
-                <select
+                  <NextUIFormikSelect
-                  name="location"
+                    label="Town council"
-                  className="form-select mt-1 block w-full"
+                    name="location"
-                  onChange={(e) => setFieldValue("location", e.target.value)}
+                    placeholder="Choose the town council for the event"
-                  value={eventData?.location || ""}
+                    labelPlacement="inside"
-                >
+                    options={townCouncils.map((townCouncil) => ({
-                  <option value="">Select a town council</option>
+                      key: townCouncil,
-                  {townCouncils.map((townCouncil, index) => (
+                      label: townCouncil,
-                    <option key={index} value={townCouncil}>
+                    }))}
-                      {townCouncil}
+                  />
-                    </option>
+                )}
-                  ))}
-                </select>
               </div>
               <NextUIFormikInput
                 label="Category"
@@ -213,22 +185,16 @@ const EditEventsPage = () => {
                 placeholder="Enter slots available"
                 labelPlacement="inside"
               />
-              <div className="mb-4">
+              <div className="mb-4 flex flex-col ">
-                <InsertImage
+                <EventsPicture eventId={id as string} editable/>
-                  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"
+                  className="bg-red-600 text-white text-xl"
                   disabled={!isValid || !dirty || isSubmitting}
                 >
-                  <p>Edit Event</p>
+                  <p>Save</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();
 
-  useEffect(() => {
+  const fetchEvents = async () => {
-    const fetchEvents = async () => {
+    try {
-      try {
+      const res = await axios.get(config.serverAddress + "/events");
-        const res = await axios.get(config.serverAddress + "/events");
+      setEvents(res.data);
-        setEvents(res.data);
+    } catch (error) {
-      } catch (error) {
+      console.error("Failed to fetch events:", error);
-        console.error("Failed to fetch events:", error);
+    }
-      }
+  };
-    };
 
+  useEffect(() => {
     fetchEvents();
   }, []);
 

server/routes/events.js

@@ -6,6 +6,7 @@ const { Op } = require("sequelize");
 const path = require("path");
 const yup = require("yup");
 const sharp = require("sharp");
+const { validateToken } = require("../middlewares/auth");
 
 const upload = multer({ storage: multer.memoryStorage() });
 
@@ -130,10 +131,71 @@ router.get("/evtPicture/:id", async (req, res) => {
   }
 });
 
-router.put("/:id", upload.fields([{ name: "evtPicture", maxCount: 1 }]), async (req, res) => {
+router.put(
+  "/event-image/:id",
+  validateToken,
+  upload.single("image"),
+  async (req, res) => {
+    const id = req.params.id;
+
+    // Check if user exists
+    const user = await Events.findByPk(id);
+    if (!user) {
+      return res.status(404).json({ message: "User not found" });
+    }
+
+    // Check if file is uploaded
+    if (!req.file) {
+      return res.status(400).json({ message: "No file uploaded" });
+    }
+
+    try {
+      const { buffer, mimetype, size } = req.file;
+
+      // Validate file type and size (example: max 5MB, only images)
+      const allowedTypes = ["image/jpeg", "image/png", "image/gif"];
+      const maxSize = 5 * 1024 * 1024; // 5MB
+
+      if (!allowedTypes.includes(mimetype)) {
+        return res.status(400).json({
+          message:
+            "Invalid file type\nSupported: jpeg, png, gif\nUploaded: " +
+            mimetype.substring(6),
+        });
+      }
+
+      if (size > maxSize) {
+        return res.status(400).json({
+          message:
+            "File too large!\nMaximum: 5MB, Uploaded: " +
+            (size / 1000000).toFixed(2) +
+            "MB",
+        });
+      }
+
+      // Crop the image to a square
+      const croppedBuffer = await sharp(buffer)
+        .resize({ width: 1024, height: 1024, fit: sharp.fit.cover }) // Adjust size as necessary
+        .toBuffer();
+
+      // Update user's profile picture
+      await Events.update(
+        { evtPicture: croppedBuffer },
+        { where: { id: id } }
+      );
+
+      res.json({ message: "Profile image uploaded and cropped successfully." });
+    } catch (err) {
+      res
+        .status(500)
+        .json({ message: "Internal server error", errors: err.errors });
+    }
+  }
+);
+
+router.put("/:id", 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);
@@ -158,13 +220,6 @@ router.put("/:id", upload.fields([{ name: "evtPicture", maxCount: 1 }]), async (
       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);