From 776d93acb3a6aca048d66ae72f01e950300acdd7 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Wed, 23 Jun 2021 14:35:30 -0400
Subject: [PATCH] add grouip creator

---
 src/components/NewUI/App.tsx          |  2 ++
 src/components/NewUI/EventCreator.tsx |  1 +
 src/components/NewUI/GroupCreator.tsx | 28 +++++++++++++++++++++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 src/components/NewUI/GroupCreator.tsx

diff --git a/src/components/NewUI/App.tsx b/src/components/NewUI/App.tsx
index cf857c1..bebaf7e 100644
--- a/src/components/NewUI/App.tsx
+++ b/src/components/NewUI/App.tsx
@@ -1,5 +1,6 @@
 import EventCreator from './EventCreator';
 import Group from './Group';
+import GroupCreator from './GroupCreator';
 import UIPrimaryTitle from './UIPrimaryTitle';
 
 export default function App() {
@@ -16,6 +17,7 @@ export default function App() {
 			}}
 		>
 			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
+			<GroupCreator />
 			<EventCreator />
 			<Group
 				events={[
diff --git a/src/components/NewUI/EventCreator.tsx b/src/components/NewUI/EventCreator.tsx
index ee1a451..fa9cf48 100644
--- a/src/components/NewUI/EventCreator.tsx
+++ b/src/components/NewUI/EventCreator.tsx
@@ -30,6 +30,7 @@ export default function EventCreator() {
 
 	return (
 		<UISecondaryBox style={{ width: '100%', boxSizing: 'border-box' }}>
+			<h1 style={{ textAlign: 'center' }}>Create Event</h1>
 			Name
 			<UITextInput value={name} onChangeText={setName} />
 			<br />
diff --git a/src/components/NewUI/GroupCreator.tsx b/src/components/NewUI/GroupCreator.tsx
new file mode 100644
index 0000000..eeda386
--- /dev/null
+++ b/src/components/NewUI/GroupCreator.tsx
@@ -0,0 +1,28 @@
+import React, { useCallback, useState } from 'react';
+import UIButton from './UIButton';
+import UISecondaryBox from './UISecondaryBox';
+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',
+			},
+		});
+	}, [name]);
+
+	return (
+		<UISecondaryBox style={{ width: '100%', boxSizing: 'border-box' }}>
+			<h1 style={{ textAlign: 'center' }}>Create Group</h1>
+			Name
+			<UITextInput onChangeText={setName} value={name} />
+			<UIButton onClick={createGroup}>Create group</UIButton>
+		</UISecondaryBox>
+	);
+}