add group page

src/components/NewUI/App.tsx

@@ -1,52 +1,20 @@
-import { useEffect, useState } from 'react';
-import EventStream from './EventStream';
-import { IGroup } from './Group';
-import GroupCreator from './GroupCreator';
-import GroupList from './GroupList';
-import UIPrimaryTitle from './UIPrimaryTitle';
+import WheelShare from './WheelShare';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
+
+const Group = lazy(() => import('./Group'));
 
 export default function App() {
-	const [groups, setGroups] = useState<IGroup[]>([]);
-
-	useEffect(() => {
-		fetch('http://localhost:5000/api/groups')
-			.then((res) => res.json())
-			.then(setGroups);
-	}, []);
-
 	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				alignItems: 'center',
-				width: '30rem',
-				maxWidth: '30rem',
-				marginLeft: 'auto',
-				marginRight: 'auto',
-			}}
-		>
-			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
-			<GroupCreator />
-			<h1>Groups</h1>
-			<GroupList groups={groups} />
-			<h1>Events</h1>
-			<EventStream
-				events={[
-					{
-						time: '11:00 AM to 2:45 PM',
-						title: 'TJ Track Regional Meet',
-						group: 'TJHSST Track and Field',
-						location: 'Ashburn, Virginia',
-					},
-					{
-						time: '5:00 PM to 8:00 PM',
-						title: 'End of Year Party',
-						group: 'TJHSST 2022',
-						location: 'Dulles, Virginia',
-					},
-				]}
-			/>
+		<div style={{ padding: '1rem' }}>
+			<BrowserRouter>
+				<Switch>
+					<Route path="/" exact component={WheelShare} />
+					<Suspense fallback={null}>
+						<Route path="/groups/:id" component={Group} />
+					</Suspense>
+				</Switch>
+			</BrowserRouter>
 		</div>
 	);
 }

src/components/NewUI/EventCreator.tsx

@@ -1,42 +1,41 @@
 import { useCallback, useState } from 'react';
+import { post } from './api';
+import { IGroup } from './Group';
 import UIButton from './UIButton';
 import UIDatetimeInput from './UIDatetimeInput';
 import UIPlacesAutocomplete from './UIPlacesAutocomplete';
 import UISecondaryBox from './UISecondaryBox';
 import UITextInput from './UITextInput';
 
