editpage

client/src/App.tsx

@@ -14,6 +14,7 @@ import EventsPage from "./pages/EventsPage";
 import CreateEventsPage from "./pages/CreateEventsPage";
 import ManageEventsPage from "./pages/ManageEventsPage";
 import AdministratorSpringboard from "./pages/AdministratorSpringboard";
+import EditEventsPage from "./pages/EditEventsPage";
 
 function App() {
   return (
@@ -33,6 +34,7 @@ function App() {
       <Route element={<EventsPage />} path="/events" />
       <Route element={<CreateEventsPage />} path="/createEvent" />
       <Route element={<ManageEventsPage />} path="/manageEvent" />
+      <Route element={<EditEventsPage />} path="/editEvent/:id" />
     </Routes>
   );
 }

client/src/pages/EditEventsPage.tsx

@@ -0,0 +1,186 @@
+import React, { useState, useEffect } from 'react';
+import DefaultLayout from "../layouts/default";
+import { Button } from "@nextui-org/react";
+import { Formik, Form } from "formik";
+import * as Yup from "yup";
+import axios from "axios";
+import { useNavigate, useParams } from "react-router-dom";
+import NextUIFormikInput from "../components/NextUIFormikInput";
+import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
+import config from "../config";
+import { ArrowUTurnLeftIcon } from "../icons";
+
+const validationSchema = Yup.object({
+  title: Yup.string()
+    .trim()
+    .min(3, "Title must be at least 3 characters")
+    .max(200, "Title must be at most 200 characters")
+    .matches(
+      /^[a-zA-Z0-9\s]+$/,
+      "Title can only contain letters, numbers, and spaces"
+    )
+    .required("Title is required"),
+  description: Yup.string()
+    .trim()
+    .min(3, "Description must be at least 3 characters")
+    .max(500, "Description must be at most 500 characters")
+    .matches(
+      /^[a-zA-Z0-9,\s!"'-]*$/,
+      "Only letters, numbers, commas, spaces, exclamation marks, quotations, and common symbols are allowed"
+    )
+    .required("Description is required"),
+  date: Yup.date().required("Date is required"),
+  time: Yup.string().required("Time is required"),
+  location: Yup.string().required("Location is required"),
+  category: Yup.string().required("Category is required"),
+  slotsAvailable: Yup.number().integer().required("Slots Available is required"),
+  imageUrl: Yup.string().url("Invalid URL format").required("Image URL is required")
+});
+
+const EditEventsPage = () => {
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const [initialValues, setInitialValues] = useState({
+    title: "",
+    description: "",
+    date: "",
+    time: "",
+    location: "",
+    category: "",
+    slotsAvailable: "",
+    imageUrl: ""
+  });
+
+  useEffect(() => {
+    const fetchEvent = async () => {
+      try {
+        const response = await axios.get(`${config.serverAddress}/events/${id}`);
+        console.log("Fetched event data:", response.data); // Debug log
+        setInitialValues(response.data);
+      } catch (error) {
+        console.error("Failed to fetch event data:", error);
+      }
+    };
+
+    fetchEvent();
+  }, [id]);
+
+  const handleSubmit = async (
+    values: any,
+    { setSubmitting, resetForm, setFieldError }: any
+  ) => {
+    console.log("Submitting form with values:", values); // Debug log
+    try {
+      const response = await axios.put(`${config.serverAddress}/events/${id}`, 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
+        navigate("/manageEvent");
+      } else {
+        console.error("Error updating event:", response.statusText);
+      }
+    } catch (error: any) {
+      if (error.response && error.response.data && error.response.data.field) {
+        setFieldError(error.response.data.field, error.response.data.error);
+      } else {
+        console.error("Unexpected error:", error);
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <DefaultLayout>
+      <section className="w-8/12 mx-auto">
+        <Button
+          variant="light"
+          onPress={() => {
+            navigate(-1);
+          }}
+        >
+          <ArrowUTurnLeftIcon />
+        </Button>
+      </section>
+      <section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={handleSubmit}
+          enableReinitialize={true}
+        >
+          {({ isValid, dirty, isSubmitting }) => (
+            <Form className="flex flex-col gap-5">
+              <NextUIFormikInput
+                label="Title"
+                name="title"
+                type="text"
+                placeholder="Enter your event title"
+                labelPlacement="inside"
+              />
+              <NextUIFormikTextarea
+                label="Description"
+                name="description"
+                placeholder="Enter event description"
+              />
+              <NextUIFormikInput
+                label="Date"
+                name="date"
+                type="date"
+                placeholder="Enter event date"
+                labelPlacement="inside"
+              />
+              <NextUIFormikInput
+                label="Time"
+                name="time"
+                type="time"
+                placeholder="Enter event time"
+                labelPlacement="inside"
+              />
+              <NextUIFormikInput
+                label="Location"
+                name="location"
+                type="text"
+                placeholder="Enter event location"
+                labelPlacement="inside"
+              />
+              <NextUIFormikInput
+                label="Category"
+                name="category"
+                type="text"
+                placeholder="Enter event category"
+                labelPlacement="inside"
+              />
+              <NextUIFormikInput
+                label="Slots Available"
+                name="slotsAvailable"
+                type="number"
+                placeholder="Enter slots available"
+                labelPlacement="inside"
+              />
+              <NextUIFormikInput
+                label="Image URL"
+                name="imageUrl"
+                type="text"
+                placeholder="Enter image URL"
+                labelPlacement="inside"
+              />
+              <div className="flex flex-row-reverse border">
+                <Button
+                  type="submit"
+                  className="bg-red-600 text-white text-xl w-1/6"
+                  disabled={!isValid || !dirty || isSubmitting}
+                >
+                  <p>Edit Event</p>
+                </Button>
+              </div>
+            </Form>
+          )}
+        </Formik>
+      </section>
+    </DefaultLayout>
+  );
+};
+
+export default EditEventsPage;

client/src/pages/ManageEventsPage.tsx

@@ -1,8 +1,8 @@
+import React, { useEffect, useState } from 'react';
 import DefaultLayout from "../layouts/default";
 import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Avatar, Button } from "@nextui-org/react";
 import { useNavigate } from "react-router-dom";
 import { PencilSquareIcon, TrashIcon } from "../icons";
-import { useEffect, useState } from "react";
 import axios from "axios";
 import config from "../config";
 
@@ -25,14 +25,16 @@ const ManageEventsPage = () => {
   }, []);
 
   const handleEdit = (id: string) => {
-    navigate(`/edit-event/${id}`);
+    navigate(`/editEvent/${id}`);
   };
 
-  const handleDelete = (id: string) => {
+  const handleDelete = async (id: string) => {
-    // Add delete functionality here
+    try {
-    axios.delete(`${config.serverAddress}/events/${id}`).then((res) => {
+      await axios.delete(`${config.serverAddress}/events/${id}`);
       setEvents(events.filter((event) => event.id !== id));
-    });
+    } catch (error) {
+      console.error("Failed to delete event:", error);
+    }
   };
 
   return (
@@ -99,3 +101,4 @@ const ManageEventsPage = () => {
 };
 
 export default ManageEventsPage;
+

server/models/Events.js

@@ -27,10 +27,6 @@ module.exports = (sequelize)  => {
       type: DataTypes.STRING,
       allowNull: false,
     },
-    Events: {
-      type: DataTypes.BLOB("long"),
-      allowNull: true,
-    },
     slotsAvailable: {
       type: DataTypes.INTEGER,
       allowNull: false,