added display particular event page

Yash-Ainapure · Oct 13, 2024 · 01d25b9 · 01d25b9
1 parent e066d22
commit 01d25b9
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 25 deletions.
diff --git a/backend/src/config/const.ts b/backend/src/config/const.ts
@@ -20,6 +20,7 @@ export const MESSAGES = {
     ERROR_CREATING_EVENT: "An error occurred while creating the event.",
     FETCH_EVENTS_SUCCESS: "Events fetched successfully.",
     UPDATE_EVENT_SUCCESS: "Event updated successfully.",
+    ERROR_FETCHING_EVENT: "An error occurred while fetching the single event.",
   },
   GENERIC: {
     INTERNAL_SERVER_ERROR: "Internal Server Error",

diff --git a/backend/src/controllers/event.controller.ts b/backend/src/controllers/event.controller.ts
@@ -150,3 +150,21 @@ export const createQuiz = async (req: Request, res: Response) => {
     res.status(500).json({ error: MESSAGES.QUIZ.ERROR_CREATING_QUIZ });
   }
 };
+
+export const getSingleEventData = async (req: Request, res: Response) => {
+  const eventId = Number(req.query.EventID);
+  try {
+    const event = await prisma.event.findUnique({
+      where: { EventID: eventId },
+    });
+    if (!event) {
+      logger.warn(`Event not found for EventID: ${eventId}`);
+      return res.status(404).json({ error: MESSAGES.EVENT.EVENT_NOT_FOUND });
+    }
+    logger.info(`Fetched event data for EventID: ${eventId}`);
+    res.json(event);
+  } catch (error) {
+    logger.error(`${MESSAGES.EVENT.ERROR_FETCHING_EVENT}: ${error}`);
+    res.status(500).json({ error: MESSAGES.EVENT.ERROR_FETCHING_EVENT });
+  }
+}
diff --git a/backend/src/routes/event.routes.ts b/backend/src/routes/event.routes.ts
@@ -5,6 +5,7 @@ import {
   updateEvent,
   createEvent,
   getAllEventData,
+  getSingleEventData,
 } from "../controllers/event.controller";
 
 const router = Router();
@@ -14,6 +15,8 @@ router.delete("/deleteEvent", deleteEvent);
 //get all events
 router.get("/getAllEventData", getAllEventData);
 
+router.get("/getSingleEventData", getSingleEventData);
+
 //get all events for a club
 router.get("/getClubEventData", getClubEventData);
 

diff --git a/frontend/src/appComponents/ClubAdmin.tsx b/frontend/src/appComponents/ClubAdmin.tsx
@@ -16,6 +16,7 @@ import Events from "./Events";
 import QuizCreation from "./QuizCreation";
 import AdminResults from "./AdminResults";
 import EventCreation from "./EventCreation";
