make pool creation work

src/components/CreatePool.tsx

@@ -1,6 +1,5 @@
-import { FormEventHandler } from 'react';
 import { makeAPIPostCall } from '../api/utils';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 const CreatePool = () => {
 	const [title, setTitle] = useState('No Title');
@@ -10,34 +9,18 @@ const CreatePool = () => {
 	const [direction, setDirection] = useState('pickup');
 	const [type, setType] = useState('offer');
 	const [description, setDescription] = useState('');
+	const [group, setGroup] = useState('');
 
-	const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
-		e.preventDefault();
-
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`)
-			.then((response) => response.json())
-			.then((data) => {
-				console.log(data);
-			});
-	};
 	const onClick = () => {
-		console.log({
-			title: title,
-			description: description,
-			start_time: start,
-			end_time: end,
-			capacity,
-			direction,
-			type,
-		});
 		makeAPIPostCall('/pool', {
-			title: title,
-			description: description,
+			title,
+			description,
 			start_time: start,
 			end_time: end,
 			capacity,
 			direction,
 			type,
+			group_id: group,
 		});
 	};
 	useEffect(() => {}, []);
@@ -50,7 +33,6 @@ const CreatePool = () => {
 				className="container card card-body text-left "
 				style={{ backgroundColor: '#F1EAE8' }}
 			>
-				<form onSubmit={onSubmit}>
 				<div className="form-group">
 					<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
 						Create Pool
@@ -145,12 +127,21 @@ const CreatePool = () => {
 						placeholder="Enter text here..."
 					/>
 				</div>
-
+				<div className="form-group">
+					<label className="" htmlFor="pool_start">
+						Group:
+					</label>
+					<input
+						type="text"
+						className="form-control"
+						placeholder=""
+						onChange={(event) => setGroup(event.target.value)}
+					></input>
+				</div>
 				<button className="btn btn-success text-left" onClick={onClick}>
 					Submit
 				</button>
 				<br />
-				</form>
 			</div>
 		</div>
 	);

src/components/Group.tsx

@@ -74,7 +74,7 @@ export default function Group() {
 			}}
 		>
 			<Typography variant="h1" align="center">
-				Group {group.id}
+				{group.name}
 			</Typography>
 
 			<Typography variant="h3" align="center">