From 25fb67a9dd2c401b1a19f2e595a518e6442729a2 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Wed, 23 Jun 2021 19:42:38 -0400
Subject: [PATCH] add better group creation ui
---
src/components/NewUI/EventCreatorLink.tsx | 8 +++++--
src/components/NewUI/Group.tsx | 6 +++++
src/components/NewUI/GroupCreator.tsx | 26 ++++++++++++++++++++--
src/components/NewUI/GroupSettingsLink.tsx | 8 +++++--
src/components/NewUI/UIButton.tsx | 1 +
5 files changed, 43 insertions(+), 6 deletions(-)
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
</div>
- {open && <EventCreator group={group} />}
+ {open && (
+ <>
+ <br />
+ <EventCreator group={group} />
+ </>
+ )}
</div>
);
}
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() {
}}
>
<h1>{name}</h1>
+ <UILink href="/">Home</UILink>
+ <br />
+ <br />
<GroupSettingsLink group={group} />
+ <br />
<EventCreatorLink group={group} />
+ <br />
<EventStream events={events} />
</div>
);
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<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]);
return (
@@ -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>
);
}
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
</div>
- {open && <GroupSettings group={group} />}
+ {open && (
+ <>
+ <br />
+ <GroupSettings group={group} />
+ </>
+ )}
</div>
);
}
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 (
<div style={computedStyle} onClick={onClick}>
{children}