events client and server side

client/src/App.tsx

@@ -9,6 +9,7 @@ import CommunityPage from "./pages/CommunityPage";
 import CreatePostPage from "./pages/CreatePostPage";
 import EditPostPage from "./pages/EditPostPage";
 import SchedulePage from "./pages/SchedulePage";
+import EventsPage from "./pages/EventsPage";
 
 function App() {
   return (
@@ -23,6 +24,8 @@ function App() {
       <Route element={<CreatePostPage />} path="/createPost" />
       <Route element={<EditPostPage />} path="/editPost/:id" />
       <Route element={<SchedulePage />} path="/schedule" />
+      <Route element={<EventsPage />} path="/events" />
+
     </Routes>
   );
 }

client/src/components/NavigationBar.tsx

@@ -76,7 +76,13 @@ export default function NavigationBar() {
               />
             </Button>
             <div className="flex flex-row *:my-auto *:text-red-800 dark:*:text-red-100">
-              <Button variant="light" size="sm">
+              <Button 
+                variant="light" 
+                size="sm"
+                onPress={() => {
+                  navigate("/events");
+                }}
+              >
                 <p className="text-lg">Events</p>
               </Button>
               <Button

client/src/pages/EventsPage.tsx

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import DefaultLayout from "../layouts/default";
+import { useNavigate } from 'react-router-dom';
+import instance from "../security/http";
+import config from "../config";
+
+const EventsPage = () => {
+  const [events, setEvents] = useState<any[]>([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    instance.get(config.serverAddress + "/events").then((res) => {
+      setEvents(res.data);
+    });
+  }, []);
+
+  return (
+    <DefaultLayout>
+      <div className="p-8">
+        <div className="mb-6">
+          <h2 className="text-3xl font-semibold text-red-600">Events</h2>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {events.map((event) => (
+            <div key={event.id} className="bg-white rounded-lg shadow-lg overflow-hidden">
+              <img
+                src={`${config.serverAddress}${event.imageUrl}`}
+                alt={event.title}
+                className="w-full h-48 object-cover"
+              />
+              <div className="p-4">
+                <h3 className="text-xl font-semibold mb-2">{event.title}</h3>
+                <p className="text-gray-600 mb-4">{event.description}</p>
+                <button
+                  className="bg-red-600 text-white rounded px-4 py-2 hover:bg-red-700"
+                  onClick={() => navigate(`/event/${event.id}`)}
+                >
+                  View event details
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+};
+
+export default EventsPage;

server/index.js

@@ -25,6 +25,9 @@ app.get("/", (req, res) => {
 
 app.use("/users", usersRoute);
 
+const eventsRoute = require('./routes/events');
+app.use("/events", eventsRoute);
+
 const postRoute = require('./routes/post');
 app.use("/post", postRoute);
 

server/models/Events.js

@@ -0,0 +1,41 @@
+module.exports = (sequelize, DataTypes) => {
+  const Events = sequelize.define("Events", {
+    title: {
+      type: DataTypes.STRING,
+      allowNull: false,
+    },
+    description: {
+      type: DataTypes.STRING,
+      allowNull: false,
+    },
+    date: {
+      type: DataTypes.DATE,
+      allowNull: false,
+    },
+    time: {
+      type: DataTypes.STRING,
+      allowNull: false,
+    },
+    location: {
+      type: DataTypes.STRING,
+      allowNull: false,
+    },
+    category: {
+      type: DataTypes.STRING,
+      allowNull: false,
+    },
+    Events: {
+        type: DataTypes.BLOB("long"),
+        allowNull: true,
+    },
+    slotsAvailable: {
+      type: DataTypes.INTEGER,
+      allowNull: false,
+    }
+  }, {
+    tableName: "events",
+    timestamps: true,
+  });
+
+  return Events;
+};

server/routes/events.js

@@ -0,0 +1,145 @@
+const express = require('express');
+const router = express.Router();
+const { Events } = require('../models');
+const multer = require('multer');
+const path = require('path');
+const yup = require('yup');
+
+router.post("/", async (req, res) => {
+    let data = req.body;
+    console.log("Incoming data:", data); // Log incoming data
+    const 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(),
+        imageUrl: yup.string().matches(/(\/uploads\/.+)/, 'Image URL must be a valid path').required(),
+        slotsAvailable: yup.number().integer().required()
+    });
+
+    try {
+        data = await validationSchema.validate(data, { abortEarly: false });
+        console.log("Validated data:", data); // Log validated data
+        const result = await Events.create(data);
+        console.log("Event created:", result); // Log successful creation
+        res.json(result);
+    } catch (err) {
+        console.error("Validation error:", err); // Log the validation error
+        res.status(400).json({ errors: err.errors });
+    }
+});
+
+const upload = multer({ storage: multer.memoryStorage() });
+
+router.put(
+    "/:id",
+    upload.single("image"),
+    async (req, res) => {
+      const id = req.params.id;
+  
+      // 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: 512, height: 512, fit: sharp.fit.cover }) // Adjust size as necessary
+          .toBuffer();
+  
+        await User.update(
+          { Events: croppedBuffer },
+          { where: { id: id } }
+        );
+  
+        res.json({ message: "Event image successfully uploaded." });
+      } catch (err) {
+        res
+          .status(500)
+          .json({ message: "Internal server error", errors: err.errors });
+      }
+    }
+  );
+  
+
+router.get("/", async (req, res) => {
+    const list = await Events.findAll({
+        order: [['createdAt', 'DESC']],
+    });
+    res.json(list);
+});
+
+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);
+});
+
+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(),
+        imageUrl: yup.string().matches(/(\/uploads\/.+)/, 'Image URL must be a valid path'),
+        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 });
+    }
+});
+
+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" });
+});
+
+module.exports = router;