diff --git a/src/components/NewUI/EventCreatorLink.tsx b/src/components/NewUI/EventCreatorLink.tsx index 790dc50..8f2b069 100644 --- a/src/components/NewUI/EventCreatorLink.tsx +++ b/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 - {open && } + {open && ( + <> +
+ + + )} ); } diff --git a/src/components/NewUI/Group.tsx b/src/components/NewUI/Group.tsx index da4382f..46e4774 100644 --- a/src/components/NewUI/Group.tsx +++ b/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() { }} >

{name}

+ Home +
+
+
+
); diff --git a/src/components/NewUI/GroupCreator.tsx b/src/components/NewUI/GroupCreator.tsx index dac9088..efafe92 100644 --- a/src/components/NewUI/GroupCreator.tsx +++ b/src/components/NewUI/GroupCreator.tsx @@ -1,15 +1,24 @@ -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(null); + const [createdGroupId, setCreatedGroupId] = useState(0); const createGroup = useCallback(() => { post('/groups', { name, - }); + }) + .then((res) => res.json()) + .then(({ id }) => { + setCreationSuccessful(true); + setCreatedGroupId(id); + }); }, [name]); return ( @@ -18,6 +27,19 @@ export default function GroupCreator() { Name Create group + {creationSuccessful !== null && + (creationSuccessful ? ( + + + {name} + {' '} + has been created. + + ) : ( + + For some reason, {name} could not be created. + + ))} ); } diff --git a/src/components/NewUI/GroupSettingsLink.tsx b/src/components/NewUI/GroupSettingsLink.tsx index 116ccdd..4903cde 100644 --- a/src/components/NewUI/GroupSettingsLink.tsx +++ b/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 - {open && } + {open && ( + <> +
+ + + )} ); } diff --git a/src/components/NewUI/UIButton.tsx b/src/components/NewUI/UIButton.tsx index 483813f..2d145cd 100644 --- a/src/components/NewUI/UIButton.tsx +++ b/src/components/NewUI/UIButton.tsx @@ -25,6 +25,7 @@ export default function UIButton({ } return { ...baseStyle, ...style }; }, [style]); + return (
{children}