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) {