-export default function EventCreator() {
+export default function EventCreator({ group }: { group: IGroup }) {
 	const [name, setName] = useState('');
 	const [startTime, setStartTime] = useState<Date | null>(null);
 	const [endTime, setEndTime] = useState<Date | null>(null);
 	const [placeId, setPlaceId] = useState<string | null>(null);
-	const [groupId, setGroupId] = useState('');
 
 	const createEvent = useCallback(() => {
-		fetch('http://localhost:5000/api/events', {
-			method: 'post',
-			body: JSON.stringify({
-				name,
-				startTime,
-				endTime,
-				groupId,
-				placeId,
-			}),
-			headers: {
-				'Content-Type': 'application/json',
-			},
-		});
-	}, [name, startTime, endTime, groupId, placeId]);
+		post('/events', {
+			name,
+			startTime,
+			endTime,
+			groupId: group.id,
+			placeId,
+		})
+			.then((response) => response.json())
+			.then(({ id }) => {
+				window.location.href = `/groups/${id}`;
+			});
+	}, [name, startTime, endTime, group.id, placeId]);
 
 	return (
 		<UISecondaryBox style={{ width: '100%', boxSizing: 'border-box' }}>
-			<h1 style={{ textAlign: 'center' }}>Create Event</h1>
+			<h1 style={{ textAlign: 'center', marginBottom: '0.5rem' }}>
+				Create Event
+			</h1>
+			<h3 style={{ textAlign: 'center', marginTop: '0.5rem' }}>{group.name}</h3>
 			Name
 			<UITextInput value={name} onChangeText={setName} />
 			<br />
-			Group
-			<UITextInput value={groupId} onChangeText={setGroupId} />
-			<br />
 			Start time
 			<UIDatetimeInput onChangedDate={setStartTime} />
 			<br />

src/components/NewUI/Group.tsx

@@ -1,3 +1,6 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router';
+import { Link } from 'react-router-dom';
 import { IEvent } from './Event';
 import EventCreator from './EventCreator';
 import EventStream from './EventStream';
@@ -8,13 +11,51 @@ export type IGroup = {
 	name: string;
 };
 
-export default function Group({ events, name }: IGroup) {
+export default function Group() {
+	const { id } = useParams<{ id: string }>();
+	const [loading, setLoading] = useState(true);
+	const [group, setGroup] = useState<IGroup | null>(null);
+	const [events, setEvents] = useState<IEvent[]>([]);
+
+	useEffect(() => {
+		setLoading(true);
+		fetch('http://localhost:5000/api/groups/' + id)
+			.then((response) => response.json())
+			.then(setGroup)
+			.finally(() => setLoading(false));
+
+		fetch('http://localhost:5000/api/groups/' + id + '/events')
+			.then((response) => response.json())
+			.then(setEvents);
+	}, [id]);
+
+	if (!group && !loading) {
+		return (
+			<div style={{ textAlign: 'center' }}>
+				<h1>Group Not Found</h1>
+				<Link to="/">Home</Link>
+			</div>
+		);
+	}
+
+	if (!group) {
+		return null;
+	}
+
+	const { name } = group;
+
 	return (
-		<div style={{ textAlign: 'center', width: '100%' }}>
-			<EventCreator />
+		<div
+			style={{
+				textAlign: 'center',
+				maxWidth: '30rem',
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			}}
+		>
 			<h1>{name}</h1>
+			<EventCreator group={group} />
 			<EventStream events={events} />
 		</div>
 	);
-	//
 }

src/components/NewUI/GroupCreator.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import { post } from './api';
 import UIButton from './UIButton';
 import UISecondaryBox from './UISecondaryBox';
 import UITextInput from './UITextInput';
@@ -6,14 +7,8 @@ import UITextInput from './UITextInput';
 export default function GroupCreator() {
 	const [name, setName] = useState('');
 	const createGroup = useCallback(() => {
-		fetch('http://localhost:5000/api/groups', {
-			method: 'post',
-			body: JSON.stringify({
-				name,
-			}),
-			headers: {
-				'Content-Type': 'application/json',
-			},
+		post('/groups', {
+			name,
 		});
 	}, [name]);
 

src/components/NewUI/GroupList.tsx

@@ -4,7 +4,17 @@ import UISecondaryBox from './UISecondaryBox';
 function GroupListItem({ group }: { group: IGroup }) {
 	return (
 		<UISecondaryBox>
-			<h2 style={{ textAlign: 'center' }}>{group.name}</h2>
+			<h2
+				style={{
+					textAlign: 'center',
+					cursor: 'pointer',
+				}}
+				onClick={() => {
+					window.location.href = `/groups/${group.id}`;
+				}}
+			>
+				{group.name}
+			</h2>
 		</UISecondaryBox>
 	);
 }

src/components/NewUI/WheelShare.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import EventStream from './EventStream';
+import { IGroup } from './Group';
+import GroupCreator from './GroupCreator';
+import GroupList from './GroupList';
+import UIPrimaryTitle from './UIPrimaryTitle';
+
+export default function WheelShare() {
+	const [groups, setGroups] = useState<IGroup[]>([]);
+
+	useEffect(() => {
+		fetch('http://localhost:5000/api/groups')
+			.then((res) => res.json())
+			.then(setGroups);
+	}, []);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				width: '30rem',
+				maxWidth: '30rem',
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			}}
+		>
+			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
+			<GroupCreator />
+			<h1>Groups</h1>
+			<GroupList groups={groups} />
+			<h1>Events</h1>
+			<EventStream
+				events={[
+					{
+						time: '11:00 AM to 2:45 PM',
+						title: 'TJ Track Regional Meet',
+						group: 'TJHSST Track and Field',
+						location: 'Ashburn, Virginia',
+					},
+					{
+						time: '5:00 PM to 8:00 PM',
+						title: 'End of Year Party',
+						group: 'TJHSST 2022',
+						location: 'Dulles, Virginia',
+					},
+				]}
+			/>
+		</div>
+	);
+}

src/components/NewUI/api.ts

@@ -0,0 +1,9 @@
+export function post(path: string, data: any) {
+	return fetch('http://localhost:5000/api' + path, {
+		method: 'post',
+		body: JSON.stringify(data),
+		headers: {
+			'Content-Type': 'application/json',
+		},
+	});
+}