From 6cd56843b442912d99969681eaf80febb69bf285 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sat, 10 Apr 2021 21:17:50 -0400
Subject: [PATCH] make pool creation work

---
 src/components/CreatePool.tsx | 237 ++++++++++++++++------------------
 src/components/Group.tsx      |   2 +-
 2 files changed, 115 insertions(+), 124 deletions(-)

diff --git a/src/components/CreatePool.tsx b/src/components/CreatePool.tsx
index d1c9aca..64a5c2e 100644
--- a/src/components/CreatePool.tsx
+++ b/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,107 +33,115 @@ 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
-						</h1>
-						<label className="" htmlFor="title">
-							Pool Title:{' '}
-						</label>
-						<input
-							type="text"
-							id="title"
-							name="title"
-							className="form-control d-flex"
-							placeholder="Enter title here..."
-							onChange={(event) => setTitle(event.target.value)}
-						></input>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="capacity">
-							Pool Capacity:
-						</label>
-						<input
-							type="number"
-							id="capacity"
-							name="capacity"
-							className="form-control d-flex"
-							placeholder="0"
-							onChange={(event) => setCapacity(parseInt(event.target.value))}
-						></input>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="pool_start">
-							Start Time:
-						</label>
-						<input
-							type="datetime-local"
-							id="pool_start"
-							name="pool_start"
-							className="form-control"
-							placeholder=""
-							onChange={(event) => setStart(event.target.value)}
-						></input>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="pool_end">
-							End Time:
-						</label>
-						<input
-							type="datetime-local"
-							id="pool_end"
-							name="pool_end"
-							className="form-control"
-							placeholder="Enter text here..."
-							onChange={(event) => setEnd(event.target.value)}
-						></input>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="pool_direction">
-							Direction:
-						</label>
-						<select
-							id="direction"
-							name="direction"
-							onChange={(event) => setDirection(event.target.value)}
-						>
-							<option value="pickup">Picking Up</option>
-							<option value="dropoff">Dropping Off</option>
-						</select>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="pool_type">
-							Type:
-						</label>
-						<select
-							id="type"
-							name="type"
-							onChange={(event) => setType(event.target.value)}
-						>
-							<option value="offer">Offering carpool</option>
-							<option value="request">Requesting carpooll</option>
-						</select>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="title">
-							Pool Description:
-						</label>
-						<textarea
-							onChange={(event) => setDescription(event.target.value)}
-							id="Pool-text"
-							name="Pool-text"
-							style={{ height: '200px' }}
-							className="form-control"
-							placeholder="Enter text here..."
-						/>
-					</div>
-
-					<button className="btn btn-success text-left" onClick={onClick}>
-						Submit
-					</button>
-					<br />
-				</form>
+				<div className="form-group">
+					<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
+						Create Pool
+					</h1>
+					<label className="" htmlFor="title">
+						Pool Title:{' '}
+					</label>
+					<input
+						type="text"
+						id="title"
+						name="title"
+						className="form-control d-flex"
+						placeholder="Enter title here..."
+						onChange={(event) => setTitle(event.target.value)}
+					></input>
+				</div>
+				<div className="form-group">
+					<label className="" htmlFor="capacity">
+						Pool Capacity:
+					</label>
+					<input
+						type="number"
+						id="capacity"
+						name="capacity"
+						className="form-control d-flex"
+						placeholder="0"
+						onChange={(event) => setCapacity(parseInt(event.target.value))}
+					></input>
+				</div>
+				<div className="form-group">
+					<label className="" htmlFor="pool_start">
+						Start Time:
+					</label>
+					<input
+						type="datetime-local"
+						id="pool_start"
+						name="pool_start"
+						className="form-control"
+						placeholder=""
+						onChange={(event) => setStart(event.target.value)}
+					></input>
+				</div>
+				<div className="form-group">
+					<label className="" htmlFor="pool_end">
+						End Time:
+					</label>
+					<input
+						type="datetime-local"
+						id="pool_end"
+						name="pool_end"
+						className="form-control"
+						placeholder="Enter text here..."
+						onChange={(event) => setEnd(event.target.value)}
+					></input>
+				</div>
+				<div className="form-group">
+					<label className="" htmlFor="pool_direction">
+						Direction:
+					</label>
+					<select
+						id="direction"
+						name="direction"
+						onChange={(event) => setDirection(event.target.value)}
+					>
+						<option value="pickup">Picking Up</option>
+						<option value="dropoff">Dropping Off</option>
+					</select>
+				</div>
+				<div className="form-group">
+					<label className="" htmlFor="pool_type">
+						Type:
+					</label>
+					<select
+						id="type"
+						name="type"
+						onChange={(event) => setType(event.target.value)}
+					>
+						<option value="offer">Offering carpool</option>
+						<option value="request">Requesting carpooll</option>
+					</select>
+				</div>
+				<div className="form-group">
+					<label className="" htmlFor="title">
+						Pool Description:
+					</label>
+					<textarea
+						onChange={(event) => setDescription(event.target.value)}
+						id="Pool-text"
+						name="Pool-text"
+						style={{ height: '200px' }}
+						className="form-control"
+						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 />
 			</div>
 		</div>
 	);
diff --git a/src/components/Group.tsx b/src/components/Group.tsx
index a2cef80..b6f4b89 100644
--- a/src/components/Group.tsx
+++ b/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">