improve event creation ux

src/components/NewUI/Event.tsx

@@ -11,7 +11,7 @@ const lightgrey = '#e0e0e0';
 export type IEvent = {
 	name: string;
 	group: string;
-	address: string;
+	formattedAddress: string;
 	startTime: string;
 	endTime: string;
 };
@@ -47,7 +47,7 @@ function formatStartAndEndTime(
 export default function Event({
 	name,
 	group,
-	address,
+	formattedAddress,
 	startTime,
 	endTime,
 }: IEvent) {
@@ -71,6 +71,7 @@ export default function Event({
 			<div
 				style={{
 					marginTop: '0.5rem',
+					textAlign: 'left',
 				}}
 			>
 				<span
@@ -82,13 +83,14 @@ export default function Event({
 					{formatStartAndEndTime(startTime, endTime)}
 				</span>
 				<br />
+				<br />
 				<span
 					style={{
 						color: '#303030',
 					}}
 				>
 					<b>Where: </b>
-					{address}
+					{formattedAddress}
 				</span>
 			</div>
 			<div

src/components/NewUI/EventCreator.tsx

@@ -7,25 +7,40 @@ import UIPlacesAutocomplete from './UIPlacesAutocomplete';
 import UISecondaryBox from './UISecondaryBox';
 import UITextInput from './UITextInput';
 
+const noop = () => {};
+
 export default function EventCreator({ group }: { group: IGroup }) {
 	const [name, setName] = useState('');
 	const [startTime, setStartTime] = useState<Date | null>(null);
 	const [endTime, setEndTime] = useState<Date | null>(null);
 	const [placeId, setPlaceId] = useState<string | null>(null);
+	const [creating, setCreating] = useState(false);
+	const [createdEventId, setCreatedEventId] = useState(-1);
+
+	const buttonEnabled =
+		name.length > 0 &&
+		startTime != null &&
+		endTime != null &&
+		placeId != null &&
+		!creating;
 
 	const createEvent = useCallback(() => {
-		post('/events', {
+		if (!creating) {
-			name,
+			setCreating(true);
-			startTime,
+			post('/events', {
-			endTime,
+				name,
-			groupId: group.id,
+				startTime,
-			placeId,
+				endTime,
-		})
+				groupId: group.id,
-			.then((response) => response.json())
+				placeId,
-			.then(({ id }) => {
+			})
-				window.location.href = `/groups/${id}`;
+				.then((response) => response.json())
-			});
+				.then(({ id }) => {
-	}, [name, startTime, endTime, group.id, placeId]);
+					setCreatedEventId(id);
+				})
+				.finally(() => setCreating(false));
+		}
+	}, [creating, name, startTime, endTime, group.id, placeId]);
 
 	return (
 		<UISecondaryBox style={{ width: '100%', boxSizing: 'border-box' }}>
@@ -48,7 +63,18 @@ export default function EventCreator({ group }: { group: IGroup }) {
 					setPlaceId(placeId);
 				}}
 			/>
-			<UIButton onClick={createEvent}>Create Event</UIButton>
+			{createdEventId === -1 ? (
+				<UIButton
+					onClick={buttonEnabled ? createEvent : noop}
+					style={!buttonEnabled ? { color: 'grey' } : {}}
+				>
+					{creating ? 'Creating event' : 'Create event'}
+				</UIButton>
+			) : (
+				<span>
+					Created <b>{name}</b>.
+				</span>
+			)}
 		</UISecondaryBox>
 	);
 }

src/components/NewUI/GroupCreator.tsx

@@ -10,23 +10,37 @@ export default function GroupCreator() {
 	const [creationSuccessful, setCreationSuccessful] =
 		useState<boolean | null>(null);
 	const [createdGroupId, setCreatedGroupId] = useState(0);
+	const [creating, setCreating] = useState(false);
 	const createGroup = useCallback(() => {
-		post('/groups', {
+		if (!creating) {
-			name,
+			setCreating(true);
-		})
+			post('/groups', {
-			.then((res) => res.json())
+				name,
-			.then(({ id }) => {
+			})
-				setCreationSuccessful(true);
+				.then((res) => res.json())
-				setCreatedGroupId(id);
+				.then(({ id }) => {
-			});
+					setCreationSuccessful(true);
-	}, [name]);
+					setCreatedGroupId(id);
+				})
+				.finally(() => {
+					setCreating(false);
+				});
+		}
+	}, [creating, name]);
+
+	const buttonEnabled = name.length > 0 && !creating;
 
 	return (
 		<UISecondaryBox style={{ width: '100%', boxSizing: 'border-box' }}>
 			<h1 style={{ textAlign: 'center' }}>Create Group</h1>
 			Name
 			<UITextInput onChangeText={setName} value={name} />
-			<UIButton onClick={createGroup}>Create group</UIButton>
+			<UIButton
+				onClick={createGroup}
+				style={!buttonEnabled ? { color: 'grey' } : {}}
+			>
+				{creating ? 'Creating group' : 'Create group'}
+			</UIButton>
 			{creationSuccessful !== null &&
 				(creationSuccessful ? (
 					<span>

src/components/NewUI/GroupJoinerLink.tsx

@@ -20,7 +20,7 @@ function GroupJoiner() {
 	const buttonEnabled = code.length > 0 && !joining;
 
 	return (
-		<UISecondaryBox style={{ width: '100%' }}>
+		<UISecondaryBox style={{ width: '100%', textAlign: 'center' }}>
 			<h1>Join Group</h1>
 			Code
 			<UITextInput value={code} onChangeText={setCode} />