Add buttons to edit and delete events as an admin

package.json

@@ -20,8 +20,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.6.0",
-    "tailwindcss": "^4.1.6",
-    "zod": "^3.25.48"
+    "tailwindcss": "^4.1.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",

src/api/services/events.ts

@@ -1,3 +1,8 @@
+import axios from 'axios';
+import api from '../api';
+
+import { Event } from 'models/event.model';
+
 export const getEventByMode = async (modes: string[]) => {
   const query = new URLSearchParams({ mode: modes.join(',') }).toString();
 
@@ -8,3 +13,49 @@ export const getEventByMode = async (modes: string[]) => {
   }
   return response.json();
 };
+
+export const getEventById = async (id: string) => {
+  const response = await fetch(`http://localhost:3000/events/${id}`);
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch events');
+  }
+  return response.json();
+};
+
+export interface UpdateEventResponse {
+  message: string;
+}
+
+export const updateEventById = async (
+  id: string,
+  event: Event,
+): Promise<UpdateEventResponse | null> => {
+  try {
+    const { data } = await api.put<UpdateEventResponse>('/events/' + id, event);
+    return data;
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response?.status === 401) {
+      return null;
+    }
+    throw error;
+  }
+};
+
+export interface DeleteEventResponse {
+  message: string;
+}
+
+export const deleteEventById = async (
+  id: string,
+): Promise<DeleteEventResponse | null> => {
+  try {
+    const { data } = await api.delete<DeleteEventResponse>('/events/' + id);
+    return data;
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response?.status === 401) {
+      return null;
+    }
+    throw error;
+  }
+};

src/components/major/events.tsx

@@ -1,16 +1,81 @@
 //component for events data
