make the place you chose show up as saved

.gitignore

@@ -24,3 +24,5 @@ yarn-error.log*
 
 .vscode/
 twitter-state.ts
+placesapi.js
+places_impl.js

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 && (
 						<div

src/components/Event/EventSignups.tsx

@@ -71,7 +71,11 @@ export default function EventSignups({
 					>
 						<b>{user.name}</b>
 						{extraDistance ? `: +${extraDistance.toFixed(1)} miles` : ''}
-						<PersonAddIcon />
+						<PersonAddIcon
+							onClick={() => {
+								// Invite to carpool and create carpool
+							}}
+						/>
 					</div>
 				);
 			})}

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<PlacesAutocomplete['props']['children']>['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<readonly Suggestion[]>([]);
+
+	useEffect(() => {
+		if (placeId) {
+			getPlaceDetails(placeId).then((result) => {
+				if (result.formattedAddress.startsWith(result.name)) {
+					setLocation(result.formattedAddress);
+				} else {
+					setLocation(`${result.name}, ${result.formattedAddress}`);
+				}
+			});
+		}
+	}, [placeId]);
+
 	return (
 		<PlacesAutocomplete
 			onChange={(location) => {

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<PlaceDetails | null> {
-	if (placeId == null) {
-		console.warn('placeId was null');
-		return null;
-	}
-
-	return await get('/place/' + placeId);
-}
-
 export async function getEventSignups(
 	eventId: number
 ): Promise<IEventSignup[]> {

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<PlaceDetails>((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));
+				}
+			}
+		);
+	});
+}

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