+import ViewEvent from "./ViewEvent";
 
 export function ClubAdmin() {
   const { isLoggedIn, userData } = useAuth();
@@ -45,7 +46,7 @@ export function ClubAdmin() {
     },
     {
       label: "Hiring",
-      href: "/hiring/",
+      href: "/clubAdmin/hiring",
       icon: (
         <IconUserBolt className="flex-shrink-0 w-5 h-5 text-neutral-700 dark:text-neutral-200" />
       ),
@@ -110,23 +111,18 @@ export function ClubAdmin() {
         </SidebarBody>
       </Sidebar>
       <Routes>
-        <Route
-          path="/"
-          element={
-            <div className="bg-black">
-              <Events />
-            </div>
-          }
-        />
+        <Route path="/" element={<EventCreation />} />
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/events" element={<EventCreation />} />
+        <Route path="/event/:id" element={<ViewEvent />} />
         <Route path="/create-quiz" element={<QuizCreation />} />
         <Route path="/results/:id" element={<AdminResults />} />
+        <Route path="/hiring" element={<Dashboard />} />
       </Routes>
     </div>
   );
 }
-export const Logo = ({ userData }:any) => {
+export const Logo = ({ userData }: any) => {
   return (
     <Link
       to="/demo"
@@ -158,7 +154,7 @@ export const LogoIcon = () => {
 const Dashboard = () => {
   return (
     <div className="flex flex-1">
-      <div className="flex flex-col flex-1 w-full h-full gap-2 p-2 bg-slate-500 border md:p-10 rounded-tl-2xl border-neutral-200 dark:border-neutral-700 dark:bg-neutral-900">
+      <div className="flex flex-col flex-1 w-full h-full gap-2 p-2 border bg-slate-500 md:p-10 rounded-tl-2xl border-neutral-200 dark:border-neutral-700 dark:bg-neutral-900">
         <div className="flex gap-2">
           {[...new Array(4)].map((i) => (
             <div

diff --git a/frontend/src/appComponents/EventCreation.tsx b/frontend/src/appComponents/EventCreation.tsx
@@ -3,6 +3,7 @@ import { useForm } from "@tanstack/react-form";
 import type { FieldApi } from "@tanstack/react-form";
 import { useAuth } from "../context/AuthContext";
 import axios from "./axiosInstance";
+import { useNavigate } from "react-router-dom";
 
 // interface Event {
 //   ClubID: string;
@@ -31,6 +32,7 @@ const EventCreation: React.FC = () => {
   const [loading, setLoading] = useState({ state: false, id: null });
   const [updateOrSubmitState, setUpdateOrSubmitState] = useState(false);
   const [eventId, setEventId] = useState(null);
+  const navigate =useNavigate();
 
   const form = useForm({
     defaultValues: {
@@ -107,11 +109,13 @@ const EventCreation: React.FC = () => {
 
   useEffect(() => {
     const getEventsData = async () => {
+      console.log("fetching event data..")
       axios
         .get(
           `/api/events/getClubEventData?ClubID=${userData.club.ClubID}`,
         )
         .then((response) => {
+          console.log(response.data);
           setEventData(response.data);
         })
         .catch((error) => {
@@ -154,10 +158,10 @@ const EventCreation: React.FC = () => {
   };
 
   return (
-    <div className="w-full h-full bg-slate-500 rounded-tl-2xl p-2">
-      <div className="flex justify-around items-center flex-col gap-4 min-h-screen">
+    <div className="p-2 w-full bg-slate-500 rounded-tl-2xl">
+      <div className="flex flex-col items-center justify-around min-h-screen gap-4">
         <form
-          className="flex flex-col gap-4 p-4 border border-black rounded-xl items-center w-fit bg-slate-400"
+          className="flex flex-col items-center gap-4 p-4 border border-black rounded-xl w-fit bg-slate-400"
           onSubmit={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -368,21 +372,21 @@ const EventCreation: React.FC = () => {
             )}
           />
         </form>
-        <div className="flex flex-col gap-4 items-end">
-          <p className="text-white font-semibold text-lg pl-4 self-start">
+        <div className="flex flex-col items-end gap-4">
+          <p className="self-start pl-4 text-lg font-semibold text-white">
             Events Created by you:{" "}
           </p>
           <table>
             <thead>
               <tr>
-                <th className="bg-gray-300 py-2 pl-8 pr-2 rounded-tl-2xl">
+                <th className="py-2 pl-8 pr-2 bg-gray-300 rounded-tl-2xl">
                   EventName
                 </th>
-                <th className="bg-gray-300 p-2">Description</th>
-                <th className="bg-gray-300 p-2">StartDateTime</th>
-                <th className="bg-gray-300 p-2">EndDateTime</th>
-                <th className="bg-gray-300 p-2">Location</th>
-                <th className="bg-gray-300 py-2 pr-8 pl-2 rounded-tr-2xl">
+                <th className="p-2 bg-gray-300">Description</th>
+                <th className="p-2 bg-gray-300">StartDateTime</th>
+                <th className="p-2 bg-gray-300">EndDateTime</th>
+                <th className="p-2 bg-gray-300">Location</th>
+                <th className="py-2 pl-2 pr-8 bg-gray-300 rounded-tr-2xl">
                   Operations
                 </th>
               </tr>
@@ -393,14 +397,14 @@ const EventCreation: React.FC = () => {
                   className="border-b-2 bg-[#121b22] text-white"
                   key={event.id}
                 >
-                  <td className="px-2 border-r py-2">{event.EventName}</td>
+                  <td className="px-2 py-2 border-r">{event.EventName}</td>
                   <td className="px-2 border-r">{event.Description}</td>
                   <td className="px-2 border-r">{event.StartDateTime}</td>
                   <td className="px-2 border-r">{event.EndDateTime}</td>
                   <td className="px-2 border-r">{event.Location}</td>
                   <td className="flex gap-2 px-2 py-2">
                     <button
-                      className="text-red-500 cursor-pointer"
+                      className="text-red-700 cursor-pointer bg-white rounded-md px-2"
                       onClick={() => {
                         if (
                           confirm("Are you sure you want to delete this event?")
@@ -414,6 +418,7 @@ const EventCreation: React.FC = () => {
                         : "Delete"}
                     </button>
                     <button
+                    className="bg-white rounded-md text-black px-2"
                       onClick={(e) => {
                         e.preventDefault();
                         form.setFieldValue("EventName", event.EventName);
@@ -432,12 +437,15 @@ const EventCreation: React.FC = () => {
                     >
                       Update
                     </button>
+                    <button className="bg-white rounded-md text-black px-2" onClick={()=>{
+                      navigate(`/clubAdmin/event/${event.EventID}`)
+                    }}>View event state</button>
                   </td>
                 </tr>
               ))}
             </tbody>
           </table>
-          <button className="bg-black text-white font-semibold rounded-md p-1 w-36">
+          <button className="p-1 font-semibold text-white bg-black rounded-md w-36">
             {" "}
             Create new Event{" "}
           </button>

diff --git a/frontend/src/appComponents/ViewEvent.tsx b/frontend/src/appComponents/ViewEvent.tsx
@@ -0,0 +1,45 @@
+import { useNavigate, useParams,useHistory } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import axiosInstance from './axiosInstance';
+
+
+
+const ViewEvent = () => {
+  const { id } = useParams<{ id: string }>();
+  const [eventData, setEventData] = useState<any>(null);
+  const history = useHistory();
+
+  // const navigate = useNavigate();
+  useEffect(() => {
+    const fetchEventData = async () => {
+      try {
+        const response = await axiosInstance.get(`/api/events/getSingleEventData?EventID=${id}`);
+        console.log('Event data:', response.data);
+        setEventData(response.data);
+      } catch (error) {
+        console.error('Error fetching event data:', error);
+      }
+    };
+
+    if (id) {
+      fetchEventData();
+    }
+  }, [id]);
+  if (eventData === null) return <div>Loading...</div>
+  return (
+    <div className='rounded-tl-2xl p-2 w-full min-h-screen bg-emerald-500'>
+      <button onClick={()=>{
+        // navigate('/clubAdmin/events')
+        history.push('/clubAdmin/events');
+      }} className='absolute top-6 right-8 p-2 bg-white text-black font-semibold rounded-md block'>{"<-- Back"}</button>
+
+      ViewEvent
+      <p>ID:{eventData.EventID}</p>
+      <p> name: {eventData.EventName}</p>
+      <p>Description: {eventData.Description}</p>
+      <p>Location: {eventData.Location}</p>
+    </div>
+  )
+}
+
+export default ViewEvent