From db955f44b2617f1494d775824190fce8bc372ebe Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Wed, 23 Jun 2021 15:12:36 -0400
Subject: [PATCH] add grouplist, eventstream

---
 src/components/NewUI/App.tsx         | 21 ++++++++++++++++-----
 src/components/NewUI/EventStream.tsx | 11 +++++++++++
 src/components/NewUI/Group.tsx       | 12 ++++++------
 src/components/NewUI/GroupList.tsx   | 20 ++++++++++++++++++++
 4 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 src/components/NewUI/EventStream.tsx
 create mode 100644 src/components/NewUI/GroupList.tsx

diff --git a/src/components/NewUI/App.tsx b/src/components/NewUI/App.tsx
index bebaf7e..821b2ab 100644
--- a/src/components/NewUI/App.tsx
+++ b/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>
 	);
diff --git a/src/components/NewUI/EventStream.tsx b/src/components/NewUI/EventStream.tsx
new file mode 100644
index 0000000..3c180a8
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/src/components/NewUI/Group.tsx b/src/components/NewUI/Group.tsx
index a508b19..b04aedd 100644
--- a/src/components/NewUI/Group.tsx
+++ b/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>
 	);
 	//
diff --git a/src/components/NewUI/GroupList.tsx b/src/components/NewUI/GroupList.tsx
new file mode 100644
index 0000000..1dc49ca
--- /dev/null
+++ b/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>
+	);
+}