diff --git a/src/APIFunctions/SCEvents.js b/src/APIFunctions/SCEvents.js new file mode 100644 index 000000000..154d6e9d6 --- /dev/null +++ b/src/APIFunctions/SCEvents.js @@ -0,0 +1,29 @@ +import { ApiResponse } from './ApiResponses'; + +const SCEVENTS_API_URL = 'http://localhost:8080'; + +export async function getAllSCEvents() { + let status = new ApiResponse(); + + try { + const url = new URL('/events/', SCEVENTS_API_URL); + const res = await fetch(url.href, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (res.ok) { + const result = await res.json(); + status.responseData = result; + } else { + status.error = true; + } + } catch (err) { + status.error = true; + status.responseData = err; + } + + return status; +} diff --git a/src/Pages/Events/Events.js b/src/Pages/Events/Events.js index 0da2fb2ff..9e0ad3db7 100644 --- a/src/Pages/Events/Events.js +++ b/src/Pages/Events/Events.js @@ -1,8 +1,159 @@ - +import React, { useEffect, useState } from 'react'; import config from '../../config/config.json'; -import NotFoundPage from '../NotFoundPage/NotFoundPage.js'; import { Redirect } from 'react-router-dom'; +import { getAllSCEvents } from '../../APIFunctions/SCEvents'; + +function CalendarIcon() { + return ( + + ); +} + +function PinIcon() { + return ( + + ); +} + +function EventCard({ event }) { + return ( +
+

+ {event.name || 'Untitled Event'} +

+ +
+ {(event.date || event.time) && ( +
+ + + + {[event.date, event.time].filter(Boolean).join(' ยท ')} +
+ )} + + {event.location && ( +
+ + + + {event.location} +
+ )} +
+ + {event.description && ( +

+ {event.description} +

+ )} +
+ ); +} export default function EventsPage() { - return config.SCEvents.ENABLED ?

Events Page

: ; + const [events, setEvents] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const [hasError, setHasError] = useState(false); + const isSCEventsEnabled = config.SCEvents?.ENABLED; + + useEffect(() => { + if (!isSCEventsEnabled) { + return; + } + + async function fetchEvents() { + setIsLoading(true); + setHasError(false); + + const response = await getAllSCEvents(); + + if (!response.error) { + setEvents(Array.isArray(response.responseData) ? response.responseData : []); + } else { + setHasError(true); + } + + setIsLoading(false); + } + + fetchEvents(); + }, [isSCEventsEnabled]); + + if (!isSCEventsEnabled) { + return ; + } + + return ( +
+
+
+
+
+ +
+

+ SCEvents +

+ +
+ +

+ Discover upcoming SCE events and activities. +

+
+ +
+ {isLoading && ( +
+ Loading events... +
+ )} + + {!isLoading && hasError && ( +
+ Failed to load events. Please make sure SCEvents is running locally. +
+ )} + + {!isLoading && !hasError && events.length === 0 && ( +
+ No events available right now. +
+ )} + + {!isLoading && !hasError && events.length > 0 && ( +
+ {events.map((event) => ( + + ))} +
+ )} +
+
+ ); }