Properlized routes

client/src/App.tsx

@@ -47,9 +47,9 @@ function App() {
             {/* Events Route */}
             <Route path="events">
               <Route index element={<EventsPage />} />
+              <Route element={<EventDetailsPage />} path="view/:id" />
+              <Route element={<RegisterPage />} path="register/:id" />
             </Route>
-            <Route element={<EventDetailsPage />} path="event/:id" />
-            <Route path="/register/:id" element={<RegisterPage />} />
 
             {/* Karang Guni Schedules Route */}
             <Route path="karang-guni-schedules">

client/src/pages/EventDetailsPage.tsx

@@ -2,7 +2,13 @@ import { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import instance from "../security/http";
 import config from "../config";
-import { Card, CardHeader, CardBody, Button, CardFooter } from "@nextui-org/react";
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Button,
+  CardFooter,
+} from "@nextui-org/react";
 import { ArrowUTurnLeftIcon } from "../icons"; // Make sure this path is correct
 
 const EventDetailsPage = () => {
@@ -20,13 +26,17 @@ const EventDetailsPage = () => {
         setEvent(res.data);
 
         // Fetch all events to find similar ones
-        const allEventsRes = await instance.get(`${config.serverAddress}/events`);
+        const allEventsRes = await instance.get(
+          `${config.serverAddress}/events`
+        );
         const allEvents = allEventsRes.data;
 
         // Find similar events based on location and category, excluding the current event
-        const similar = allEvents.filter((e: any) =>
+        const similar = allEvents.filter(
-          e.id !== Number(id) && // Make sure to exclude the current event
+          (e: any) =>
-          (e.location === res.data.location || e.category === res.data.category)
+            e.id !== Number(id) && // Make sure to exclude the current event
+            (e.location === res.data.location ||
+              e.category === res.data.category)
         );
 
         setSimilarEvents(similar);
@@ -44,7 +54,7 @@ const EventDetailsPage = () => {
     <div className="w-full h-full p-8">
       <Button
         className="mb-4 bg-gray-200 text-black rounded px-4 py-2 hover:bg-gray-300"
-        onClick={() => navigate('/events')} // Navigate directly to the events page
+        onClick={() => navigate("/events")} // Navigate directly to the events page
       >
         <ArrowUTurnLeftIcon />
         Back to Events
@@ -79,7 +89,7 @@ const EventDetailsPage = () => {
           </p>
           <Button
             className="mt-4 bg-red-500 text-white rounded px-4 py-2 hover:bg-red-600"
-            onClick={() => navigate(`/register/${id}`)}
+            onClick={() => navigate(`/events/register/${id}`)}
           >
             Register for Event
           </Button>
@@ -88,13 +98,18 @@ const EventDetailsPage = () => {
 
       {/* Similar Events Section */}
       <div className="mt-8">
-        <h2 className="text-2xl font-semibold mb-4">Similar Events You Might Be Interested In</h2>
+        <h2 className="text-2xl font-semibold mb-4">
+          Similar Events You Might Be Interested In
+        </h2>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {similarEvents.length === 0 ? (
             <p className="text-gray-600">No similar events available.</p>
           ) : (
             similarEvents.map((similarEvent: any) => (
-              <Card key={similarEvent.id} className="bg-white rounded-lg overflow-hidden border">
+              <Card
+                key={similarEvent.id}
+                className="bg-white rounded-lg overflow-hidden border"
+              >
                 <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
                   <h4 className="font-bold text-large">{similarEvent.title}</h4>
                 </CardHeader>
@@ -110,7 +125,7 @@ const EventDetailsPage = () => {
                 <CardFooter className="flex flex-col items-start p-4">
                   <Button
                     className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"
-                    onClick={() => navigate(`/event/${similarEvent.id}`)}
+                    onClick={() => navigate(`/events/view/${similarEvent.id}`)}
                   >
                     View event details
                   </Button>

client/src/pages/EventsPage.tsx

@@ -17,7 +17,7 @@ interface Event {
   title: string;
   category: string;
   location: string;
-  time: string; 
+  time: string;
   description: string;
   imageUrl: string;
 }
@@ -36,7 +36,9 @@ const EventsPage: React.FC = () => {
   useEffect(() => {
     const fetchEvents = async () => {
       try {
-        const res = await instance.get<Event[]>(`${config.serverAddress}/events`);
+        const res = await instance.get<Event[]>(
+          `${config.serverAddress}/events`
+        );
         console.log("Fetched events data:", res.data);
         setEvents(res.data);
         setFilteredEvents(res.data);
@@ -53,7 +55,9 @@ const EventsPage: React.FC = () => {
 
     const fetchTownCouncils = async () => {
       try {
-        const res = await axios.get(`${config.serverAddress}/users/town-councils-metadata`);
+        const res = await axios.get(
+          `${config.serverAddress}/users/town-councils-metadata`
+        );
         setTownCouncils(JSON.parse(res.data).townCouncils);
       } catch (error) {
         console.error("Failed to fetch town councils:", error);
@@ -67,8 +71,12 @@ const EventsPage: React.FC = () => {
   useEffect(() => {
     // Filter events based on selected criteria
     const filtered = events.filter((event) => {
-      const matchCategory = selectedCategory ? event.category === selectedCategory : true;
+      const matchCategory = selectedCategory
-      const matchTownCouncil = selectedTownCouncil ? event.location === selectedTownCouncil : true;
+        ? event.category === selectedCategory
+        : true;
+      const matchTownCouncil = selectedTownCouncil
+        ? event.location === selectedTownCouncil
+        : true;
       const matchTime = selectedTime ? event.time === selectedTime : true;
 
       return matchCategory && matchTownCouncil && matchTime;
@@ -99,15 +107,15 @@ const EventsPage: React.FC = () => {
 
           {townCouncils.length > 0 && (
             <select
-            value={selectedTownCouncil}
+              value={selectedTownCouncil}
-            onChange={(e) => setSelectedTownCouncil(e.target.value)}
+              onChange={(e) => setSelectedTownCouncil(e.target.value)}
             >
-            <option value="">All location</option>
+              <option value="">All location</option>
-            {townCouncils.map((townCouncil) => (
+              {townCouncils.map((townCouncil) => (
-              <option key={townCouncil} value={townCouncil}>
+                <option key={townCouncil} value={townCouncil}>
-                {townCouncil}
+                  {townCouncil}
-              </option>
+                </option>
-            ))}
+              ))}
             </select>
           )}
 
@@ -128,9 +136,7 @@ const EventsPage: React.FC = () => {
             <p className="text-gray-600">No events available.</p>
           ) : (
             filteredEvents.map((event) => (
-              <Card
+              <Card key={event.id}>
-                key={event.id}
-              >
                 <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
                   <h4 className="font-bold text-large">{event.title}</h4>
                 </CardHeader>
@@ -147,7 +153,7 @@ const EventsPage: React.FC = () => {
                   <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"
-                    onClick={() => navigate(`/event/${event.id}`)}
+                    onClick={() => navigate(`/events/view/${event.id}`)}
                   >
                     View event details
                   </Button>