fixes #426 Update on EventCard

rpi-eventhub/frontend/src/components/App/App.jsx

@@ -22,63 +22,33 @@ import Login from '../../pages/Login/Login';
 import Signup from "../../pages/Login/SignUp";
 import Footer from "../Footer/Footer";
 import ForgetPassWord from "../../pages/Login/ForgetPassWord";
+import NotFound from '../../pages/NotFound';
+
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <Home />,
-  },
-  {
-    path: "/about-us",
-    element: <AboutUs />,
-  },
-  {
-    path: "/playground",
-    element: <Playground />,
-  },
-  {
-    path: "/experimental",
-    element: <Experimental />,
-  },
-  {
-    path: "/search",
-    element: <SearchResults />,
-  },
-
-  {
-    path: "/all-events",
-    element: <AllEvents />,
-  },
-  {
-    path: "/events/:eventId", // Dynamic route for event details
-    element: <EventDetails />,
-  },
-  {
-    path: "/calendar",
-    element: <Calendar />,
-  },
-  {
-    path: "/terms-of-service",
-    element: <TermsOfService />
-  },
-  {
-    path: "/login",
-    element: <Login />,
-  },
-  {
-    path: "/signup",
-    element: <Signup />,
-  },
-  {
-    path: "/forget-password",
-    element: <ForgetPassWord />,
-  },
-  {
-    path: "/admin",
-    element: <AdminPage />
+    errorElement: <NotFound />, 
+    children: [
+      { path: "/", element: <Home /> },
+      { path: "/about-us", element: <AboutUs /> },
+      { path: "/playground", element: <Playground /> },
+      { path: "/experimental", element: <Experimental /> },
+      { path: "/search", element: <SearchResults /> },
+      { path: "/all-events", element: <AllEvents /> },
+      { path: "/events/:eventId", element: <EventDetails /> },
+      { path: "/calendar", element: <Calendar /> },
+      { path: "/terms-of-service", element: <TermsOfService /> },
+      { path: "/login", element: <Login /> },
+      { path: "/signup", element: <Signup /> },
+      { path: "/forget-password", element: <ForgetPassWord /> },
+      { path: "/admin", element: <AdminPage /> },
+      { path: "*", element: <NotFound /> } 
+    ]
   }
 ]);
 
+
 function App() {
   ReactGA.initialize('G-YTNJC09YQ1')
   return (

rpi-eventhub/frontend/src/components/EventCard/EventCard.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import styles from './EventCard.module.css';
 import { useAuth } from '../../context/AuthContext';
 import { useEvents } from '../../context/EventsContext';
@@ -37,6 +37,11 @@ const EventCard = ({ event, isLiked, onSelect, selected, showEditButton, onEdit,
     } 
   }, [isLoggedIn])
 
+  const navigate = useNavigate();
+  const handleCardClick = () => {
+    navigate(`/events/${event._id}`);
+  };
+
   const handleDelete = useCallback(async () => {
     try {
       await deleteEvent(event._id);
@@ -120,7 +125,16 @@ const EventCard = ({ event, isLiked, onSelect, selected, showEditButton, onEdit,
   };
 
   return (
-    <div key={event._id} style={{ transition: 'border-width 0.25s ease, border-color 0.25s ease' }} className={`duration-500 ${styles.eventWrapper} ${selected && 'border-8 border-indigo-400'}`}>
+      <div
+        key={event._id}
+        onClick={handleCardClick}
+        style={{
+          cursor: 'pointer',
+          transition: 'border-width 0.25s ease, border-color 0.25s ease'
+        }}
+        className={`duration-500 ${styles.eventWrapper} ${selected && 'border-8 border-indigo-400'}`}
+      >
+
       <div className={styles.imageContainer}>
         <img
           src={event.image || 'https://t3.ftcdn.net/jpg/05/04/28/96/360_F_504289605_zehJiK0tCuZLP2MdfFBpcJdOVxKLnXg1.jpg'}
@@ -134,13 +148,24 @@ const EventCard = ({ event, isLiked, onSelect, selected, showEditButton, onEdit,
         </div>
       </div>
       <div className={styles.eventPosterDetails}>
-      <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" className='absolute right-4 mt-4 h-5 w-5' onChange={onSelect} checked={selected} />
+      <input
+        type="checkbox"
+        className='absolute right-4 mt-4 h-5 w-5'
+        onClick={(e) => e.stopPropagation()}
+        onChange={onSelect}
+        checked={selected}
+      />
         <p>Posted by {event.poster}</p>
       </div>
       {canSeeDeleteButton(username, role) && (
-        <button onClick={handleDelete} className={styles.deleteButton}>
-          Delete
-        </button>
+        <button
+        onClick={(e) => {
+          e.stopPropagation();
+          handleDelete();
+        }}
+        className={styles.deleteButton}
+      >
+      </button>
       )}
       <div className={styles.eventDetails}>
         <h2>{event.title}</h2>
@@ -165,10 +190,14 @@ const EventCard = ({ event, isLiked, onSelect, selected, showEditButton, onEdit,
         </div>
       </div>
       <div className={styles.likeContainer}>
-        <button
-          className={`${styles.likeButton} ${liked ? styles.liked : ""}`}
-          onClick={handleLikeToggle}
-        >
+      <button
+      className={`${styles.likeButton} ${liked ? styles.liked : ""}`}
+      onClick={(e) => {
+        e.stopPropagation();
+        handleLikeToggle();
+      }}
+>
+
           {likes}
           <span>{liked ? "❤️" : "🤍"}</span>
         </button>

rpi-eventhub/frontend/src/pages/NotFound.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+// This is the custom 404 page displayed for unmatched routes
+const NotFound = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-100 via-white to-indigo-200 px-4">
+      <div className="bg-white p-10 rounded-2xl shadow-lg max-w-lg text-center">
+        <h1 className="text-7xl font-extrabold text-indigo-600 mb-4">404</h1>
+        <h2 className="text-2xl font-semibold text-gray-800 mb-3">
+          Oops! Page Not Found
+        </h2>
+        <p className="text-gray-600 mb-6">
+          Sorry, the page you’re looking for doesn’t exist or has been moved.
+        </p>
+        <Link
+          to="/"
+          className="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-6 rounded-lg shadow-md transition duration-200"
+        >
+          ⬅️ Return to EventHub Home
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;