events API optimization

2024-08-02 20:15:02 +08:00
parent cc84eedbff
commit 2d25096cea
3 changed files with 209 additions and 189 deletions
--- a/client/src/pages/EventsPage.tsx
+++ b/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(`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}
+              <Card
+                key={event.id}
                style={{
-                maxWidth: '600px',
-                minHeight: '300px',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'space-between',
-              }}>
+                  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 */ }}>
+                  <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',
+                        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"
--- a/client/src/pages/ManageEventsPage.tsx
+++ b/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'
-                    }}>
+                <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',
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                        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}>
-                  Cancel
-                </Button>
-                <Button onPress={() => { deleteEvent(); onClose(); }}>
+                <Button onPress={onClose}>Cancel</Button>
+                <Button
+                  onPress={() => {
+                    deleteEvent();
+                    onClose();
+                  }}
+                >
                  Delete
                </Button>
              </ModalFooter>
--- a/server/routes/events.js
+++ b/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 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() });
@@ -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 < 18) return 'Afternoon';
-            return 'Evening';
+      if (hour < 12) return "Morning";
+      if (hour < 18) return "Afternoon";
+      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("/", 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

@@ -82,10 +82,7 @@ router.post("/", upload.fields([
      let evtPicture = files.evtPicture ? files.evtPicture[0].buffer : null;

      if (evtPicture) {
-            evtPicture = await sharp(evtPicture)
-                .resize(800, 600)
-                .jpeg()
-                .toBuffer();
+        evtPicture = await sharp(evtPicture).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
-            .status(500)
-            .json({ message: "Error retrieving image", error: err });
+    res.status(500).json({ message: "Error retrieving image", error: err });
  }
 });