diff --git a/src/APIFunctions/SCEvents.js b/src/APIFunctions/SCEvents.js index 1f434a4b7..e29aa3426 100644 --- a/src/APIFunctions/SCEvents.js +++ b/src/APIFunctions/SCEvents.js @@ -2,10 +2,18 @@ import { ApiResponse } from './ApiResponses'; import config from '../config/config.json'; const SCEVENTS_API_URL = config.SCEvents?.BASE_URL || '/api/scevents'; -export async function getAllSCEvents() { + +export async function getAllSCEvents(token) { const status = new ApiResponse(); try { - const res = await fetch(`${SCEVENTS_API_URL}/events/`); + const headers = token + ? { Authorization: `Bearer ${token}` } + : {}; + + const res = await fetch(`${SCEVENTS_API_URL}/events/`, { + headers, + }); + const result = await res.json(); status.responseData = result; if (!res.ok) { @@ -18,10 +26,17 @@ export async function getAllSCEvents() { return status; } -export async function getEventByID(id) { +export async function getEventByID(id, token) { const status = new ApiResponse(); try { - const res = await fetch(`${SCEVENTS_API_URL}/events/${id}`); + const headers = token + ? { Authorization: `Bearer ${token}` } + : {}; + + const res = await fetch(`${SCEVENTS_API_URL}/events/${id}`, { + headers, + }); + const result = await res.json(); status.responseData = result; if (!res.ok) { diff --git a/src/Pages/Events/CalendarView.js b/src/Pages/Events/CalendarView.js index a3e04b4b4..ba49ce3de 100644 --- a/src/Pages/Events/CalendarView.js +++ b/src/Pages/Events/CalendarView.js @@ -143,6 +143,47 @@ function getBadgeText(event, isAdminView) { return ''; } +function getRegistrationStatus(event) { + return event?.registration_status || 'none'; +} + +function getRegistrationCta(event) { + const registrationStatus = getRegistrationStatus(event); + + switch (registrationStatus) { + case 'registered': + return { + label: 'Registered', + disabled: true, + className: 'border border-emerald-400/30 bg-emerald-500/10 text-emerald-200', + }; + case 'pending': + return { + label: 'Pending', + disabled: true, + className: 'border border-amber-400/30 bg-amber-500/10 text-amber-200', + }; + case 'waitlisted': + return { + label: 'On waitlist', + disabled: true, + className: 'border border-violet-400/30 bg-violet-500/10 text-violet-200', + }; + case 'rejected': + return { + label: 'Unavailable', + disabled: true, + className: 'border border-slate-500/40 bg-slate-700/40 text-slate-300', + }; + default: + return { + label: 'Register', + disabled: false, + className: '', + }; + } +} + // ─── icons ──────────────────────────────────────────────────────────────────── function ChevronLeft() { @@ -235,6 +276,7 @@ function EventPopup({ event, onClose, isAdminView, user }) { hasCapacityLimit && typeof attendeeCount === 'number' ? Math.max(maxAttendees - attendeeCount, 0) : null; + const registrationCta = getRegistrationCta(event); useEffect(() => { function onKey(e) { @@ -317,8 +359,8 @@ function EventPopup({ event, onClose, isAdminView, user }) { {event.name || 'Untitled Event'} - {badgeText && ( -
+
+ {badgeText && ( {badgeText} -
- )} + )} +
@@ -415,13 +457,24 @@ function EventPopup({ event, onClose, isAdminView, user }) {
)} - {!canEditEvent && event.status === 'published' && ( + {!canEditEvent && event.status === 'published' && registrationCta.disabled && ( +
+ {registrationCta.label} +
+ )} + + {!canEditEvent && event.status === 'published' && !registrationCta.disabled && ( - Register + {registrationCta.label} )} diff --git a/src/Pages/Events/EditEventPage.js b/src/Pages/Events/EditEventPage.js index b1c212d94..cc59f938c 100644 --- a/src/Pages/Events/EditEventPage.js +++ b/src/Pages/Events/EditEventPage.js @@ -70,7 +70,10 @@ export default function EditEventPage() { useEffect(() => { async function loadEvent() { setIsLoading(true); - const result = await getEventByID(id); + + const token = window.localStorage.getItem('jwtToken'); + const result = await getEventByID(id, token); + setIsLoading(false); if (result.error) { diff --git a/src/Pages/Events/Events.js b/src/Pages/Events/Events.js index bf949bb0e..cf99e787e 100644 --- a/src/Pages/Events/Events.js +++ b/src/Pages/Events/Events.js @@ -289,7 +289,8 @@ export default function EventsPage() { setIsLoading(true); setHasError(false); - const response = await getAllSCEvents(); + const token = window.localStorage.getItem('jwtToken'); + const response = await getAllSCEvents(token); if (!response.error) { setEvents(Array.isArray(response.responseData) ? response.responseData : []); diff --git a/src/Pages/Events/EventsRegistation.js b/src/Pages/Events/EventsRegistation.js index 83d0c7cc8..f04f7d09a 100644 --- a/src/Pages/Events/EventsRegistation.js +++ b/src/Pages/Events/EventsRegistation.js @@ -19,6 +19,38 @@ function ArrowLeftIcon() { ); } +function getRegistrationStatus(event) { + return event?.registration_status || 'none'; +} + +function StatusPanel({ title, message, borderClass, textClass, onBack }) { + return ( +
+
+
+
+
+ +
+
+

+ {title} +

+

+ {message} +

+ +
+
+
+ ); +} + export default function EventRegistration() { const { user } = useSCE(); const { id } = useParams(); @@ -32,13 +64,17 @@ export default function EventRegistration() { const [submitting, setSubmitting] = useState(false); const [attendeeCount, setAttendeeCount] = useState(null); const [attendanceLoading, setAttendanceLoading] = useState(false); + const registrationStatus = getRegistrationStatus(event); + const goBackToEvents = () => history.push('/events'); useEffect(() => { async function fetchEvent() { setIsLoading(true); setHasError(false); - const response = await getEventByID(id); + const token = window.localStorage.getItem('jwtToken'); + const response = await getEventByID(id, token); + if (!response.error && response.responseData) { setEvent(response.responseData); const initialData = {}; @@ -154,10 +190,13 @@ export default function EventRegistration() { setSubmitError(msg); return; } - setSubmitSuccess('Registration request sent successfully.'); - setTimeout(() => { - history.push('/events'); - }, 1200); + + setSubmitSuccess('Registration submitted successfully.'); + + const refreshed = await getEventByID(id, token); + if (!refreshed.error && refreshed.responseData) { + setEvent(refreshed.responseData); + } }; if (isLoading) { @@ -170,46 +209,74 @@ export default function EventRegistration() { if (hasError || !event) { return ( -
-
-

Failed to load event details.

- -
-
+ + ); + } + + if (registrationStatus === 'registered') { + return ( + + ); + } + + if (registrationStatus === 'pending') { + return ( + + ); + } + + if (registrationStatus === 'waitlisted') { + return ( + + ); + } + + if (registrationStatus === 'rejected') { + return ( + ); } // Block closed events if (event.status === 'closed') { return ( -
-
-
-
-
- -
-
-

- Registration Closed -

-

- This event is no longer accepting sign-ups, but more events are on the way 👀 -

- -
-
-
+ ); } @@ -230,7 +297,7 @@ export default function EventRegistration() {