events API optimization

client/src/pages/EventsPage.tsx

@@ -81,8 +81,10 @@ const EventsPage: React.FC = () => {
         ? event.time.toLowerCase().trim() === selectedTime.toLowerCase().trim()
         : true;
 
-      console.log('Event Time:', event.time);
+      console.log("Event Time:", event.time);
-      console.log(`Filtering: ${event.title} | Category: ${matchCategory} | Town Council: ${matchTownCouncil} | Time: ${matchTime}`);
+      console.log(
+        `Filtering: ${event.title} | Category: ${matchCategory} | Town Council: ${matchTownCouncil} | Time: ${matchTime}`
+      );
 
       return matchCategory && matchTownCouncil && matchTime;
     });
@@ -141,34 +143,44 @@ const EventsPage: React.FC = () => {
             <p className="text-gray-600">No events available.</p>
           ) : (
             filteredEvents.map((event) => (
-              <Card key={event.id}
+              <Card
+                key={event.id}
                 style={{
-                maxWidth: '600px',
+                  maxWidth: "600px",
-                minHeight: '300px',
+                  minHeight: "300px",
-                display: 'flex',
+                  display: "flex",
-                flexDirection: 'column',
+                  flexDirection: "column",
-                justifyContent: 'space-between',
+                  justifyContent: "space-between",
-              }}>
+                }}
+              >
                 <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
                   <h4 className="font-bold text-large">{event.title}</h4>
                 </CardHeader>
                 <CardBody className="pb-0 pt-2 px-4 flex-col items-start">
-                  {event.evtPicture && (
+                  <div
-                    <div className="relative w-full" style={{ paddingBottom: '0%', overflow: "hidden",marginBottom: '0px' /* 16:9 aspect ratio */ }}>
+                    className="relative w-full"
+                    style={{
+                      paddingBottom: "0%",
+                      overflow: "hidden",
+                      marginBottom: "0px" /* 16:9 aspect ratio */,
+                    }}
+                  >
                     <Image
                       alt={event.title}
                       src={`${config.serverAddress}/events/evtPicture/${event.id}`}
                       style={{
-                          height: '430px',
+                        height: "430px",
-                          width: '100%',
+                        width: "100%",
-                          objectFit: 'cover',
+                        objectFit: "cover",
-                          borderRadius: '0.375rem',
+                        borderRadius: "0.375rem",
                       }}
                     />
                   </div>
-                  )}
                 </CardBody>
-                <CardFooter className="flex flex-col items-start p-4"style={{ paddingTop: '0px' }}>
+                <CardFooter
+                  className="flex flex-col items-start p-4"
+                  style={{ paddingTop: "0px" }}
+                >
                   <p className="text-gray-600 mb-4">{event.description}</p>
                   <Button
                     className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"

client/src/pages/ManageEventsPage.tsx

@@ -77,30 +77,34 @@ const ManageEventsPage = () => {
           {events.map((event) => (
             <TableRow key={event.id}>
               <TableCell>
-                <div><span>{event.title}</span></div>
+                <div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                  <span>{event.title}</span>
-                  {event.evtPicture && (
+                </div>
-                    <div style={{
+                <div
-                      width: '100px',
+                  style={{ display: "flex", alignItems: "center", gap: "10px" }}
-                      height: '100px',
+                >
-                      overflow: 'hidden',
+                  <div
-                      borderRadius: '8px',
+                    style={{
-                      position: 'relative'
+                      width: "100px",
-                    }}>
+                      height: "100px",
+                      overflow: "hidden",
+                      borderRadius: "8px",
+                      position: "relative",
+                    }}
+                  >
                     <img
                       src={`${config.serverAddress}/events/evtPicture/${event.id}`}
                       alt="Event Picture"
                       style={{
-                          width: '100%',
+                        width: "100%",
-                          height: '100%',
+                        height: "100%",
-                          objectFit: 'cover',
+                        objectFit: "cover",
-                          position: 'absolute',
+                        position: "absolute",
                         top: 0,
-                          left: 0
+                        left: 0,
                       }}
                     />
                   </div>
-                  )}
                 </div>
               </TableCell>
               <TableCell>{new Date(event.date).toLocaleDateString()}</TableCell>
@@ -149,15 +153,20 @@ const ManageEventsPage = () => {
         <ModalContent>
           {(onClose) => (
             <>
-              <ModalHeader className="flex flex-col gap-1">Delete Event</ModalHeader>
+              <ModalHeader className="flex flex-col gap-1">
+                Delete Event
+              </ModalHeader>
               <ModalBody>
                 <p>Are you sure you want to delete this event?</p>
               </ModalBody>
               <ModalFooter>
-                <Button onPress={onClose}>
+                <Button onPress={onClose}>Cancel</Button>
-                  Cancel
+                <Button
-                </Button>
+                  onPress={() => {
-                <Button onPress={() => { deleteEvent(); onClose(); }}>
+                    deleteEvent();
+                    onClose();
+                  }}
+                >
                   Delete
                 </Button>
               </ModalFooter>

server/routes/events.js

@@ -1,10 +1,10 @@
-const express = require('express');
+const express = require("express");
 const router = express.Router();
-const { Events } = require('../models');
+const { Events } = require("../models");
-const multer = require('multer');
+const multer = require("multer");
 const { Op } = require("sequelize");
-const path = require('path');
+const path = require("path");
-const yup = require('yup');
+const yup = require("yup");
 const sharp = require("sharp");
 
 const upload = multer({ storage: multer.memoryStorage() });
@@ -21,9 +21,9 @@ router.get("/", async (req, res) => {
     const timeToCategory = (time) => {
       if (!time) return null;
       const hour = new Date(time).getHours();
-            if (hour < 12) return 'Morning';
+      if (hour < 12) return "Morning";
-            if (hour < 18) return 'Afternoon';
+      if (hour < 18) return "Afternoon";
-            return 'Evening';
+      return "Evening";
     };
 
     // Convert the time query parameter to a category
@@ -40,13 +40,14 @@ router.get("/", async (req, res) => {
 
     // Fetch filtered events from the database
     const filteredEvents = await Events.findAll({
+      attributes: { exclude: ["evtPicture"] },
       where: {
         [Op.and]: [
           category ? { category } : {},
           townCouncil ? { townCouncil } : {},
-                    timeCategory ? { timeCategory } : {}
+          timeCategory ? { timeCategory } : {},
-                ]
+        ],
-            }
+      },
     });
 
     // Respond with the filtered events
@@ -57,11 +58,10 @@ router.get("/", async (req, res) => {
   }
 });
 
-
+router.post(
-router.post("/", upload.fields([
+  "/",
-    { name: 'evtPicture', maxCount: 1 },
+  upload.fields([{ name: "evtPicture", maxCount: 1 }]),
-]), async (req, res) => {
+  async (req, res) => {
-
     let data = req.body;
     let files = req.files; // Log incoming data
 
@@ -82,10 +82,7 @@ router.post("/", upload.fields([
       let evtPicture = files.evtPicture ? files.evtPicture[0].buffer : null;
 
       if (evtPicture) {
-            evtPicture = await sharp(evtPicture)
+        evtPicture = await sharp(evtPicture).resize(800, 600).jpeg().toBuffer();
-                .resize(800, 600)
-                .jpeg()
-                .toBuffer();
       }
 
       let result = await Events.create({ ...data, evtPicture });
@@ -95,12 +92,14 @@ router.post("/", upload.fields([
       console.error("Validation error:", err); // Log the validation error
       res.status(400).json({ errors: err.errors });
     }
-});
+  }
+);
 
 router.get("/", async (req, res) => {
   try {
     let list = await Events.findAll({
-        order: [['createdAt', 'DESC']],
+      attributes: { exclude: ["evtPicture"] },
+      order: [["createdAt", "DESC"]],
     });
 
     res.json(list);
@@ -112,7 +111,9 @@ router.post("/", upload.fields([
 
 router.get("/:id", async (req, res) => {
   const id = req.params.id;
-    const event = await Events.findByPk(id);
+  const event = await Events.findByPk(id, {
+    attributes: { exclude: ["evtPicture"] },
+  });
   if (!event) {
     res.sendStatus(404);
     return;
@@ -133,9 +134,7 @@ router.get("/evtPicture/:id", async (req, res) => {
     res.set("Content-Type", "image/jpeg");
     res.send(events.evtPicture);
   } catch (err) {
-        res
+    res.status(500).json({ message: "Error retrieving image", error: err });
-            .status(500)
-            .json({ message: "Error retrieving image", error: err });
   }
 });