-import { Event } from 'models/event.model.ts';
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router';
+import { Wrench, Trash2 } from 'lucide-react';
+
+import { useAuth } from '../../auth/useAuth';
+import { deleteEventById } from '../../api/services/events.ts';
+import { FullEvent } from 'models/event.model.ts';
+
+import DirectButton from '../minor/DirectButton';
+
+export default function Events(info: FullEvent) {
+  const { user } = useAuth();
+  const admin = user && user.role === 'admin';
+
+  const [open, setOpen] = useState(false);
+  const navigate = useNavigate();
+
+  const handleDelete = async () => {
+    // TODO handle response from API for fails
+    if (info._id !== undefined) {
+      await deleteEventById(info._id.toString());
+
+      navigate(0); // refreshes the current page were in, as we dont want to show deleted event
+    }
+
+    setOpen(false);
+  };
 
-export default function Events(info: Event) {
   return (
     <div className="p-4 m-4 border solid white rounded w-[50%]">
-      <h1 className="text-xl font-bold">{info.name}</h1>
-      <p>{info.location}</p>
-      <p>{info.distance}km away</p>
-      <p>{new Date(info.date).toLocaleDateString()}</p>
+      <div className="flex">
+        <div className="w-full">
+          <h1 className="text-xl font-bold">{info.name}</h1>
+          <p>{info.location}</p>
+          <p>{info.distance}km away</p>
+          <p>{new Date(info.date).toLocaleDateString()}</p>
+        </div>
+        {admin && (
+          <div className="flex flex-col gap-2">
+            <Link
+              to={'/events/edit/' + info._id}
+              className={`p-2 rounded-md outline-2 outline-primary hover:bg-input-bg`}
+            >
+              <Wrench />
+            </Link>
+
+            <button
+              onClick={() => setOpen(true)}
+              className="p-2 rounded-md outline-2 outline-primary hover:bg-input-bg"
+            >
+              <Trash2 />
+            </button>
+          </div>
+        )}
+      </div>
       <p>{info.description}</p>
       <p>Price: {info.price}</p>
       <p>More info can be found here - {info.url}</p>
+
+      {open && (
+        <div
+          onClick={() => setOpen(false)}
+          className="fixed inset-0 bg-black/50 flex justify-center items-center"
+        >
+          <div className="popup p-4">
+            <h4 className="mb-5">
+              Are you sure you want to delete <b>{info.name}</b>?
+            </h4>
+
+            <div className="flex justify-center items-center gap-5">
+              <DirectButton onClick={handleDelete} text="Yes" />
+
+              <DirectButton onClick={() => setOpen(false)} text="No" />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/components/major/eventsContainer.tsx

@@ -1,24 +1,15 @@
 import Events from './events';
-import { Event } from 'models/event.model';
+import { FullEvent } from 'models/event.model';
 
 type Props = {
-  events: Event[];
+  events: FullEvent[];
 };
 
 const EventsContainer = ({ events }: Props) => {
   return (
     <div className="flex flex-col grow items-center mt-12">
-      {events.map((event) => (
-        <Events
-          mode={event.mode}
-          name={event.name}
-          date={event.date}
-          price={event.price}
-          description={event.description}
-          distance={event.distance}
-          location={event.location}
-          url={event.url}
-        />
+      {events.map((event: FullEvent) => (
+        <Events {...event} />
       ))}
     </div>
   );

src/components/minor/FormInput.tsx

@@ -1,15 +1,17 @@
-type InputType = 'text' | 'email' | 'password';
+type InputType = 'text' | 'email' | 'number' | 'password';
 
 interface FormInputProps {
   name: string;
   label: string;
+  def?: string | number;
   type?: InputType;
-  error: boolean;
+  error?: boolean;
 }
 
 export default function FormInput({
   name,
   label,
+  def = '',
   type = 'text',
   error = false,
 }: FormInputProps) {
@@ -20,6 +22,7 @@ export default function FormInput({
         type={type}
         id={name}
         name={name}
+        defaultValue={def}
         required
         className={`bg-[var(--color-input-bg)] text-[var(--color-text)] outline-none pl-1 border ${
           error

src/config/router.tsx

@@ -7,6 +7,7 @@ import UserHome from '../pages/UserHome';
 import UserProfile from '../pages/UserProfile';
 import Error from '../pages/Error';
 import SavedEvents from '../pages/SavedEvents';
+import EditEvent from '../pages/EditEvent';
 
 const router = createBrowserRouter([
   {
@@ -33,6 +34,10 @@ const router = createBrowserRouter([
     path: '/savedevents/:mode?',
     element: <SavedEvents />,
   },
+  {
+    path: '/events/edit/:id',
+    element: <EditEvent />,
+  },
   {
     path: '/*',
     element: <Error />,

src/hooks/useEventById.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+import { getEventById } from '../api/services/events';
+import { Event } from 'models/event.model';
+
+export const useEventById = (id: string) => {
+  const [event, setEvent] = useState<Event>();
+
+  useEffect(() => {
+    const getEvent = async () => {
+      try {
+        const data = await getEventById(id);
+        setEvent(data);
+      } catch (error) {
+        new Error('Error setting event by id: ' + error);
+      }
+    };
+    getEvent();
+  }, [id]);
+
+  return { event, setEvent };
+};

src/hooks/useEvents.ts

@@ -2,11 +2,11 @@ import { useState, useEffect } from 'react';
 import { FiltersState } from '../components/major/side-bar/types';
 import { getEventByMode } from '../api/services/events';
 import { filterEvents } from '../utils/filterEvents';
-import { Event } from 'models/event.model';
+import { FullEvent } from 'models/event.model';
 
 export const useEvents = (filters: FiltersState) => {
-  const [rawEvents, setRawEvents] = useState<Event[]>([]);
-  const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
+  const [rawEvents, setRawEvents] = useState<FullEvent[]>([]);
+  const [filteredEvents, setFilteredEvents] = useState<FullEvent[]>([]);
 
   useEffect(() => {
     const getEvents = async () => {