From e422fec6f5f3f3e4db987e55e807d69574f783b9 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Thu, 24 Jun 2021 12:30:24 -0400
Subject: [PATCH] add availability picker

---
 src/components/NewUI/Availability.tsx | 92 +++++++++++++++++++++++++++
 src/components/NewUI/Event.tsx        | 90 ++++++++++++++++----------
 2 files changed, 149 insertions(+), 33 deletions(-)
 create mode 100644 src/components/NewUI/Availability.tsx

diff --git a/src/components/NewUI/Availability.tsx b/src/components/NewUI/Availability.tsx
new file mode 100644
index 0000000..75718bf
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/src/components/NewUI/Event.tsx b/src/components/NewUI/Event.tsx
index 6b108f0..e25ee6f 100644
--- a/src/components/NewUI/Event.tsx
+++ b/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,6 +45,57 @@ function formatStartAndEndTime(
 	}
 }
 
+function GroupName({ name }: { name: string }) {
+	return (
+		<span
+			style={{
+				color: '#303030',
+				textAlign: 'center',
+			}}
+		>
+			{name}
+		</span>
+	);
+}
+
+function Details({
+	startTime,
+	endTime,
+	formattedAddress,
+}: {
+	startTime: string;
+	endTime: string;
+	formattedAddress: string;
+}) {
+	return (
+		<div
+			style={{
+				marginTop: '0.5rem',
+				textAlign: 'left',
+			}}
+		>
+			<span
+				style={{
+					color: '#303030',
+				}}
+			>
+				<b>When: </b>
+				{formatStartAndEndTime(startTime, endTime)}
+			</span>
+			<br />
+			<br />
+			<span
+				style={{
+					color: '#303030',
+				}}
+			>
+				<b>Where: </b>
+				{formattedAddress}
+			</span>
+		</div>
+	);
+}
+
 export default function Event({
 	name,
 	group,
@@ -56,43 +108,15 @@ export default function Event({
 	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>
-			<span
-				style={{
-					color: '#303030',
-					textAlign: 'center',
-				}}
-			>
-				{group}
-			</span>
-			<div
-				style={{
-					marginTop: '0.5rem',
-					textAlign: 'left',
-				}}
-			>
-				<span
-					style={{
-						color: '#303030',
-					}}
-				>
-					<b>When: </b>
-					{formatStartAndEndTime(startTime, endTime)}
-				</span>
-				<br />
-				<br />
-				<span
-					style={{
-						color: '#303030',
-					}}
-				>
-					<b>Where: </b>
-					{formattedAddress}
-				</span>
-			</div>
+			<GroupName name={group} />
+			<Details {...{ startTime, endTime, formattedAddress }} />
+			<Availability selected={availability} onSelected={setAvailability} />
 			<div
 				style={{
 					display: 'flex',