X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fpages%2FEvents.js;fp=resources%2Fjs%2Fpages%2FEvents.js;h=dd24865cb17995ae58fc958f8cca7c4d1042c80e;hb=1e725fef6dc440aaeea8c30e1e0598dc5d24ad86;hp=0000000000000000000000000000000000000000;hpb=3544909490592e8c2387f3347ee5e12a8c0414be;p=alttp.git

diff --git a/resources/js/pages/Events.js b/resources/js/pages/Events.js
new file mode 100644
index 0000000..dd24865
--- /dev/null
+++ b/resources/js/pages/Events.js
@@ -0,0 +1,94 @@
+import axios from 'axios';
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
+
+import CanonicalLinks from '../components/common/CanonicalLinks';
+import ErrorBoundary from '../components/common/ErrorBoundary';
+import ErrorMessage from '../components/common/ErrorMessage';
+import Loading from '../components/common/Loading';
+import List from '../components/events/List';
+
+const Events = () => {
+	const { t } = useTranslation();
+
+	const [error, setError] = React.useState(null);
+	const [loading, setLoading] = React.useState(true);
+	const [events, setEvents] = React.useState([]);
+
+	const fetchEvents = React.useCallback(async (controller) => {
+		const params = {
+			order: 'recency',
+			with: ['description'],
+		};
+		try {
+			const response = await axios.get(`/api/events`, {
+				signal: controller.signal,
+				params,
+			});
+			return response.data || [];
+		} catch (error) {
+			if (!axios.isCancel(error)) {
+				throw error;
+			}
+			return [];
+		}
+	}, []);
+
+	React.useEffect(() => {
+		const controller = new AbortController();
+		setLoading(true);
+		fetchEvents(controller)
+			.then(events => {
+				setError(null);
+				setLoading(false);
+				setEvents(events);
+			})
+			.catch(error => {
+				setError(error);
+				setLoading(false);
+				setEvents([]);
+			});
+		return () => {
+			controller.abort();
+		};
+	}, [fetchEvents]);
+
+	const evergreen = React.useMemo(() =>
+		events.filter(event => !event.start)
+	, [events]);
+	const ongoing = React.useMemo(() =>
+		events.filter(event => event.start && !event.end)
+	, [events]);
+	const past = React.useMemo(() =>
+		events.filter(event => event.end)
+	, [events]);
+
+	if (loading) {
+		return <Loading />;
+	}
+
+	if (error) {
+		return <ErrorMessage error={error} />;
+	}
+
+	return <ErrorBoundary>
+		<Helmet>
+			<title>
+				{t('events.heading')}
+			</title>
+		</Helmet>
+		<CanonicalLinks base={`/events`} />
+		<Container>
+			<h1>{t('events.ongoing')}</h1>
+			<List events={ongoing} />
+			<h1>{t('events.evergreen')}</h1>
+			<List events={evergreen} />
+			<h1>{t('events.past')}</h1>
+			<List events={past} />
+		</Container>
+	</ErrorBoundary>;
+};
+
+export default Events;