events API optimization

client/src/pages/EventsPage.tsx

@@ -77,12 +77,14 @@ const EventsPage: React.FC = () => {
       const matchTownCouncil = selectedTownCouncil
         ? event.location === selectedTownCouncil
         : true;
-      const matchTime = selectedTime 
-      ? event.time.toLowerCase().trim() === selectedTime.toLowerCase().trim() 
-      : true;
+      const matchTime = selectedTime
+        ? event.time.toLowerCase().trim() === selectedTime.toLowerCase().trim()
+        : true;
 
-      console.log('Event Time:', event.time);
-      console.log(`Filtering: ${event.title} | Category: ${matchCategory} | Town Council: ${matchTownCouncil} | Time: ${matchTime}`);
+      console.log("Event Time:", event.time);
+      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}
-              style={{
-                maxWidth: '600px',
-                minHeight: '300px',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'space-between',
-              }}>
+              <Card
+                key={event.id}
+                style={{
+                  maxWidth: "600px",
+                  minHeight: "300px",
+                  display: "flex",
+                  flexDirection: "column",
+                  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 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',
-                          width: '100%',
-                          objectFit: 'cover',
-                          borderRadius: '0.375rem',
-                        }}
-                      />
-                    </div>
-                  )}
+                  <div
+                    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",
+                        width: "100%",
+                        objectFit: "cover",
+                        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 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                  {event.evtPicture && (
-                    <div style={{
-                      width: '100px',
-                      height: '100px',
-                      overflow: 'hidden',
-                      borderRadius: '8px',
-                      position: 'relative'
-                    }}>
-                      <img
-                        src={`${config.serverAddress}/events/evtPicture/${event.id}`}
-                        alt="Event Picture"
-                        style={{
-                          width: '100%',
-                          height: '100%',
-                          objectFit: 'cover',
-                          position: 'absolute',
-                          top: 0,
-                          left: 0
-                        }}
-                      />
-                    </div>
-                  )}
+                <div>
+                  <span>{event.title}</span>
+                </div>
+                <div
+                  style={{ display: "flex", alignItems: "center", gap: "10px" }}
+                >
+                  <div
+                    style={{
+                      width: "100px",
+                      height: "100px",
+                      overflow: "hidden",
+                      borderRadius: "8px",
+                      position: "relative",
+                    }}
+                  >
+                    <img
+                      src={`${config.serverAddress}/events/evtPicture/${event.id}`}
+                      alt="Event Picture"
+                      style={{
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                        position: "absolute",
+                        top: 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}>
-                  Cancel
-                </Button>
-                <Button onPress={() => { deleteEvent(); onClose(); }}>
+                <Button onPress={onClose}>Cancel</Button>
+                <Button
+                  onPress={() => {
+                    deleteEvent();
+                    onClose();
+                  }}
+                >
                   Delete
                 </Button>
               </ModalFooter>

server/routes/events.js

@@ -1,178 +1,177 @@
-const express = require('express');
+const express = require("express");
 const router = express.Router();
-const { Events } = require('../models');
-const multer = require('multer');
+const { Events } = require("../models");
+const multer = require("multer");
 const { Op } = require("sequelize");
-const path = require('path');
-const yup = require('yup');
+const path = require("path");
+const yup = require("yup");
 const sharp = require("sharp");
 
 const upload = multer({ storage: multer.memoryStorage() });
 
 router.get("/", async (req, res) => {
-    try {
-        // Extract filter criteria from query parameters
-        const { category, townCouncil, time } = req.query;
+  try {
+    // Extract filter criteria from query parameters
+    const { category, townCouncil, time } = req.query;
 
-        // Log incoming parameters
-        console.log("Filter Parameters:", { category, townCouncil, time });
+    // 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();
-            if (hour < 12) return 'Morning';
-            if (hour < 18) return 'Afternoon';
-            return 'Evening';
-        };
+    // Map time to category
+    const timeToCategory = (time) => {
+      if (!time) return null;
+      const hour = new Date(time).getHours();
+      if (hour < 12) return "Morning";
+      if (hour < 18) return "Afternoon";
+      return "Evening";
+    };
 
-        // Convert the time query parameter to a category
-        const timeCategory = timeToCategory(time);
+    // 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;
+    // 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);
+    // Log constructed filter object
+    console.log("Constructed Filter Object:", filter);
 
-        // Fetch filtered events from the database
-        const filteredEvents = await Events.findAll({
-            where: {
-                [Op.and]: [
-                    category ? { category } : {},
-                    townCouncil ? { townCouncil } : {},
-                    timeCategory ? { timeCategory } : {}
-                ]
-            }
-        });
+    // Fetch filtered events from the database
+    const filteredEvents = await Events.findAll({
+      attributes: { exclude: ["evtPicture"] },
+      where: {
+        [Op.and]: [
+          category ? { category } : {},
+          townCouncil ? { townCouncil } : {},
+          timeCategory ? { timeCategory } : {},
+        ],
+      },
+    });
 
-        // Respond with the filtered events
-        res.json(filteredEvents);
-    } catch (error) {
-        console.error("Error fetching events:", error);
-        res.status(500).json({ message: "Internal Server Error" });
-    }
+    // Respond with the filtered events
+    res.json(filteredEvents);
+  } catch (error) {
+    console.error("Error fetching events:", error);
+    res.status(500).json({ message: "Internal Server Error" });
+  }
 });
 
