include events in group query

src/components/Event/Event.tsx

@@ -154,7 +154,7 @@ export default function Event({
 			<UISecondaryBox>
 				<div style={{ textAlign: 'center' }}>
 					<UISecondaryHeader>{name}</UISecondaryHeader>
-					<GroupName group={group} />
+					{group && <GroupName group={group} />}
 				</div>
 				<EventDetails {...{ startTime, endTime, formattedAddress }} />
 				<UIButton

src/components/Group/Group.tsx

@@ -23,7 +23,7 @@ export default function Group({ group }: { group: IGroup }) {
 			<br />
 			<EventCreatorLink group={group} />
 			<br />
-			{events && events.length > 0 ? (
+			{group.events.length > 0 ? (
 				<EventStream events={group.events} />
 			) : (
 				<span>

src/components/Group/GroupPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
-import { getGroup, getGroupEvents } from '../api';
+import { getGroup } from '../api';
 import { IGroup } from '../types';
 import Group from './Group';
 
@@ -11,19 +11,16 @@ export default function GroupPage() {
 	const [group, setGroup] = useState<IGroup | null>(null);
 
 	useEffect(() => {
+		if (isNaN(+id)) {
+			setLoading(false);
+			return;
+		}
+
 		async function load() {
 			setLoading(true);
-			try {
+			getGroup(+id)
-				const group = await getGroup(+id);
+				.then(setGroup)
-				const events = await getGroupEvents(+id);
+				.finally(() => setLoading(false));
-
-				setGroup({ ...group, events });
-			} catch (e) {
-				console.error(e);
-				setGroup(null);
-			}
-
-			setLoading(false);
 		}
 
 		load();