diff --git a/.gitignore b/.gitignore index 8f6ec93..6e277f1 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,5 @@ yarn-error.log* .vscode/ twitter-state.ts +placesapi.js +places_impl.js diff --git a/src/components/Event/Event.tsx b/src/components/Event/Event.tsx index 14a388a..79afe58 100644 --- a/src/components/Event/Event.tsx +++ b/src/components/Event/Event.tsx @@ -70,7 +70,7 @@ export default function Event({ event }: { event: IEvent }) { }; const addOrUpdateSignup = () => { - if (!prev.interested) { + if (!prev.interested || prev.placeId !== placeId) { addOrUpdateEventSignup(event.id, placeId) .then(() => { prev.placeId = placeId; @@ -97,6 +97,7 @@ export default function Event({ event }: { event: IEvent }) { for (let signup of signups) { if (signup.user.id === me?.id) { setInterested(true); + setPlaceId(signup.placeId); existingSignup.current.eventId = event.id; existingSignup.current.placeId = signup.placeId; existingSignup.current.interested = true; @@ -129,6 +130,7 @@ export default function Event({ event }: { event: IEvent }) { setPlaceId(placeID); }} style={placeId != null ? { border: '2px solid ' + green } : {}} + placeId={placeId} /> {false && (
{user.name} {extraDistance ? `: +${extraDistance.toFixed(1)} miles` : ''} - + { + // Invite to carpool and create carpool + }} + />
); })} diff --git a/src/components/UI/UIPlacesAutocomplete.tsx b/src/components/UI/UIPlacesAutocomplete.tsx index 7a460bf..69064fa 100644 --- a/src/components/UI/UIPlacesAutocomplete.tsx +++ b/src/components/UI/UIPlacesAutocomplete.tsx @@ -1,5 +1,7 @@ +import { useEffect } from 'react'; import { CSSProperties, useRef, useState } from 'react'; import PlacesAutocomplete, { Suggestion } from 'react-places-autocomplete'; +import getPlaceDetails from '../getPlaceDetails'; type Opts = Parameters['0']; @@ -45,14 +47,29 @@ export default function UIPlacesAutocomplete({ placeholder = 'Enter a location', disabled = false, style, + placeId, }: { onSelected?: (address: string, placeID: string) => void; placeholder?: string; disabled?: boolean; style?: CSSProperties; + placeId?: string | null; }) { const [location, setLocation] = useState(''); const suggestionsRef = useRef([]); + + useEffect(() => { + if (placeId) { + getPlaceDetails(placeId).then((result) => { + if (result.formattedAddress.startsWith(result.name)) { + setLocation(result.formattedAddress); + } else { + setLocation(`${result.name}, ${result.formattedAddress}`); + } + }); + } + }, [placeId]); + return ( { diff --git a/src/components/api.ts b/src/components/api.ts index 7043d0e..4a5bc4e 100644 --- a/src/components/api.ts +++ b/src/components/api.ts @@ -36,23 +36,6 @@ async function get(path: string) { return await res.json(); } -export type PlaceDetails = { - formattedAddress: string; - latitude: number; - longitude: number; -}; - -export async function getPlaceDetails( - placeId: string -): Promise { - if (placeId == null) { - console.warn('placeId was null'); - return null; - } - - return await get('/place/' + placeId); -} - export async function getEventSignups( eventId: number ): Promise { diff --git a/src/components/getPlaceDetails.ts b/src/components/getPlaceDetails.ts new file mode 100644 index 0000000..9bb630a --- /dev/null +++ b/src/components/getPlaceDetails.ts @@ -0,0 +1,29 @@ +const div = document.createElement('div'); +const places = new google.maps.places.PlacesService(div); + +export type PlaceDetails = { + name: string; + formattedAddress: string; + latitude: number; + longitude: number; +}; + +export default async function getPlaceDetails(placeId: string) { + return new Promise((resolve, reject) => { + places.getDetails( + { placeId, fields: ['name', 'formatted_address', 'geometry'] }, + (result, status) => { + if (result || status === 'OK') { + resolve({ + name: result.name, + formattedAddress: result.formatted_address!, + latitude: result.geometry!.location.lat(), + longitude: result.geometry!.location.lng(), + }); + } else { + reject(new Error('Unexpected Places status ' + status)); + } + } + ); + }); +} diff --git a/src/components/usePlace.ts b/src/components/usePlace.ts index b9a5a17..31dbf49 100644 --- a/src/components/usePlace.ts +++ b/src/components/usePlace.ts @@ -1,5 +1,5 @@ import { useState, useEffect, useCallback } from 'react'; -import { getPlaceDetails, PlaceDetails } from './api'; +import getPlaceDetails, { PlaceDetails } from './getPlaceDetails'; import useThrottle from './useThrottle'; export default function usePlace(placeId: string | null) {