From 9f8c0cba66821526e54ce594c6e009bcbcfb4836 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sat, 10 Apr 2021 22:21:33 -0400
Subject: [PATCH] Add Google query thing

---
 src/api/google.ts                |   5 +-
 src/components/Authenticator.tsx |   1 -
 src/components/CreateGroup.tsx   |   7 +-
 src/components/CreatePool.tsx    | 255 +++++++++++++++++--------------
 src/components/UpdatePool.tsx    |   7 +-
 5 files changed, 145 insertions(+), 130 deletions(-)

diff --git a/src/api/google.ts b/src/api/google.ts
index 4256111..fea6950 100644
--- a/src/api/google.ts
+++ b/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);
diff --git a/src/components/Authenticator.tsx b/src/components/Authenticator.tsx
index c7ca7ef..ed07392 100644
--- a/src/components/Authenticator.tsx
+++ b/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';
 
diff --git a/src/components/CreateGroup.tsx b/src/components/CreateGroup.tsx
index 2f8d789..c51feec 100644
--- a/src/components/CreateGroup.tsx
+++ b/src/components/CreateGroup.tsx
@@ -1,12 +1,11 @@
-import { useCallback } from 'react';
-import { makeAPIPostCall } from '../api/utils';
+import Button from '@material-ui/core/Button';
 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: {
diff --git a/src/components/CreatePool.tsx b/src/components/CreatePool.tsx
index e3e10b3..b96a59a 100644
--- a/src/components/CreatePool.tsx
+++ b/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,125 +52,143 @@ 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
-								</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
-								variant="contained"
-								color="primary"
-								className={classes.button}
-								onClick={onClick}
-								startIcon={<CloudUploadIcon />}
+						<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)}
 							>
-								Submit
-							</Button>
-							<br />
-						</form>
+								<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>
+						<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"
+							className={classes.button}
+							onClick={onClick}
+							startIcon={<CloudUploadIcon />}
+						>
+							Submit
+						</Button>
+						<br />
 					</Typography>
 				</CardContent>
 			</Card>
diff --git a/src/components/UpdatePool.tsx b/src/components/UpdatePool.tsx
index 5140486..461206a 100644
--- a/src/components/UpdatePool.tsx
+++ b/src/components/UpdatePool.tsx
@@ -1,9 +1,4 @@
-import React, {
-	useState,
-	useEffect,
-	useCallback,
-	FormEventHandler,
-} from 'react';
+import { useState, useEffect, FormEventHandler } from 'react';
 import { useParams } from 'react-router-dom';
 import { makeAPIGetCall } from '../api/utils';