From a8605241fe671d082588b450dac7df849642c9f9 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Sat, 10 Apr 2021 21:22:48 -0400 Subject: [PATCH 01/10] update types to use Mongo-style "_id" --- src/components/Group.tsx | 4 ++-- src/components/Pool.tsx | 4 ++-- src/components/Pools.tsx | 4 ++-- src/components/Profile.tsx | 6 +++--- src/types.d.ts | 8 ++++---- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/Group.tsx b/src/components/Group.tsx index b6f4b89..6fc6de7 100644 --- a/src/components/Group.tsx +++ b/src/components/Group.tsx @@ -10,7 +10,7 @@ const maybePluralize = (count: number, noun: string, suffix = 's') => const SAMPLE_POOLS: Carpool.Pool[] = [ { - id: '1234', + _id: '1234', title: 'TJ Carpool', description: 'Carpool from TJ track to homes', start_time: '4/10/2021 3:00 PM', @@ -90,7 +90,7 @@ export default function Group() { {pools.map((pool, index) => { return ( - + {pool.title}

diff --git a/src/components/Pool.tsx b/src/components/Pool.tsx index 330365c..5713f45 100644 --- a/src/components/Pool.tsx +++ b/src/components/Pool.tsx @@ -76,7 +76,7 @@ export default function Pool() { const onRegister = useCallback(() => { if (user) { - let userID = user.id; + let userID = user._id; makeAPIPostCall('/join_pool', { id }).then(() => { if (pool) { setPool({ @@ -122,7 +122,7 @@ export default function Pool() { style={{ marginTop: '0.5rem' }} onClick={onRegister} > - {pool.participant_ids.includes(user.id) + {pool.participant_ids.includes(user._id) ? 'Unregister' : 'Register'} diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx index f7a5d1a..b94c135 100644 --- a/src/components/Pools.tsx +++ b/src/components/Pools.tsx @@ -97,7 +97,7 @@ const Pools = () => { className="card card-body text-left" style={{ backgroundColor: background }} > - + {pool.title}

@@ -105,7 +105,7 @@ const Pools = () => {

Start Time: {pool.start_time}

End Time: {pool.end_time}

-

+

{maybePluralize(pool.comments.length, 'comment')}

diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx index 0bbc4b7..97ea5c6 100644 --- a/src/components/Profile.tsx +++ b/src/components/Profile.tsx @@ -56,7 +56,7 @@ const Profile = () => { className={classes.root + 'd-inline-flex'} style={{ margin: '0.5rem' }} > - + {pool.title} @@ -75,14 +75,14 @@ const Profile = () => { size="small" color="primary" onClick={() => { - let link: string = 'localhost:3000/pool/' + pool.id; + let link: string = 'localhost:3000/pool/' + pool._id; navigator.clipboard.writeText(link); }} > Share From 50c57d9ed48470327fde30763d9ccae231ccd9fe Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Sat, 10 Apr 2021 21:32:37 -0400 Subject: [PATCH 03/10] Remove instances of fetch() --- src/components/Authenticator.tsx | 28 +++++++-------------- src/components/Groups.tsx | 42 +++++++++++++++----------------- src/components/MyGroups.tsx | 40 ++++++++++++++---------------- src/components/MyPools.tsx | 14 +++++------ src/components/Pools.tsx | 14 +++++------ src/components/UpdatePool.tsx | 24 ++++++------------ 6 files changed, 66 insertions(+), 96 deletions(-) diff --git a/src/components/Authenticator.tsx b/src/components/Authenticator.tsx index 3a1d770..c7ca7ef 100644 --- a/src/components/Authenticator.tsx +++ b/src/components/Authenticator.tsx @@ -1,6 +1,7 @@ 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 +14,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/Groups.tsx b/src/components/Groups.tsx index 4cdde20..556467e 100644 --- a/src/components/Groups.tsx +++ b/src/components/Groups.tsx @@ -1,28 +1,24 @@ -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; +import { makeAPIGetCall } from '../api/utils'; const Groups = () => { - const [state, setState] = useState({ - Groups: [ - { - 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([ + { + _id: '1234', + name: 'TJ', + creator_id: 'michael', + member_ids: [], + }, + ]); useEffect(() => { - callAPI(); + makeAPIGetCall('/groups').then((res) => { + if (res.data.data) { + setGroups(res.data.data); + } + }); }, []); + return (

{


- {state.Groups.map((group, index) => { + {groups.map((group, index) => { return (
{ backgroundColor: index % 2 === 0 ? '#F1EAE8' : '#FFFFFF', }} > -
-

{group.group_title}

+ +

{group.name}

{ - 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([ + { + _id: '1234', + name: 'TJ', + creator_id: '12345Q', + member_ids: [], + }, + ]); useEffect(() => { - callAPI(); + makeAPIGetCall('/groups').then((res) => { + if (res.data.data) { + setGroups(res.data.data); + } + }); }, []); + return (

{


- {state.MyGroups.map((group, index) => { + {groups.map((group, index) => { let background; if (index % 2 === 0) { background = '#F1EAE8'; @@ -52,8 +48,8 @@ const MyGroups = () => { className="card card-body text-left" style={{ backgroundColor: background }} > - - {group.group_title} + + {group.name}
); diff --git a/src/components/MyPools.tsx b/src/components/MyPools.tsx index b6d2a2d..50a3434 100644 --- a/src/components/MyPools.tsx +++ b/src/components/MyPools.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import { API_ENDPOINT } from '../api/api'; +import { makeAPIGetCall } from '../api/utils'; const MyPools = () => { // const id = props.match.params.id; @@ -55,14 +56,11 @@ const MyPools = () => { ]); useEffect(() => { - console.log(process.env); - fetch(`${API_ENDPOINT}/my_pools`) - .then((response) => response.json()) - .then((json) => { - if (json) { - setPools(json.data); - } - }); + makeAPIGetCall('/my_pools').then((res) => { + if (res.data.data) { + setPools(res.data.data); + } + }); }, []); const maybePluralize = (count: number, noun: string, suffix = 's') => diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx index b94c135..3b964ee 100644 --- a/src/components/Pools.tsx +++ b/src/components/Pools.tsx @@ -1,5 +1,6 @@ import { useState, useEffect } from 'react'; import { API_ENDPOINT } from '../api/api'; +import { makeAPIGetCall } from '../api/utils'; const maybePluralize = (count: number, noun: string, suffix = 's') => `${count} ${noun}${count !== 1 ? suffix : ''}`; @@ -58,14 +59,11 @@ const Pools = () => { ]); useEffect(() => { - console.log(process.env); - fetch(`${API_ENDPOINT}/my_pools`) - .then((response) => response.json()) - .then((json) => { - if (json) { - setPools(json.data); - } - }); + makeAPIGetCall('/my_pools').then((res) => { + if (res.data.data) { + setPools(res.data.data); + } + }); }, []); return ( diff --git a/src/components/UpdatePool.tsx b/src/components/UpdatePool.tsx index c0209d0..290d2d5 100644 --- a/src/components/UpdatePool.tsx +++ b/src/components/UpdatePool.tsx @@ -5,6 +5,7 @@ import React, { FormEventHandler, } from 'react'; import { useParams } from 'react-router-dom'; +import { makeAPIGetCall } from '../api/utils'; const UpdatePool = () => { const id = useParams<{ id: string }>().id; @@ -21,26 +22,17 @@ const UpdatePool = () => { comments: ['What is the covid vaccination status of all the participants?'], }); - const callAPI = useCallback(() => { - fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`) - .then((response) => response.json()) - .then((data) => { - if (data !== undefined) { - setPool(data); - } - }); - }, [id]); const onSubmit: FormEventHandler = (e) => { e.preventDefault(); - fetch(`${process.env.REACT_APP_API_ENDPOINT}/update_pool`) - .then((response) => response.json()) - .then((data) => { - console.log(data); - }); + makeAPIGetCall('/update_pool').then((res) => { + console.log(res); + }); }; useEffect(() => { - callAPI(); - }, [callAPI]); + makeAPIGetCall('/pool', { poolID: id }).then((res) => { + if (res.data.data) setPool(res.data.data); + }); + }, [id]); return (
Date: Sat, 10 Apr 2021 21:53:49 -0400 Subject: [PATCH 04/10] use new API --- src/App.tsx | 4 ++-- src/api/api.ts | 4 ++-- src/components/CreateGroup.tsx | 9 ++------- src/components/CreatePool.tsx | 2 +- src/components/Group.tsx | 6 +++--- src/components/Groups.tsx | 2 +- src/components/MyGroups.tsx | 4 ++-- src/components/MyPools.tsx | 4 ++-- src/components/Pool.tsx | 4 ++-- src/components/Pools.tsx | 4 ++-- src/components/Profile.tsx | 8 ++++---- src/components/UpdatePool.tsx | 4 ++-- 12 files changed, 25 insertions(+), 30 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index e49403c..30bccd2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -30,8 +30,8 @@ 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/components/CreateGroup.tsx b/src/components/CreateGroup.tsx index 6b35574..2f8d789 100644 --- a/src/components/CreateGroup.tsx +++ b/src/components/CreateGroup.tsx @@ -22,14 +22,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..e3e10b3 100644 --- a/src/components/CreatePool.tsx +++ b/src/components/CreatePool.tsx @@ -30,7 +30,7 @@ const CreatePool = () => { const [group, setGroup] = useState(''); const onClick = () => { - makeAPIPostCall('/pool', { + makeAPIPostCall('/pools/', { title, description, start_time: start, diff --git a/src/components/Group.tsx b/src/components/Group.tsx index 6fc6de7..d7fa23f 100644 --- a/src/components/Group.tsx +++ b/src/components/Group.tsx @@ -43,7 +43,7 @@ export default function Group() { const [pools, setPools] = useState(SAMPLE_POOLS); useEffect(() => { - makeAPIGetCall('/group', { groupID: id }).then((res) => { + makeAPIGetCall(`/groups/${id}`).then((res) => { if ('error' in res.data) { setError(true); } else { @@ -51,7 +51,7 @@ export default function Group() { } }); - makeAPIGetCall('/group_pools', { groupID: id }).then((res) => { + makeAPIGetCall(`/groups/${id}/pools`).then((res) => { setPools(res.data.data); }); }, [id]); @@ -90,7 +90,7 @@ export default function Group() { {pools.map((pool, index) => { return ( - + {pool.title}

diff --git a/src/components/Groups.tsx b/src/components/Groups.tsx index 556467e..2c3c0d1 100644 --- a/src/components/Groups.tsx +++ b/src/components/Groups.tsx @@ -12,7 +12,7 @@ const Groups = () => { ]); useEffect(() => { - makeAPIGetCall('/groups').then((res) => { + makeAPIGetCall('/browse/groups').then((res) => { if (res.data.data) { setGroups(res.data.data); } diff --git a/src/components/MyGroups.tsx b/src/components/MyGroups.tsx index 7cfb937..ba7cbf5 100644 --- a/src/components/MyGroups.tsx +++ b/src/components/MyGroups.tsx @@ -12,7 +12,7 @@ const MyGroups = () => { ]); useEffect(() => { - makeAPIGetCall('/groups').then((res) => { + makeAPIGetCall('/browse/groups').then((res) => { if (res.data.data) { setGroups(res.data.data); } @@ -48,7 +48,7 @@ const MyGroups = () => { className="card card-body text-left" style={{ backgroundColor: background }} > - + {group.name}

diff --git a/src/components/MyPools.tsx b/src/components/MyPools.tsx index 50a3434..1c2eb17 100644 --- a/src/components/MyPools.tsx +++ b/src/components/MyPools.tsx @@ -56,7 +56,7 @@ const MyPools = () => { ]); useEffect(() => { - makeAPIGetCall('/my_pools').then((res) => { + makeAPIGetCall('/users/@me/pools').then((res) => { if (res.data.data) { setPools(res.data.data); } @@ -94,7 +94,7 @@ const MyPools = () => { className="card card-body text-left" style={{ backgroundColor: background }} > - + {pool.pool_title}

diff --git a/src/components/Pool.tsx b/src/components/Pool.tsx index 0b2d2ab..05813cf 100644 --- a/src/components/Pool.tsx +++ b/src/components/Pool.tsx @@ -77,7 +77,7 @@ export default function Pool() { const onRegister = useCallback(() => { if (user) { let userID = user._id; - makeAPIPostCall('/join_pool', { id }).then(() => { + makeAPIPostCall(`/pools/${id}/join`).then(() => { if (pool) { setPool({ ...pool, @@ -89,7 +89,7 @@ export default function Pool() { }, [user, id, pool]); useEffect(() => { - makeAPIGetCall('/pool', { poolID: id }).then((response) => { + makeAPIGetCall(`/pools/${id}`).then((response) => { if (response.data.data) { setPool(response.data.data); } diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx index 3b964ee..04ba013 100644 --- a/src/components/Pools.tsx +++ b/src/components/Pools.tsx @@ -59,7 +59,7 @@ const Pools = () => { ]); useEffect(() => { - makeAPIGetCall('/my_pools').then((res) => { + makeAPIGetCall(`/users/@me/pools`).then((res) => { if (res.data.data) { setPools(res.data.data); } @@ -95,7 +95,7 @@ const Pools = () => { className="card card-body text-left" style={{ backgroundColor: background }} > - + {pool.title}

diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx index 97ea5c6..54ad93f 100644 --- a/src/components/Profile.tsx +++ b/src/components/Profile.tsx @@ -25,7 +25,7 @@ const Profile = () => { const classes = useStyles(); useEffect(() => { - makeAPIGetCall('/my_pools').then((res) => { + makeAPIGetCall('/users/@me/pools').then((res) => { if (res.data.data) setPools(res.data.data); }); }, []); @@ -56,7 +56,7 @@ const Profile = () => { className={classes.root + 'd-inline-flex'} style={{ margin: '0.5rem' }} > - + {pool.title} @@ -75,14 +75,14 @@ const Profile = () => { size="small" color="primary" onClick={() => { - let link: string = 'localhost:3000/pool/' + pool._id; + let link: string = 'localhost:3000/pools/' + pool._id; navigator.clipboard.writeText(link); }} > Share

- {user.username}'s Pools + My Pools (private)

-
+
{pools.map((pool) => { return ( { ); })}
+ +

+ My Groups (private) +
+ {groups.map((group) => { + return ( + +

+ {group.name} +

+ + ); + })} +
+

); From ce1fce23a97d4743f352cb36b5ee8ec2eab8f23a Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Sat, 10 Apr 2021 22:13:38 -0400 Subject: [PATCH 06/10] Add Places Search API --- src/api/google.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/api/google.ts diff --git a/src/api/google.ts b/src/api/google.ts new file mode 100644 index 0000000..4256111 --- /dev/null +++ b/src/api/google.ts @@ -0,0 +1,15 @@ +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'); + + let res = await fetch(url.toString()); + let json = await res.json(); + + return json; +} From 9f8c0cba66821526e54ce594c6e009bcbcfb4836 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Sat, 10 Apr 2021 22:21:33 -0400 Subject: [PATCH 07/10] 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 = () => { - -
-

- Create Pool -

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