diff --git a/package.json b/package.json index 38478c7..77b5394 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "@material-ui/core": "^4.11.3", "@material-ui/icons": "^4.11.2", + "@react-google-maps/api": "^2.1.1", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", diff --git a/src/App.tsx b/src/App.tsx index e49403c..552fad2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,6 +16,7 @@ import Main from './components/Main'; import './App.css'; import Authenticator from './components/Authenticator'; import AuthenticationWrapper from './components/AuthenticationWrapper'; +import Logout from './components/Logout'; function App() { return ( @@ -27,12 +28,13 @@ function App() { - - - + + + + diff --git a/src/api/api.ts b/src/api/api.ts index 2f5a2d0..275fa73 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -32,11 +32,11 @@ export async function createSession( } export async function getMe(): Promise { - let result = await makeAPIGetCall('/user', { userID: '@me' }); + let result = await makeAPIGetCall('/users/@me'); return result.data.data; } export async function getPublicUser(id: string): Promise { - let result = await makeAPIGetCall('/user', { userID: id }); + let result = await makeAPIGetCall(`/users/${id}`); return result.data.data; } diff --git a/src/api/google.ts b/src/api/google.ts new file mode 100644 index 0000000..44f2167 --- /dev/null +++ b/src/api/google.ts @@ -0,0 +1,16 @@ +export const GOOGLE_MAPS_API_KEY = 'AIzaSyDUnWIrt-H4RuP2YFLpVPz4oAjBhpOOoyI'; + +export async function searchForPlaces(query: string) { + const url = new URL( + 'https://maps.googleapis.com/maps/api/place/findplacefromtext/json' + ); + 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(), { mode: 'no-cors' }); + let json = await res.json(); + + return json; +} diff --git a/src/components/Authenticator.tsx b/src/components/Authenticator.tsx index 3a1d770..ed07392 100644 --- a/src/components/Authenticator.tsx +++ b/src/components/Authenticator.tsx @@ -1,6 +1,6 @@ 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'; export default function Authenticator() { @@ -13,26 +13,15 @@ export default function Authenticator() { ); useEffect(() => { - fetch(`${API_ENDPOINT}/create_session`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - code, - provider, - }), - }) + makeAPIPostCall('/create_session', { code, provider }) .then((response) => { - response.json().then((json) => { - if (json.status === 'success') { - localStorage.setItem('session_token', json.token); - refreshAuthState && refreshAuthState(); - setStatus('authenticated'); - } else { - setStatus('errored'); - } - }); + if (response.data.status === 'success') { + localStorage.setItem('session_token', response.data.token); + refreshAuthState && refreshAuthState(); + setStatus('authenticated'); + } else { + setStatus('errored'); + } }) .catch(() => { setStatus('errored'); diff --git a/src/components/CreateGroup.tsx b/src/components/CreateGroup.tsx index 6b35574..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: { @@ -22,14 +21,9 @@ const useStyles = makeStyles((theme) => ({ const CreateGroup = () => { const [title, setTitle] = useState('No Title'); const classes = useStyles(); - useEffect(() => {}, []); + const onClick = () => { - console.log({ - title: title, - }); - makeAPIPostCall('/group', { - title, - }); + makeAPIPostCall('/groups/', { title }); }; return ( diff --git a/src/components/CreatePool.tsx b/src/components/CreatePool.tsx index 1433975..11b3902 100644 --- a/src/components/CreatePool.tsx +++ b/src/components/CreatePool.tsx @@ -1,11 +1,12 @@ -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 CloudUploadIcon from '@material-ui/icons/CloudUpload'; -import { useState, useEffect } from 'react'; +import { useEffect, useState } from 'react'; +import { searchForPlaces } from '../api/google'; +import { makeAPIPostCall } from '../api/utils'; + const useStyles = makeStyles((theme) => ({ root: { maxWidth: 345, @@ -30,7 +31,7 @@ const CreatePool = () => { const [group, setGroup] = useState(''); const onClick = () => { - makeAPIPostCall('/pool', { + makeAPIPostCall('/pools/', { title, description, start_time: start, @@ -49,128 +50,140 @@ const CreatePool = () => { style={{ margin: '0.5rem', background: '#F3F5F4' }} > - - -
-
-

- Create Pool -

- - setTitle(event.target.value)} - > -
-
- - - setCapacity(parseInt(event.target.value)) - } - > -
-
- - setStart(event.target.value)} - > -
-
- - setEnd(event.target.value)} - > -
-
- - -
-
- - -
-
- -