diff --git a/client/src/components/EventsPicture.tsx b/client/src/components/EventsPicture.tsx new file mode 100644 index 0000000..c0ae97f --- /dev/null +++ b/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(null); + const [loading, setLoading] = useState(false); + const [imageUrl, setImageUrl] = useState(`${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) => { + 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 ( +
+ + +
+ ); +} \ No newline at end of file diff --git a/client/src/pages/CreateEventsPage.tsx b/client/src/pages/CreateEventsPage.tsx index 154fb02..d7cea8c 100644 --- a/client/src/pages/CreateEventsPage.tsx +++ b/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" />
- - + {townCouncils.length > 0 && ( + ({ + key: townCouncil, + label: townCouncil, + }))} + /> + )}
{ />
{ setImageFile(file); // Set image file setFieldValue("evtPicture", file); // Set form field value diff --git a/client/src/pages/EditEventsPage.tsx b/client/src/pages/EditEventsPage.tsx index 0d30993..5d8b725 100644 --- a/client/src/pages/EditEventsPage.tsx +++ b/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(null); - const [imageFile, setImageFile] = useState(null); // State to handle image file const [townCouncils, setTownCouncils] = useState([]); 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, - { - headers: { - "Content-Type": "multipart/form-data", - }, - } + values, ); 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 - navigate("/admin/events"); + window.location.href = "/admin/events"; } else { console.error("Error updating event:", response.statusText); } @@ -142,7 +116,7 @@ const EditEventsPage = () => {
diff --git a/client/src/pages/ManageEventsPage.tsx b/client/src/pages/ManageEventsPage.tsx index d7a6d9d..b68ec43 100644 --- a/client/src/pages/ManageEventsPage.tsx +++ b/client/src/pages/ManageEventsPage.tsx @@ -24,16 +24,16 @@ const ManageEventsPage = () => { const [selectedEventId, setSelectedEventId] = useState(null); const navigate = useNavigate(); - 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); - } - }; + 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(() => { fetchEvents(); }, []); diff --git a/server/routes/events.js b/server/routes/events.js index 7a4b5e2..d46905f 100644 --- a/server/routes/events.js +++ b/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);