From a7b70a31e7d1f5dfd16cc997a0b825f680ea208a Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Tue, 8 Jun 2021 12:09:30 -0400
Subject: [PATCH] add confirmed button

---
 src/components/NewUI/Event.tsx                | 36 +++++++++++++++----
 src/components/NewUI/UIPlacesAutocomplete.tsx |  7 +++-
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/NewUI/Event.tsx b/src/components/NewUI/Event.tsx
index 8d06f53..d524ba7 100644
--- a/src/components/NewUI/Event.tsx
+++ b/src/components/NewUI/Event.tsx
@@ -21,6 +21,7 @@ export default function Event({
 	const [needRideBack, setNeedRideBack] = useState(false);
 	const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState('');
 	const [rideBackDropoffPlaceID, setRideBackDropoffPlaceID] = useState('');
+	const [confirmed, setConfirmed] = useState(false);
 
 	useEffect(() => {
 		console.log({ rideTherePickupPlaceID, rideBackDropoffPlaceID });
@@ -131,9 +132,10 @@ export default function Event({
 					</span>
 					<UIPlacesAutocomplete
 						placeholder="Pickup location"
-						onSelected={(address, placeID) =>
-							setRideTherePickupPlaceID(placeID)
-						}
+						onSelected={(address, placeID) => {
+							setRideTherePickupPlaceID(placeID);
+							setConfirmed(false);
+						}}
 					/>
 					<UITimeInput />
 				</>
@@ -152,13 +154,35 @@ export default function Event({
 					</span>
 					<UIPlacesAutocomplete
 						placeholder="Dropoff location"
-						onSelected={(address, placeID) =>
-							setRideBackDropoffPlaceID(placeID)
-						}
+						onSelected={(address, placeID) => {
+							setRideBackDropoffPlaceID(placeID);
+							setConfirmed(false);
+						}}
 					/>
 					<UITimeInput />
 				</>
 			)}
+			{(needRideThere || needRideBack) &&
+				(rideTherePickupPlaceID || rideBackDropoffPlaceID) && (
+					<div
+						style={{
+							backgroundColor: confirmed ? green : lightgrey,
+							color: confirmed ? 'white' : 'black',
+							padding: '1rem',
+							borderRadius: '0.5em',
+							textTransform: 'uppercase',
+							fontWeight: 500,
+							marginTop: '0.5em',
+							cursor: 'pointer',
+							userSelect: 'none',
+						}}
+						onClick={() => {
+							setConfirmed((confirmed) => !confirmed);
+						}}
+					>
+						{confirmed ? 'Confirmed' : 'Confirm'}
+					</div>
+				)}
 		</div>
 	);
 }
diff --git a/src/components/NewUI/UIPlacesAutocomplete.tsx b/src/components/NewUI/UIPlacesAutocomplete.tsx
index 548428a..28889fa 100644
--- a/src/components/NewUI/UIPlacesAutocomplete.tsx
+++ b/src/components/NewUI/UIPlacesAutocomplete.tsx
@@ -50,7 +50,12 @@ export default function UIPlacesAutocomplete({
 	const suggestionsRef = useRef<readonly Suggestion[]>([]);
 	return (
 		<PlacesAutocomplete
-			onChange={setLocation}
+			onChange={(location) => {
+				setLocation(location);
+				if (onSelected) {
+					onSelected(null!, null!);
+				}
+			}}
 			onSelect={(address, placeID) => {
 				setLocation(address);
 				if (onSelected) {