add grouplist, eventstream

src/components/NewUI/App.tsx

@@ -1,9 +1,19 @@
-import EventCreator from './EventCreator';
-import Group from './Group';
+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 App() {
+	const [groups, setGroups] = useState<IGroup[]>([]);
+
+	useEffect(() => {
+		fetch('http://localhost:5000/api/groups')
+			.then((res) => res.json())
+			.then(setGroups);
+	}, []);
+
 	return (
 		<div
 			style={{
@@ -18,8 +28,10 @@ export default function App() {
 		>
 			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
 			<GroupCreator />
-			<EventCreator />
-			<Group
+			<h1>Groups</h1>
+			<GroupList groups={groups} />
+			<h1>Events</h1>
+			<EventStream
 				events={[
 					{
 						time: '11:00 AM to 2:45 PM',
@@ -34,7 +46,6 @@ export default function App() {
 						location: 'Dulles, Virginia',
 					},
 				]}
-				name="TJHSST 2022"
 			/>
 		</div>
 	);

src/components/NewUI/EventStream.tsx

@@ -0,0 +1,11 @@
+import Event, { IEvent } from './Event';
+
+export default function EventStream({ events }: { events: IEvent[] }) {
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+			{events.map((event) => (
+				<Event {...event} key={event.title} />
+			))}
+		</div>
+	);
+}

src/components/NewUI/Group.tsx

@@ -1,6 +1,9 @@
-import Event, { IEvent } from './Event';
+import { IEvent } from './Event';
+import EventCreator from './EventCreator';
+import EventStream from './EventStream';
 
 export type IGroup = {
+	id: number;
 	events: IEvent[];
 	name: string;
 };
@@ -8,12 +11,9 @@ export type IGroup = {
 export default function Group({ events, name }: IGroup) {
 	return (
 		<div style={{ textAlign: 'center', width: '100%' }}>
+			<EventCreator />
 			<h1>{name}</h1>
-			<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
-				{events.map((event) => (
-					<Event {...event} key={event.title} />
-				))}
-			</div>
+			<EventStream events={events} />
 		</div>
 	);
 	//

src/components/NewUI/GroupList.tsx

@@ -0,0 +1,20 @@
+import { IGroup } from './Group';
+import UISecondaryBox from './UISecondaryBox';
+
+function GroupListItem({ group }: { group: IGroup }) {
+	return (
+		<UISecondaryBox>
+			<h2 style={{ textAlign: 'center' }}>{group.name}</h2>
+		</UISecondaryBox>
+	);
+}
+
+export default function GroupList({ groups }: { groups: IGroup[] }) {
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+			{groups.map((group) => (
+				<GroupListItem group={group} key={group.id} />
+			))}
+		</div>
+	);
+}