From ca1c6fe4743f970c5c946f956f9f13ff547b43db Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Thu, 24 Jun 2021 11:49:09 -0400
Subject: [PATCH] eventcreator ux - disable inputs while creating

---
 src/components/NewUI/EventCreator.tsx         | 8 ++++----
 src/components/NewUI/UIDatetimeInput.tsx      | 3 +++
 src/components/NewUI/UIPlacesAutocomplete.tsx | 4 ++++
 src/components/NewUI/UITextInput.tsx          | 3 +++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/NewUI/EventCreator.tsx b/src/components/NewUI/EventCreator.tsx
index 18e3269..6a2f6af 100644
--- a/src/components/NewUI/EventCreator.tsx
+++ b/src/components/NewUI/EventCreator.tsx
@@ -49,13 +49,13 @@ export default function EventCreator({ group }: { group: IGroup }) {
 			</h1>
 			<h3 style={{ textAlign: 'center', marginTop: '0.5rem' }}>{group.name}</h3>
 			Name
-			<UITextInput value={name} onChangeText={setName} />
+			<UITextInput value={name} onChangeText={setName} disabled={creating} />
 			<br />
 			Start time
-			<UIDatetimeInput onChangedDate={setStartTime} />
+			<UIDatetimeInput onChangedDate={setStartTime} disabled={creating} />
 			<br />
 			End time
-			<UIDatetimeInput onChangedDate={setEndTime} />
+			<UIDatetimeInput onChangedDate={setEndTime} disabled={creating} />
 			<br />
 			Location
 			<UIPlacesAutocomplete
@@ -71,7 +71,7 @@ export default function EventCreator({ group }: { group: IGroup }) {
 					{creating ? 'Creating event' : 'Create event'}
 				</UIButton>
 			) : (
-				<span>
+				<span style={{ marginTop: '1rem' }}>
 					Created <b>{name}</b>.
 				</span>
 			)}
diff --git a/src/components/NewUI/UIDatetimeInput.tsx b/src/components/NewUI/UIDatetimeInput.tsx
index e7197c6..4303033 100644
--- a/src/components/NewUI/UIDatetimeInput.tsx
+++ b/src/components/NewUI/UIDatetimeInput.tsx
@@ -9,13 +9,16 @@ const baseStyle = {
 
 export default function UIDatetimeInput({
 	onChangedDate,
+	disabled = false,
 }: {
 	onChangedDate: (date: Date | null) => void;
+	disabled?: boolean;
 }) {
 	return (
 		<input
 			style={baseStyle}
 			type="datetime-local"
+			disabled={disabled}
 			onChange={(e) => {
 				const number = e.target.valueAsNumber;
 				if (!isNaN(number)) {
diff --git a/src/components/NewUI/UIPlacesAutocomplete.tsx b/src/components/NewUI/UIPlacesAutocomplete.tsx
index 55d875a..ae936af 100644
--- a/src/components/NewUI/UIPlacesAutocomplete.tsx
+++ b/src/components/NewUI/UIPlacesAutocomplete.tsx
@@ -22,6 +22,7 @@ function SuggestionsList({
 				borderBottomRightRadius: '0.5em',
 				backgroundColor: 'white',
 				maxWidth: '100%',
+				textAlign: 'left',
 			}}
 		>
 			{suggestions.map((suggestion) => (
@@ -42,9 +43,11 @@ function SuggestionsList({
 export default function UIPlacesAutocomplete({
 	onSelected,
 	placeholder = 'Enter a location',
+	disabled = false,
 }: {
 	onSelected?: (address: string, placeID: string) => void;
 	placeholder?: string;
+	disabled?: boolean;
 }) {
 	const [location, setLocation] = useState('');
 	const suggestionsRef = useRef<readonly Suggestion[]>([]);
@@ -89,6 +92,7 @@ export default function UIPlacesAutocomplete({
 								},
 								placeholder,
 							})}
+							disabled={disabled}
 						/>
 						{suggestionsRef.current.length > 0 && (
 							<SuggestionsList
diff --git a/src/components/NewUI/UITextInput.tsx b/src/components/NewUI/UITextInput.tsx
index 50339f6..bdf7d04 100644
--- a/src/components/NewUI/UITextInput.tsx
+++ b/src/components/NewUI/UITextInput.tsx
@@ -9,15 +9,18 @@ const baseStyle = {
 
 export default function UITextInput({
 	value,
+	disabled = false,
 	onChangeText,
 }: {
 	value: string;
+	disabled?: boolean;
 	onChangeText: (text: string) => void;
 }) {
 	return (
 		<input
 			style={baseStyle}
 			value={value}
+			disabled={disabled}
 			onChange={(e) => onChangeText(e.target.value)}
 		/>
 	);