wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit events

Browse Source
This commit is contained in:
Harini312821
2024-08-12 01:21:35 +08:00
parent fbedd28d3b
commit 3162cc0675
5 changed files with 219 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
client/src/components/EventsPicture.tsx Normal file
View File

@@ -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>
);
}

27
client/src/pages/CreateEventsPage.tsx
View File

@@ -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>
<select
name="location"
className="form-select mt-1 block w-full"
onChange={(e) => setFieldValue("location", e.target.value)}
>
<option value="">Select a town council</option>
{townCouncils.map((townCouncil, index) => (
<option key={index} value={townCouncil}>
{townCouncil}
</option>
))}
</select>
{townCouncils.length > 0 && (
<NextUIFormikSelect
label="Town council"
name="location"
placeholder="Choose the town council for the event"
labelPlacement="inside"
options={townCouncils.map((townCouncil) => ({
key: townCouncil,
label: townCouncil,
}))}
/>
)}
</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

124
client/src/pages/EditEventsPage.tsx
View File

@@ -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,
{
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 = () => {
<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>
<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>
{townCouncils.length > 0 && (
<NextUIFormikSelect
label="Town council"
name="location"
placeholder="Choose the town council for the event"
labelPlacement="inside"
options={townCouncils.map((townCouncil) => ({
key: townCouncil,
label: townCouncil,
}))}
/>
)}
</div>
<NextUIFormikInput
label="Category"
@@ -213,22 +185,16 @@ 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 className="mb-4 flex flex-col ">
<EventsPicture eventId={id as string} editable/>
</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>

18
client/src/pages/ManageEventsPage.tsx
View File

@@ -24,16 +24,16 @@ const ManageEventsPage = () => {
const [selectedEventId, setSelectedEventId] = useState<string | null>(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();
}, []);

73
server/routes/events.js
View File

@@ -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);