From b0c03b4887b8ec187aeeba6f05e6d4dfbfd49bfa Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sun, 11 Apr 2021 10:19:38 -0400
Subject: [PATCH] Integrate CreatePool into the Group page

---
 src/App.tsx                   |   2 -
 src/components/CreatePool.tsx | 128 ++++++++++++++++------------------
 src/components/Group.tsx      |  55 ++++++++-------
 src/components/Groups.tsx     |  20 ------
 4 files changed, 91 insertions(+), 114 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 552fad2..8afc18d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,6 @@ import Nav from './components/Nav';
 import Group from './components/Group';
 import Pool from './components/Pool';
 import Profile from './components/Profile';
-import CreatePool from './components/CreatePool';
 import CreateGroup from './components/CreateGroup';
 import Groups from './components/Groups';
 import MyGroups from './components/MyGroups';
@@ -26,7 +25,6 @@ function App() {
 				<Switch>
 					<Route component={Main} path="/about" />
 					<Route component={Authenticator} path="/auth/:provider/callback" />
-					<Route component={CreatePool} path="/create_pool" />
 					<Route component={CreateGroup} path="/create_group" />
 					<Route component={MyGroups} path="/mygroups" />
 					<Route component={UpdatePool} path="/update_pool" />
diff --git a/src/components/CreatePool.tsx b/src/components/CreatePool.tsx
index 3dc71ed..b473351 100644
--- a/src/components/CreatePool.tsx
+++ b/src/components/CreatePool.tsx
@@ -8,11 +8,7 @@ import { searchForPlaces } from '../api/google';
 import { makeAPIPostCall, makeAPIGetCall } from '../api/utils';
 import { useHistory } from 'react-router-dom';
 
-import { makeAPIPostCall } from '../api/utils';
-import PlacesAutocomplete, {
-	geocodeByAddress,
-	getLatLng,
-} from 'react-places-autocomplete';
+import PlacesAutocomplete from 'react-places-autocomplete';
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -26,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-const CreatePool = () => {
+const CreatePool = ({ groupID }: { groupID?: string }) => {
 	const history = useHistory();
 	const [title, setTitle] = useState('No Title');
 	const [capacity, setCapacity] = useState(0);
@@ -188,6 +184,7 @@ const CreatePool = () => {
 							name="group-select"
 							id="group-select"
 							onChange={(event) => setGroup(event.target.value)}
+							defaultValue={groupID}
 						>
 							<option value="">Select a group</option>
 							{groups.map((group) => (
@@ -218,67 +215,66 @@ const CreatePool = () => {
 						>
 							Search
 						</button>
-							<PlacesAutocomplete
-								value={address}
-								onChange={handleChange}
-								onSelect={handleSelect}
-							>
-								{({
-									getInputProps,
-									suggestions,
-									getSuggestionItemProps,
-									loading,
-								}) => (
-									<div>
-										<label className="" htmlFor="address">
-											Address:
-										</label>
-										<input
-											name="address"
-											id="address"
-											{...getInputProps({
-												placeholder: 'Search Places ...',
-												className: 'location-search-input form-control',
-											})}
-										/>
-										<div className="autocomplete-dropdown-container">
-											{loading && <div>Loading...</div>}
-											{suggestions.map((suggestion) => {
-												const className = suggestion.active
-													? 'suggestion-item--active'
-													: 'suggestion-item';
-												// inline style for demonstration purpose
-												const style = suggestion.active
-													? { backgroundColor: '#fafafa', cursor: 'pointer' }
-													: { backgroundColor: '#ffffff', cursor: 'pointer' };
-												return (
-													<div
-														{...getSuggestionItemProps(suggestion, {
-															className,
-															style,
-														})}
-													>
-														<span>{suggestion.description}</span>
-													</div>
-												);
-											})}
-										</div>
-									</div>
-								)}
-							</PlacesAutocomplete>
-						</div>
-						<Button
-							variant="contained"
-							color="primary"
-							className={classes.button}
-							onClick={onClick}
-							startIcon={<CloudUploadIcon />}
+						<PlacesAutocomplete
+							value={address}
+							onChange={handleChange}
+							onSelect={handleSelect}
 						>
-							Submit
-						</Button>
-					</CardContent>
-				</Card>
-			</div>
+							{({
+								getInputProps,
+								suggestions,
+								getSuggestionItemProps,
+								loading,
+							}) => (
+								<div>
+									<label className="" htmlFor="address">
+										Address:
+									</label>
+									<input
+										name="address"
+										id="address"
+										{...getInputProps({
+											placeholder: 'Search Places ...',
+											className: 'location-search-input form-control',
+										})}
+									/>
+									<div className="autocomplete-dropdown-container">
+										{loading && <div>Loading...</div>}
+										{suggestions.map((suggestion) => {
+											const className = suggestion.active
+												? 'suggestion-item--active'
+												: 'suggestion-item';
+											// inline style for demonstration purpose
+											const style = suggestion.active
+												? { backgroundColor: '#fafafa', cursor: 'pointer' }
+												: { backgroundColor: '#ffffff', cursor: 'pointer' };
+											return (
+												<div
+													{...getSuggestionItemProps(suggestion, {
+														className,
+														style,
+													})}
+												>
+													<span>{suggestion.description}</span>
+												</div>
+											);
+										})}
+									</div>
+								</div>
+							)}
+						</PlacesAutocomplete>
+					</div>
+					<Button
+						variant="contained"
+						color="primary"
+						className={classes.button}
+						onClick={onClick}
+						startIcon={<CloudUploadIcon />}
+					>
+						Submit
+					</Button>
+				</CardContent>
+			</Card>
 		</div>
 	);
 };
diff --git a/src/components/Group.tsx b/src/components/Group.tsx
index d7fa23f..7afdd3c 100644
--- a/src/components/Group.tsx
+++ b/src/components/Group.tsx
@@ -1,9 +1,10 @@
-import { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
 import Button from '@material-ui/core/Button';
 import Card from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import { makeAPIGetCall } from '../api/utils';
+import CreatePool from './CreatePool';
 
 const maybePluralize = (count: number, noun: string, suffix = 's') =>
 	`${count} ${noun}${count !== 1 ? suffix : ''}`;
@@ -41,6 +42,7 @@ export default function Group() {
 	const [error, setError] = useState(false);
 	const [group, setGroup] = useState<Carpool.Group>();
 	const [pools, setPools] = useState<Carpool.Pool[]>(SAMPLE_POOLS);
+	const [createPoolVisible, setCreatePoolVisible] = useState(false);
 
 	useEffect(() => {
 		makeAPIGetCall(`/groups/${id}`).then((res) => {
@@ -80,30 +82,31 @@ export default function Group() {
 			<Typography variant="h3" align="center">
 				Pools
 			</Typography>
-			<Button
-				onClick={() => (window.location.href = '/create_pool')}
-				variant="contained"
-			>
-				Create Pool
-			</Button>
-			<div className="container">
-				{pools.map((pool, index) => {
-					return (
-						<Card style={{ margin: '0.5em' }} key={index}>
-							<a href={'/pools/' + pool._id} className="card-title">
-								{pool.title}
-							</a>
-							<p className="text-left">
-								Capacity: {pool.participant_ids.length} / {pool.capacity}
-							</p>
-							<p className="text-left">Start Time: {pool.start_time}</p>
-							<p className="text-left">End Time: {pool.end_time}</p>
-							<p className="text-warning">
-								{maybePluralize(pool.comments.length, 'comment')}
-							</p>
-						</Card>
-					);
-				})}
+			<div style={{ display: 'flex', flexDirection: 'column' }}>
+				<div>
+					<Button
+						onClick={() => setCreatePoolVisible((v) => !v)}
+						variant="contained"
+					>
+						{createPoolVisible ? 'Cancel' : 'Create Pool'}
+					</Button>
+					{createPoolVisible && <CreatePool groupID={group._id} />}
+				</div>
+				{pools.map((pool, index) => (
+					<Card style={{ margin: '0.5rem', padding: '0.5rem' }} key={index}>
+						<a href={'/pools/' + pool._id} className="card-title">
+							{pool.title}
+						</a>
+						<p className="text-left">
+							Capacity: {pool.participant_ids.length} / {pool.capacity}
+						</p>
+						<p className="text-left">Start Time: {pool.start_time}</p>
+						<p className="text-left">End Time: {pool.end_time}</p>
+						<p className="text-warning">
+							{maybePluralize(pool.comments.length, 'comment')}
+						</p>
+					</Card>
+				))}
 			</div>
 		</div>
 	);
diff --git a/src/components/Groups.tsx b/src/components/Groups.tsx
index fcc250b..371d8ca 100644
--- a/src/components/Groups.tsx
+++ b/src/components/Groups.tsx
@@ -11,8 +11,6 @@ import Box from '@material-ui/core/Box';
 import { makeAPIGetCall, makeAPIPostCall } from '../api/utils';
 import { useHistory } from 'react-router-dom';
 
-import GoogleMapReact from 'google-map-react';
-
 const useStyles = makeStyles((theme) => ({
 	root: {
 		maxWidth: 345,
@@ -32,24 +30,6 @@ const useStyles = makeStyles((theme) => ({
 const Groups = () => {
 	const history = useHistory();
 	const classes = useStyles();
-	const [state, setState] = useState({
-		MyGroups: [
-			{
-				id: 1,
-				group_title: 'TJ',
-			},
-		],
-	});
-
-	const callAPI = () => {
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/groups/`)
-			.then((response) => response.json())
-			.then((data) => {
-				if (data !== undefined) {
-					setState(data);
-				}
-			});
-	};
 
 	const [groups, setGroups] = useState<Carpool.Group[]>([
 		{