From 0758b3647999ce338d20308c465811ec4a7ca34a Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Thu, 24 Jun 2021 13:57:51 -0400
Subject: [PATCH] make 'need ride there' buttons responsive to availability
 selection

---
 src/components/NewUI/Event.tsx | 180 +++++++++++++++++----------------
 1 file changed, 92 insertions(+), 88 deletions(-)

diff --git a/src/components/NewUI/Event.tsx b/src/components/NewUI/Event.tsx
index e25ee6f..84a9cd4 100644
--- a/src/components/NewUI/Event.tsx
+++ b/src/components/NewUI/Event.tsx
@@ -117,100 +117,104 @@ export default function Event({
 			<GroupName name={group} />
 			<Details {...{ startTime, endTime, formattedAddress }} />
 			<Availability selected={availability} onSelected={setAvailability} />
-			<div
-				style={{
-					display: 'flex',
-					flexDirection: 'row',
-					width: '100%',
-					justifyContent: 'center',
-					marginTop: '1rem',
-				}}
-			>
-				<UIButton
-					style={{
-						backgroundColor: needRideThere ? green : lightgrey,
-						color: needRideThere ? 'white' : 'black',
-						transition: 'color 0.2s, background-color 0.2s',
-						marginRight: '0.5em',
-					}}
-					onClick={() => {
-						setNeedRideThere((needRideThere) => !needRideThere);
-					}}
-				>
-					I need a ride there
-				</UIButton>
-				<UIButton
-					style={{
-						backgroundColor: needRideBack ? green : lightgrey,
-						color: needRideBack ? 'white' : 'black',
-						transition: 'color 0.2s, background-color 0.2s',
-						marginLeft: '0.5em',
-					}}
-					onClick={() => {
-						setNeedRideBack((needRideBack) => !needRideBack);
-					}}
-				>
-					I need a ride back
-				</UIButton>
-			</div>
-			{needRideThere && (
+			{availability === 'interested' && (
 				<>
-					<span
+					<div
 						style={{
-							color: '#303030',
-							textTransform: 'uppercase',
-							fontWeight: 500,
-							marginTop: '1em',
+							display: 'flex',
+							flexDirection: 'row',
+							width: '100%',
+							justifyContent: 'center',
+							marginTop: '1rem',
 						}}
 					>
-						Ride There
-					</span>
-					<UIPlacesAutocomplete
-						placeholder="Pickup location"
-						onSelected={(address, placeID) => {
-							setRideTherePickupPlaceID(placeID);
-							setConfirmed(false);
-						}}
-					/>
-					<UITimeInput />
+						<UIButton
+							style={{
+								backgroundColor: needRideThere ? green : lightgrey,
+								color: needRideThere ? 'white' : 'black',
+								transition: 'color 0.2s, background-color 0.2s',
+								marginRight: '0.5em',
+							}}
+							onClick={() => {
+								setNeedRideThere((needRideThere) => !needRideThere);
+							}}
+						>
+							I need a ride there
+						</UIButton>
+						<UIButton
+							style={{
+								backgroundColor: needRideBack ? green : lightgrey,
+								color: needRideBack ? 'white' : 'black',
+								transition: 'color 0.2s, background-color 0.2s',
+								marginLeft: '0.5em',
+							}}
+							onClick={() => {
+								setNeedRideBack((needRideBack) => !needRideBack);
+							}}
+						>
+							I need a ride back
+						</UIButton>
+					</div>
+					{needRideThere && (
+						<>
+							<span
+								style={{
+									color: '#303030',
+									textTransform: 'uppercase',
+									fontWeight: 500,
+									marginTop: '1em',
+								}}
+							>
+								Ride There
+							</span>
+							<UIPlacesAutocomplete
+								placeholder="Pickup location"
+								onSelected={(address, placeID) => {
+									setRideTherePickupPlaceID(placeID);
+									setConfirmed(false);
+								}}
+							/>
+							<UITimeInput />
+						</>
+					)}
+					{needRideBack && (
+						<>
+							<span
+								style={{
+									color: '#303030',
+									textTransform: 'uppercase',
+									fontWeight: 500,
+									marginTop: '1em',
+								}}
+							>
+								Ride Back
+							</span>
+							<UIPlacesAutocomplete
+								placeholder="Dropoff location"
+								onSelected={(address, placeID) => {
+									setRideBackDropoffPlaceID(placeID);
+									setConfirmed(false);
+								}}
+							/>
+							<UITimeInput />
+						</>
+					)}
+					{(needRideThere || needRideBack) &&
+						(rideTherePickupPlaceID || rideBackDropoffPlaceID) && (
+							<UIButton
+								style={{
+									backgroundColor: confirmed ? green : lightgrey,
+									color: confirmed ? 'white' : 'black',
+								}}
+								onClick={() => {
+									setConfirmed((confirmed) => !confirmed);
+								}}
+							>
+								{confirmed ? 'Confirmed' : 'Confirm'}
+							</UIButton>
+						)}
 				</>
 			)}
-			{needRideBack && (
-				<>
-					<span
-						style={{
-							color: '#303030',
-							textTransform: 'uppercase',
-							fontWeight: 500,
-							marginTop: '1em',
-						}}
-					>
-						Ride Back
-					</span>
-					<UIPlacesAutocomplete
-						placeholder="Dropoff location"
-						onSelected={(address, placeID) => {
-							setRideBackDropoffPlaceID(placeID);
-							setConfirmed(false);
-						}}
-					/>
-					<UITimeInput />
-				</>
-			)}
-			{(needRideThere || needRideBack) &&
-				(rideTherePickupPlaceID || rideBackDropoffPlaceID) && (
-					<UIButton
-						style={{
-							backgroundColor: confirmed ? green : lightgrey,
-							color: confirmed ? 'white' : 'black',
-						}}
-						onClick={() => {
-							setConfirmed((confirmed) => !confirmed);
-						}}
-					>
-						{confirmed ? 'Confirmed' : 'Confirm'}
-					</UIButton>
-				)}
 		</UISecondaryBox>
 	);
 }