add availability picker

src/components/NewUI/Availability.tsx

@@ -0,0 +1,92 @@
+import { CSSProperties } from '@material-ui/styles';
+import { useCallback, useMemo } from 'react';
+
+export type AvailabilityKind =
+	| 'going/can-bring-someone'
+	| 'going/cannot-bring-someone'
+	| 'interested'
+	| 'not-interested';
+
+const availabilityNames: Record<AvailabilityKind, string> = {
+	'going/can-bring-someone': 'Going; Can bring someone',
+	'going/cannot-bring-someone': "Going; Can't bring someone",
+	interested: 'Interested',
+	'not-interested': 'Not interested',
+};
+
+const optionStyle: CSSProperties = {
+	height: '3rem',
+	backgroundColor: 'white',
+	display: 'flex',
+	flexDirection: 'column',
+	justifyContent: 'center',
+	alignItems: 'center',
+	cursor: 'pointer',
+};
+
+function Option({
+	bind,
+	current,
+	onSelected,
+}: {
+	bind: AvailabilityKind;
+	current: AvailabilityKind;
+	onSelected: (kind: AvailabilityKind) => void;
+}) {
+	const style = useMemo(
+		() =>
+			current === bind
+				? { ...optionStyle, backgroundColor: '#5080f0', color: 'white' }
+				: optionStyle,
+		[bind, current]
+	);
+
+	const select = useCallback(() => {
+		onSelected(bind);
+	}, [onSelected, bind]);
+
+	return (
+		<div style={style} onClick={select}>
+			{availabilityNames[bind]}
+		</div>
+	);
+}
+
+export default function Availability({
+	selected,
+	onSelected,
+}: {
+	selected: AvailabilityKind;
+	onSelected: (kind: AvailabilityKind) => void;
+}) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				borderRadius: '0.5rem',
+				border: '1px solid lightgrey',
+				overflow: 'hidden',
+				marginTop: '1rem',
+				marginBottom: '1rem',
+			}}
+		>
+			<Option
+				bind="going/can-bring-someone"
+				current={selected}
+				onSelected={onSelected}
+			/>
+			<Option
+				bind="going/cannot-bring-someone"
+				current={selected}
+				onSelected={onSelected}
+			/>
+			<Option bind="interested" current={selected} onSelected={onSelected} />
+			<Option
+				bind="not-interested"
+				current={selected}
+				onSelected={onSelected}
+			/>
+		</div>
+	);
+}

src/components/NewUI/Event.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import Availability, { AvailabilityKind } from './Availability';
 import UIButton from './UIButton';
 import UIPlacesAutocomplete from './UIPlacesAutocomplete';
 import UISecondaryBox from './UISecondaryBox';
@@ -44,30 +45,29 @@ function formatStartAndEndTime(
 	}
 }
 
-export default function Event({
-	name,
-	group,
-	formattedAddress,
-	startTime,
-	endTime,
-}: IEvent) {
-	const [needRideThere, setNeedRideThere] = useState(false);
-	const [needRideBack, setNeedRideBack] = useState(false);
-	const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState('');
-	const [rideBackDropoffPlaceID, setRideBackDropoffPlaceID] = useState('');
-	const [confirmed, setConfirmed] = useState(false);
-
+function GroupName({ name }: { name: string }) {
 	return (
-		<UISecondaryBox>
-			<UISecondaryHeader>{name}</UISecondaryHeader>
 		<span
 			style={{
 				color: '#303030',
 				textAlign: 'center',
 			}}
 		>
-				{group}
+			{name}
 		</span>
+	);
+}
+
+function Details({
+	startTime,
+	endTime,
+	formattedAddress,
+}: {
+	startTime: string;
+	endTime: string;
+	formattedAddress: string;
+}) {
+	return (
 		<div
 			style={{
 				marginTop: '0.5rem',
@@ -93,6 +93,30 @@ export default function Event({
 				{formattedAddress}
 			</span>
 		</div>
+	);
+}
+
+export default function Event({
+	name,
+	group,
+	formattedAddress,
+	startTime,
+	endTime,
+}: IEvent) {
+	const [needRideThere, setNeedRideThere] = useState(false);
+	const [needRideBack, setNeedRideBack] = useState(false);
+	const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState('');
+	const [rideBackDropoffPlaceID, setRideBackDropoffPlaceID] = useState('');
+	const [confirmed, setConfirmed] = useState(false);
+	const [availability, setAvailability] =
+		useState<AvailabilityKind>('not-interested');
+
+	return (
+		<UISecondaryBox>
+			<UISecondaryHeader>{name}</UISecondaryHeader>
+			<GroupName name={group} />
+			<Details {...{ startTime, endTime, formattedAddress }} />
+			<Availability selected={availability} onSelected={setAvailability} />
 			<div
 				style={{
 					display: 'flex',