From f24f7b65729c5b3468c9da41e25cd15f6a1ed100 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Thu, 24 Jun 2021 13:56:58 -0400
Subject: [PATCH] update availability selector

---
 src/components/NewUI/Availability.tsx | 47 +++++++++++++++++++++++++--
 src/components/NewUI/Group.tsx        |  2 --
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/NewUI/Availability.tsx b/src/components/NewUI/Availability.tsx
index e7fca00..1da246b 100644
--- a/src/components/NewUI/Availability.tsx
+++ b/src/components/NewUI/Availability.tsx
@@ -1,5 +1,10 @@
 import { CSSProperties } from '@material-ui/styles';
-import { MouseEventHandler, useCallback, useState } from 'react';
+import {
+	MouseEventHandler,
+	ReactEventHandler,
+	useCallback,
+	useState,
+} from 'react';
 
 export type AvailabilityKind = 'going' | 'interested' | 'not-interested';
 
@@ -54,7 +59,8 @@ function Option({
 	);
 }
 
-export default function Availability({
+// eslint-disable-next-line
+function Availability__old({
 	selected,
 	onSelected: onSelectedInner,
 }: {
@@ -106,3 +112,40 @@ export default function Availability({
 		</div>
 	);
 }
+
+export default function Availability({
+	selected,
+	onSelected: onSelectedInner,
+}: {
+	selected: AvailabilityKind;
+	onSelected: (kind: AvailabilityKind) => void;
+}) {
+	const onSelected: ReactEventHandler<HTMLSelectElement> = useCallback(
+		(event) => {
+			onSelectedInner(
+				// @ts-ignore
+				event.target.value
+			);
+			event.preventDefault();
+		},
+		[onSelectedInner]
+	);
+	return (
+		<select
+			value={selected}
+			onChange={onSelected}
+			style={{
+				fontFamily: 'Inter',
+				fontSize: '1rem',
+				border: '0px solid black',
+				borderRadius: '0.5rem',
+				padding: '0.5rem',
+				marginTop: '1rem',
+			}}
+		>
+			<option value="going">Going</option>
+			<option value="interested">Interested</option>
+			<option value="not-interested">Not interested</option>
+		</select>
+	);
+}
diff --git a/src/components/NewUI/Group.tsx b/src/components/NewUI/Group.tsx
index acb6c43..eed6e50 100644
--- a/src/components/NewUI/Group.tsx
+++ b/src/components/NewUI/Group.tsx
@@ -46,8 +46,6 @@ export default function Group() {
 
 	const { name } = group;
 
-	console.log({ events });
-
 	return (
 		<div
 			style={{