Integrate CreatePool into the Group page

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" />

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) => (
@@ -279,7 +276,6 @@ const CreatePool = () => {
 				</CardContent>
 			</Card>
 		</div>
-		</div>
 	);
 };
 

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,16 +82,18 @@ export default function Group() {
 			<Typography variant="h3" align="center">
 				Pools
 			</Typography>
+			<div style={{ display: 'flex', flexDirection: 'column' }}>
+				<div>
 					<Button
-				onClick={() => (window.location.href = '/create_pool')}
+						onClick={() => setCreatePoolVisible((v) => !v)}
 						variant="contained"
 					>
-				Create Pool
+						{createPoolVisible ? 'Cancel' : 'Create Pool'}
 					</Button>
-			<div className="container">
-				{pools.map((pool, index) => {
-					return (
-						<Card style={{ margin: '0.5em' }} key={index}>
+					{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>
@@ -102,8 +106,7 @@ export default function Group() {
 							{maybePluralize(pool.comments.length, 'comment')}
 						</p>
 					</Card>
-					);
-				})}
+				))}
 			</div>
 		</div>
 	);

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[]>([
 		{