rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add Google query thing

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-10 22:21:33 -04:00
parent ce1fce23a9
commit 9f8c0cba66
5 changed files with 145 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/google.ts
View File

@ -7,9 +7,12 @@ export async function searchForPlaces(query: string) {
url.searchParams.set('key', GOOGLE_MAPS_API_KEY); url.searchParams.set('key', GOOGLE_MAPS_API_KEY);
url.searchParams.set('input', query); url.searchParams.set('input', query);
url.searchParams.set('inputtype', 'textquery'); 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(); let json = await res.json();
return json; return json;
} }
console.log(searchForPlaces);

1
src/components/Authenticator.tsx
View File

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

7
src/components/CreateGroup.tsx
View File

@ -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 Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent'; import CardContent from '@material-ui/core/CardContent';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import { useState, useEffect } from 'react';
import CloudUploadIcon from '@material-ui/icons/CloudUpload'; import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import { useState } from 'react';
import { makeAPIPostCall } from '../api/utils';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {

255
src/components/CreatePool.tsx
View File

@ -6,6 +6,7 @@ import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import CloudUploadIcon from '@material-ui/icons/CloudUpload'; import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { searchForPlaces } from '../api/google';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
maxWidth: 345, maxWidth: 345,
@ -51,125 +52,143 @@ const CreatePool = () => {
<CardContent> <CardContent>
<Typography gutterBottom variant="h5" component="h2"></Typography> <Typography gutterBottom variant="h5" component="h2"></Typography>
<Typography variant="body2" color="textSecondary" component="p"> <Typography variant="body2" color="textSecondary" component="p">
<form> <div className="form-group">
<div className="form-group"> <h1 className="form-title" style={{ fontFamily: 'Impact' }}>
<h1 className="form-title" style={{ fontFamily: 'Impact' }}> Create Pool
Create Pool </h1>
</h1> <label className="" htmlFor="title">
<label className="" htmlFor="title"> Pool Title:{' '}
Pool Title:{' '} </label>
</label> <input
<input type="text"
type="text" id="title"
id="title" name="title"
name="title" className="form-control d-flex"
className="form-control d-flex" placeholder="Enter title here..."
placeholder="Enter title here..." onChange={(event) => setTitle(event.target.value)}
onChange={(event) => setTitle(event.target.value)} ></input>
></input> </div>
</div> <div className="form-group">
<div className="form-group"> <label className="" htmlFor="capacity">
<label className="" htmlFor="capacity"> Pool Capacity:
Pool Capacity: </label>
</label> <input
<input type="number"
type="number" id="capacity"
id="capacity" name="capacity"
name="capacity" className="form-control d-flex"
className="form-control d-flex" placeholder="0"
placeholder="0" onChange={(event) => setCapacity(parseInt(event.target.value))}
onChange={(event) => ></input>
setCapacity(parseInt(event.target.value)) </div>
} <div className="form-group">
></input> <label className="" htmlFor="pool_start">
</div> Start Time:
<div className="form-group"> </label>
<label className="" htmlFor="pool_start"> <input
Start Time: type="datetime-local"
</label> id="pool_start"
<input name="pool_start"
type="datetime-local" className="form-control"
id="pool_start" placeholder=""
name="pool_start" onChange={(event) => setStart(event.target.value)}
className="form-control" ></input>
placeholder="" </div>
onChange={(event) => setStart(event.target.value)} <div className="form-group">
></input> <label className="" htmlFor="pool_end">
</div> End Time:
<div className="form-group"> </label>
<label className="" htmlFor="pool_end"> <input
End Time: type="datetime-local"
</label> id="pool_end"
<input name="pool_end"
type="datetime-local" className="form-control"
id="pool_end" placeholder="Enter text here..."
name="pool_end" onChange={(event) => setEnd(event.target.value)}
className="form-control" ></input>
placeholder="Enter text here..." </div>
onChange={(event) => setEnd(event.target.value)} <div className="form-group">
></input> <label className="" htmlFor="pool_direction">
</div> Direction:
<div className="form-group"> </label>
<label className="" htmlFor="pool_direction"> <select
Direction: id="direction"
</label> name="direction"
<select onChange={(event) => setDirection(event.target.value)}
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 />}
> >
Submit <option value="pickup">Picking Up</option>
</Button> <option value="dropoff">Dropping Off</option>
<br /> </select>
</form> </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> </Typography>
</CardContent> </CardContent>
</Card> </Card>

7
src/components/UpdatePool.tsx
View File

@ -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 { useParams } from 'react-router-dom';
import { makeAPIGetCall } from '../api/utils'; import { makeAPIGetCall } from '../api/utils';