Skip to content

Commit c795c1d

Browse files
harshitap1305harshitap1305
authored
Merge pull request #142 from satyansh911/feat/event-cards
Modified Frontend of Events Page
2 parents 01d7805 + 9dc0499 commit c795c1d

4 files changed

Lines changed: 70 additions & 65 deletions

File tree

‎backend/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,4 @@
6868
"parser": "^0.1.4",
6969
"prettier": "^3.1.1"
7070
}
71-
}
71+
}

‎frontend/.env.example‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
REACT_APP_BACKEND_URL=http://localhost:8000
2-
REACT_APP_FRONTEND_URL=http://localhost:3000
2+
REACT_APP_FRONTEND_URL=http://localhost:3000

‎frontend/eslint.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,4 @@ export default [
2525
},
2626
// ... others are omitted for brevity
2727
},
28-
];
28+
];

‎frontend/src/Components/Events/EventList.jsx‎

Lines changed: 67 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const EventList = () => {
2828

2929
useEffect(() => {
3030
const fetchEvents = async () => {
31-
if (!userRole) {return;}
31+
if (!userRole) return;
3232

3333
try {
3434
setLoading(true);
@@ -69,16 +69,16 @@ const EventList = () => {
6969
const handleRoomRequestSubmit = (updatedEvent) => {
7070
setEvents((prevEvents) =>
7171
prevEvents.map((event) =>
72-
event._id === updatedEvent._id ? updatedEvent : event,
73-
),
72+
event._id === updatedEvent._id ? updatedEvent : event
73+
)
7474
);
7575
};
7676

7777
const handleManageUpdate = (updatedEvent) => {
7878
setEvents((prevEvents) =>
7979
prevEvents.map((event) =>
80-
event._id === updatedEvent._id ? updatedEvent : event,
81-
),
80+
event._id === updatedEvent._id ? updatedEvent : event
81+
)
8282
);
8383
};
8484

@@ -131,10 +131,10 @@ const EventList = () => {
131131
case "STUDENT":
132132
return (
133133
<div className="flex gap-2">
134-
<button className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
134+
<button className="px-3 py-1.5 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-colors">
135135
Register
136136
</button>
137-
<button className="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
137+
<button className="px-3 py-1.5 border border-gray-300 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-50 transition-colors">
138138
View Details
139139
</button>
140140
</div>
@@ -150,14 +150,14 @@ const EventList = () => {
150150
<div className="flex flex-wrap gap-2">
151151
<button
152152
onClick={() => setEditingEvent(event)}
153-
className="px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 transition-colors"
153+
className="px-3 py-1.5 bg-yellow-600 text-white text-sm font-medium rounded-md hover:bg-yellow-700 transition-colors"
154154
>
155155
Edit
156156
</button>
157157

158158
{userRole !== "PRESIDENT" && canRequestRoom() && (
159159
<button
160-
className="px-4 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700 transition-colors"
160+
className="px-3 py-1.5 bg-teal-600 text-white text-sm font-medium rounded-md hover:bg-teal-700 transition-colors"
161161
onClick={() => handleOpenModal(event._id)}
162162
>
163163
Request Room
@@ -166,12 +166,12 @@ const EventList = () => {
166166

167167
{userRole === "PRESIDENT" && (
168168
<>
169-
<button className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors">
169+
<button className="px-3 py-1.5 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 transition-colors">
170170
Review Event
171171
</button>
172172
<button
173173
onClick={() => setSelectedEventForManage(event)}
174-
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
174+
className="px-3 py-1.5 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 transition-colors"
175175
>
176176
Manage Requests
177177
</button>
@@ -201,30 +201,30 @@ const EventList = () => {
201201
}
202202

203203
return (
204-
<div className="mt-4 p-3 bg-gray-50 rounded-lg">
205-
<h4 className="font-medium text-sm text-gray-900 mb-2">
204+
<div className="mt-3 p-2 bg-[#f7f5dc] rounded-md border border-gray-200">
205+
<h4 className="font-semibold text-sm text-gray-900 mb-2">
206206
Room Requests
207207
</h4>
208-
<div className="space-y-2">
208+
<div className="space-y-1.5">
209209
{event.room_requests.map((request, index) => (
210210
<div
211211
key={index}
212-
className="flex items-center justify-between text-sm"
212+
className="flex items-center justify-between text-xs text-gray-700"
213213
>
214-
<div className="flex items-center gap-2">
214+
<div className="flex items-center gap-1.5">
215215
{getRoomRequestStatusIcon(request.status)}
216216
<span>{request.room}</span>
217217
<span className="text-gray-500">
218218
{formatDate(request.date)} at {request.time}
219219
</span>
220220
</div>
221221
<span
222-
className={`px-2 py-1 rounded-full text-xs ${
222+
className={`px-2 py-0.5 rounded-full text-[11px] ${
223223
request.status === "Approved"
224224
? "bg-green-100 text-green-800"
225225
: request.status === "Rejected"
226-
? "bg-red-100 text-red-800"
227-
: "bg-yellow-100 text-yellow-800"
226+
? "bg-red-100 text-red-800"
227+
: "bg-yellow-100 text-yellow-800"
228228
}`}
229229
>
230230
{request.status}
@@ -238,7 +238,7 @@ const EventList = () => {
238238

239239
if (loading) {
240240
return (
241-
<div className="flex justify-center items-center h-64">
241+
<div className="flex justify-center items-center h-64 bg-[#FDFAE2]">
242242
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
243243
</div>
244244
);
@@ -255,83 +255,88 @@ const EventList = () => {
255255

256256
return (
257257
<>
258-
<div className="max-w-7xl mx-auto p-6">
259-
<div className="mb-4">
260-
<p>Events at IIT Bhilai</p>
261-
</div>
262-
263-
{events.length === 0 ? (
264-
<div className="text-center py-12">
265-
<Calendar className="w-16 h-16 text-gray-300 mx-auto mb-4" />
266-
<h3 className="text-lg font-medium text-gray-900 mb-2">
267-
No events found
268-
</h3>
269-
<p className="text-gray-600">
270-
There are no events to display for your role.
258+
<div className="min-h-screen bg-[#FDFAE2] text-gray-800 font-[Inter]">
259+
<div className="max-w-7xl mx-auto p-6">
260+
<div className="mb-6">
261+
<h1 className="text-2xl font-bold tracking-tight text-gray-900">
262+
Events at IIT Bhilai
263+
</h1>
264+
<p className="text-gray-600 text-sm mt-1">
265+
Stay updated with institute-wide events and club activities.
271266
</p>
272267
</div>
273-
) : (
274-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
275-
{events.map((event) => (
276-
<div
277-
key={event._id}
278-
className="bg-white rounded-lg shadow-md border border-gray-200 hover:shadow-lg flex flex-col"
279-
>
280-
<div className="p-6 flex-grow">
281-
<div className="flex justify-between items-start mb-3">
282-
<h3 className="text-xl font-semibold text-gray-900 line-clamp-2">
268+
269+
{events.length === 0 ? (
270+
<div className="text-center py-16">
271+
<Calendar className="w-16 h-16 text-gray-300 mx-auto mb-4" />
272+
<h3 className="text-lg font-semibold text-gray-900 mb-2">
273+
No events found
274+
</h3>
275+
<p className="text-gray-600 text-sm">
276+
There are no events to display for your role.
277+
</p>
278+
</div>
279+
) : (
280+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
281+
{events.map((event) => (
282+
<div
283+
key={event._id}
284+
className="bg-white rounded-lg shadow-md border border-gray-100 hover:shadow-lg transition-all duration-200 flex flex-col p-4"
285+
>
286+
<div className="flex justify-between items-start mb-2">
287+
<h3 className="text-lg font-semibold text-gray-900 line-clamp-2">
283288
{event.title}
284289
</h3>
285290
<span
286-
className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(
287-
event.status,
291+
className={`px-2 py-0.5 rounded-full text-[11px] font-medium ${getStatusColor(
292+
event.status
288293
)}`}
289294
>
290295
{event.status}
291296
</span>
292297
</div>
293298

294-
<p className="text-gray-600 mb-4 line-clamp-3">
299+
<p className="text-gray-600 text-sm mb-3 line-clamp-3">
295300
{event.description}
296301
</p>
297302

298-
<div className="space-y-2 mb-4">
303+
<div className="space-y-1.5 mb-3 text-sm text-gray-700">
299304
{event.schedule?.start && (
300-
<div className="flex items-center text-sm text-gray-600">
301-
<Calendar className="w-4 h-4 mr-2" />
305+
<div className="flex items-center">
306+
<Calendar className="w-4 h-4 mr-1.5 text-gray-500" />
302307
<span>{formatDate(event.schedule.start)}</span>
303308
</div>
304309
)}
305310
{event.schedule?.start && (
306-
<div className="flex items-center text-sm text-gray-600">
307-
<Clock className="w-4 h-4 mr-2" />
311+
<div className="flex items-center">
312+
<Clock className="w-4 h-4 mr-1.5 text-gray-500" />
308313
<span>{formatTime(event.schedule.start)}</span>
309314
</div>
310315
)}
311316
{event.schedule?.venue && (
312-
<div className="flex items-center text-sm text-gray-600">
313-
<MapPin className="w-4 h-4 mr-2" />
317+
<div className="flex items-center">
318+
<MapPin className="w-4 h-4 mr-1.5 text-gray-500" />
314319
<span>{event.schedule.venue}</span>
315320
</div>
316321
)}
317322
</div>
318323

319324
{renderRoomRequests(event)}
320-
</div>
321325

322-
<div className="p-6 pt-4 border-t border-gray-200 bg-gray-50">
323-
{renderActionButtons(event)}
326+
<div className="mt-auto pt-3 border-t border-gray-100">
327+
{renderActionButtons(event)}
328+
</div>
324329
</div>
325-
</div>
326-
))}
327-
</div>
328-
)}
330+
))}
331+
</div>
332+
)}
333+
</div>
329334
</div>
330335

331-
{/* EventForm modal for editing */}
336+
{/* EventForm Modal */}
332337
{editingEvent && (
333338
<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-start pt-10 z-50 overflow-y-auto">
334-
<div className="bg-white rounded-xl w-full max-w-4xl p-4 relative my-8">
339+
<div className="bg-white rounded-xl w-full max-w-4xl p-4 relative my-8 shadow-lg">
335340
<button
336341
className="absolute top-2 right-2 text-gray-700 font-bold"
337342
onClick={() => setEditingEvent(null)}

0 commit comments

Comments
 (0)