Add Google query thing

src/api/google.ts

@@ -7,9 +7,12 @@ export async function searchForPlaces(query: string) {
 	url.searchParams.set('key', GOOGLE_MAPS_API_KEY);
 	url.searchParams.set('input', query);
 	url.searchParams.set('inputtype', 'textquery');
+	url.searchParams.set('fields', 'place_id,name,formatted_address');
 
-	let res = await fetch(url.toString());
+	let res = await fetch(url.toString(), { mode: 'no-cors' });
 	let json = await res.json();
 
 	return json;
 }
+
+console.log(searchForPlaces);

src/components/Authenticator.tsx

@@ -1,6 +1,5 @@
 import { useContext, useEffect, useState } from 'react';
 import { Redirect, useLocation, useParams } from 'react-router-dom';
-import { API_ENDPOINT } from '../api/api';
 import { makeAPIPostCall } from '../api/utils';
 import AuthenticationContext from './AuthenticationContext';
 

src/components/CreateGroup.tsx

@@ -1,12 +1,11 @@
-import { useCallback } from 'react';
+import Button from '@material-ui/core/Button';
-import { makeAPIPostCall } from '../api/utils';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
-import { useState, useEffect } from 'react';
 import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import { useState } from 'react';
+import { makeAPIPostCall } from '../api/utils';
 
 const useStyles = makeStyles((theme) => ({
 	root: {

src/components/CreatePool.tsx

@@ -6,6 +6,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 import { useState, useEffect } from 'react';
+import { searchForPlaces } from '../api/google';
 const useStyles = makeStyles((theme) => ({
 	root: {
 		maxWidth: 345,
@@ -51,7 +52,6 @@ const CreatePool = () => {
 				<CardContent>
 					<Typography gutterBottom variant="h5" component="h2"></Typography>
 					<Typography variant="body2" color="textSecondary" component="p">
-						<form>
 						<div className="form-group">
 							<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
 								Create Pool
@@ -78,9 +78,7 @@ const CreatePool = () => {
 								name="capacity"
 								className="form-control d-flex"
 								placeholder="0"
-									onChange={(event) =>
+								onChange={(event) => setCapacity(parseInt(event.target.value))}
-										setCapacity(parseInt(event.target.value))
-									}
 							></input>
 						</div>
 						<div className="form-group">
@@ -159,6 +157,28 @@ const CreatePool = () => {
 								onChange={(event) => setGroup(event.target.value)}
 							></input>
 						</div>
+						<div className="form-group">
+							<label className="" htmlFor="location">
+								Location:
+							</label>
+							<input
+								type="text"
+								className="form-control"
+								id="location_input"
+							></input>
+							<button
+								onClick={(e) => {
+									e.preventDefault();
+									let input = document.getElementById(
+										'location_input'
+									) as HTMLInputElement;
+									let places = searchForPlaces(input.value);
+									console.log(places);
+								}}
+							>
+								Search
+							</button>
+						</div>
 						<Button
 							variant="contained"
 							color="primary"
@@ -169,7 +189,6 @@ const CreatePool = () => {
 							Submit
 						</Button>
 						<br />
-						</form>
 					</Typography>
 				</CardContent>
 			</Card>

src/components/UpdatePool.tsx

@@ -1,9 +1,4 @@
-import React, {
+import { useState, useEffect, FormEventHandler } from 'react';
-	useState,
-	useEffect,
-	useCallback,
-	FormEventHandler,
-} from 'react';
 import { useParams } from 'react-router-dom';
 import { makeAPIGetCall } from '../api/utils';