add better group creation ui

src/components/NewUI/EventCreatorLink.tsx

@@ -14,13 +14,17 @@ export default function EventCreatorLink({ group }: { group: IGroup }) {
 				style={{
 					cursor: 'pointer',
 					userSelect: 'none',
-					marginBottom: '1rem',
 				}}
 				onClick={toggle}
 			>
 				Create Event
 			</div>
-			{open && <EventCreator group={group} />}
+			{open && (
+				<>
+					<br />
+					<EventCreator group={group} />
+				</>
+			)}
 		</div>
 	);
 }

src/components/NewUI/Group.tsx

@@ -5,6 +5,7 @@ import { IEvent } from './Event';
 import EventCreatorLink from './EventCreatorLink';
 import EventStream from './EventStream';
 import GroupSettingsLink from './GroupSettingsLink';
+import UILink from './UILink';
 
 export type IGroup = {
 	id: number;
@@ -57,8 +58,13 @@ export default function Group() {
 			}}
 		>
 			<h1>{name}</h1>
+			<UILink href="/">Home</UILink>
+			<br />
+			<br />
 			<GroupSettingsLink group={group} />
+			<br />
 			<EventCreatorLink group={group} />
+			<br />
 			<EventStream events={events} />
 		</div>
 	);

src/components/NewUI/GroupCreator.tsx

@@ -1,14 +1,23 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { post } from './api';
 import UIButton from './UIButton';
+import UILink from './UILink';
 import UISecondaryBox from './UISecondaryBox';
 import UITextInput from './UITextInput';
 
 export default function GroupCreator() {
 	const [name, setName] = useState('');
+	const [creationSuccessful, setCreationSuccessful] =
+		useState<boolean | null>(null);
+	const [createdGroupId, setCreatedGroupId] = useState(0);
 	const createGroup = useCallback(() => {
 		post('/groups', {
 			name,
+		})
+			.then((res) => res.json())
+			.then(({ id }) => {
+				setCreationSuccessful(true);
+				setCreatedGroupId(id);
 			});
 	}, [name]);
 
@@ -18,6 +27,19 @@ export default function GroupCreator() {
 			Name
 			<UITextInput onChangeText={setName} value={name} />
 			<UIButton onClick={createGroup}>Create group</UIButton>
+			{creationSuccessful !== null &&
+				(creationSuccessful ? (
+					<span>
+						<UILink href={`/groups/${createdGroupId}`}>
+							<b>{name}</b>
+						</UILink>{' '}
+						has been created.
+					</span>
+				) : (
+					<span>
+						For some reason, <b>{name}</b> could not be created.
+					</span>
+				))}
 		</UISecondaryBox>
 	);
 }

src/components/NewUI/GroupSettingsLink.tsx

@@ -53,13 +53,17 @@ export default function GroupSettingsLink({ group }: { group: IGroup }) {
 				style={{
 					cursor: 'pointer',
 					userSelect: 'none',
-					marginBottom: '1rem',
 				}}
 				onClick={toggle}
 			>
 				Settings
 			</div>
-			{open && <GroupSettings group={group} />}
+			{open && (
+				<>
+					<br />
+					<GroupSettings group={group} />
+				</>
+			)}
 		</div>
 	);
 }

src/components/NewUI/UIButton.tsx

@@ -25,6 +25,7 @@ export default function UIButton({
 		}
 		return { ...baseStyle, ...style };
 	}, [style]);
+
 	return (
 		<div style={computedStyle} onClick={onClick}>
 			{children}