add People to event

src/components/NewUI/Event.tsx

@@ -181,16 +181,67 @@ function Carpools({ event }: { event: IEvent }) {
 	);
 }
 
+export type IPerson = {
+	id: number;
+	name: string;
+	extraDistance: number;
+};
+
+const dummyPeopleData: IPerson[] = [
+	{
+		id: 0,
+		name: 'Rushil Umaretiya',
+		extraDistance: 10,
+	},
+	{
+		id: 1,
+		name: 'Nitin Kanchinadam',
+		extraDistance: 12,
+	},
+];
+function People({ event }: { event: IEvent }) {
+	const PADDING = '1rem';
+	const [people, setPeople] = useState(dummyPeopleData);
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column' }}>
+			<h3 style={{ marginBlockEnd: '0' }}>People</h3>
+			{people.map(({ name, extraDistance, id }) => (
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						position: 'relative',
+						padding: '1rem',
+						borderRadius: '0.5rem',
+						border: '1px solid #e0e0e0',
+						marginTop: '0.5rem',
+						marginBottom: '0.5rem',
+					}}
+				>
+					<b>{name}</b>: +{extraDistance} miles
+					<div
+						style={{
+							borderRadius: '0.5em',
+							cursor: 'pointer',
+							padding: '0.5em',
+							position: 'absolute',
+							right: PADDING,
+							userSelect: 'none',
+							backgroundColor: '#e0e0e0',
+						}}
+					>
+						Invite to carpool
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}
+
 export default function Event({ event }: { event: IEvent }) {
 	const { name, group, formattedAddress, startTime, endTime } = event;
-	const [haveRideThere, setHaveRideThere] = useState(false);
+	const [haveRide, setHaveRide] = useState(false);
-	const [haveRideBack, setHaveRideBack] = useState(false);
+	const [locationPlaceId, setLocationPlaceId] = useState<string>(null!);
-	const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState<string>(
-		null!
-	);
-	const [rideBackDropoffPlaceID, setRideBackDropoffPlaceID] = useState<string>(
-		null!
-	);
 	const [interested, setInterested] = useState(false);
 
 	return (
@@ -211,28 +262,15 @@ export default function Event({ event }: { event: IEvent }) {
 			{interested && (
 				<>
 					<UIPlacesAutocomplete
-						placeholder="Pickup location"
+						placeholder="Pickup and dropoff location"
 						onSelected={(_address, placeID) => {
-							setRideTherePickupPlaceID(placeID);
+							setLocationPlaceId(placeID);
 						}}
 						style={
-							rideTherePickupPlaceID != null
+							locationPlaceId != null ? { border: '2px solid ' + green } : {}
-								? { border: '2px solid ' + green }
-								: {}
 						}
 					/>
-					<UIPlacesAutocomplete
+					{false && (
-						placeholder="Dropoff location"
-						onSelected={(_address, placeID) => {
-							setRideBackDropoffPlaceID(placeID);
-						}}
-						style={
-							rideBackDropoffPlaceID != null
-								? { border: '2px solid ' + green }
-								: {}
-						}
-					/>
-
 						<div
 							style={{
 								display: 'flex',
@@ -241,7 +279,7 @@ export default function Event({ event }: { event: IEvent }) {
 								userSelect: 'none',
 							}}
 							onClick={() => {
-							setHaveRideThere((h) => !h);
+								setHaveRide((h) => !h);
 							}}
 						>
 							<input
@@ -252,35 +290,13 @@ export default function Event({ event }: { event: IEvent }) {
 									height: '2em',
 									margin: '1em',
 								}}
-							checked={haveRideThere}
+								checked={haveRide}
 							/>
-						I don't have a ride there yet
+							I don't have any way to get there yet
 						</div>
-
+					)}
-					<div
-						style={{
-							display: 'flex',
-							alignItems: 'center',
-							cursor: 'pointer',
-							userSelect: 'none',
-						}}
-						onClick={() => setHaveRideBack((h) => !h)}
-					>
-						<input
-							type="checkbox"
-							style={{
-								borderRadius: '1em',
-								width: '2em',
-								height: '2em',
-								margin: '1em',
-								outline: 'none',
-							}}
-							checked={haveRideBack}
-						/>
-						I don't have a ride back yet
-					</div>
-
 					<Carpools event={event} />
+					<People event={event} />
 				</>
 			)}
 		</UISecondaryBox>