eventcreator ux - disable inputs while creating

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>
 			)}

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)) {

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

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)}
 		/>
 	);