-
-router.post("/", upload.fields([
-    { name: 'evtPicture', maxCount: 1 },
-]), async (req, res) => {
-
+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; // Log incoming data
+
     let validationSchema = yup.object({
-        title: yup.string().trim().min(3).max(100).required(),
-        description: yup.string().trim().min(3).max(500).required(),
-        date: yup.date().required(),
-        time: yup.string().required(),
-        location: yup.string().required(),
-        category: yup.string().required(),
-        slotsAvailable: yup.number().integer().required(),
+      title: yup.string().trim().min(3).max(100).required(),
+      description: yup.string().trim().min(3).max(500).required(),
+      date: yup.date().required(),
+      time: yup.string().required(),
+      location: yup.string().required(),
+      category: yup.string().required(),
+      slotsAvailable: yup.number().integer().required(),
     });
 
     try {
-        data = await validationSchema.validate(data, { abortEarly: false });
+      data = await validationSchema.validate(data, { abortEarly: false });
 
-        // Process valid data
-        let evtPicture = files.evtPicture ? files.evtPicture[0].buffer : null;
+      // Process valid data
+      let evtPicture = files.evtPicture ? files.evtPicture[0].buffer : null;
 
-        if (evtPicture) {
-            evtPicture = await sharp(evtPicture)
-                .resize(800, 600)
-                .jpeg()
-                .toBuffer();
-        }
+      if (evtPicture) {
+        evtPicture = await sharp(evtPicture).resize(800, 600).jpeg().toBuffer();
+      }
 
-        let result = await Events.create({ ...data, evtPicture});
+      let result = await Events.create({ ...data, evtPicture });
 
-        res.json(result);
+      res.json(result);
     } catch (err) {
-        console.error("Validation error:", err); // Log the validation error
-        res.status(400).json({ errors: err.errors });
+      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']],
-      });
+  }
+);
 
-      res.json(list);
-    } catch (error) {
-      console.error("Error fetching events:", error);
-      res.status(500).json({ message: "Internal Server Error" });
-    }
-  });
+router.get("/", async (req, res) => {
+  try {
+    let list = await Events.findAll({
+      attributes: { exclude: ["evtPicture"] },
+      order: [["createdAt", "DESC"]],
+    });
+
+    res.json(list);
+  } catch (error) {
+    console.error("Error fetching events:", error);
+    res.status(500).json({ message: "Internal Server Error" });
+  }
+});
 
 router.get("/:id", async (req, res) => {
-    const id = req.params.id;
-    const event = await Events.findByPk(id);
-    if (!event) {
-        res.sendStatus(404);
-        return;
-    }
-    res.json(event);
+  const id = req.params.id;
+  const event = await Events.findByPk(id, {
+    attributes: { exclude: ["evtPicture"] },
+  });
+  if (!event) {
+    res.sendStatus(404);
+    return;
+  }
+  res.json(event);
 });
 
 router.get("/evtPicture/:id", async (req, res) => {
-    let id = req.params.id;
-    let events = await Events.findByPk(id);
+  let id = req.params.id;
+  let events = await Events.findByPk(id);
 
-    if (!events || !events.evtPicture) {
-        res.sendStatus(404);
-        return;
-    }
+  if (!events || !events.evtPicture) {
+    res.sendStatus(404);
+    return;
+  }
 
-    try {
-        res.set("Content-Type", "image/jpeg"); 
-        res.send(events.evtPicture);
-    } catch (err) {
-        res
-            .status(500)
-            .json({ message: "Error retrieving image", error: err });
-    }
+  try {
+    res.set("Content-Type", "image/jpeg");
+    res.send(events.evtPicture);
+  } catch (err) {
+    res.status(500).json({ message: "Error retrieving image", error: err });
+  }
 });
 
 router.put("/:id", async (req, res) => {
-    const id = req.params.id;
-    let data = req.body;
-    const validationSchema = yup.object({
-        title: yup.string().trim().min(3).max(100),
-        description: yup.string().trim().min(3).max(500),
-        date: yup.date(),
-        time: yup.string(),
-        location: yup.string(),
-        category: yup.string(),
-        slotsAvailable: yup.number().integer(),
-    });
+  const id = req.params.id;
+  let data = req.body;
+  const validationSchema = yup.object({
+    title: yup.string().trim().min(3).max(100),
+    description: yup.string().trim().min(3).max(500),
+    date: yup.date(),
+    time: yup.string(),
+    location: yup.string(),
+    category: yup.string(),
+    slotsAvailable: yup.number().integer(),
+  });
 
-    try {
-        data = await validationSchema.validate(data, { abortEarly: false });
-        const event = await Events.findByPk(id);
-        if (!event) {
-            return res.status(404).json({ message: "Event not found" });
-        }
-        await Events.update(data, { where: { id: id } });
-        res.json({ message: "Event updated successfully" });
-    } catch (err) {
-        res.status(400).json({ errors: err.errors });
+  try {
+    data = await validationSchema.validate(data, { abortEarly: false });
+    const event = await Events.findByPk(id);
+    if (!event) {
+      return res.status(404).json({ message: "Event not found" });
     }
+    await Events.update(data, { where: { id: id } });
+    res.json({ message: "Event updated successfully" });
+  } catch (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);
-    if (!event) {
-        return res.status(404).json({ message: "Event not found" });
-    }
-    await Events.destroy({ where: { id: id } });
-    res.json({ message: "Event deleted successfully" });
+  const id = req.params.id;
+  const event = await Events.findByPk(id);
+  if (!event) {
+    return res.status(404).json({ message: "Event not found" });
+  }
+  await Events.destroy({ where: { id: id } });
+  res.json({ message: "Event deleted successfully" });
 });
 
 module.exports = router;