diff --git a/src/components/NewUI/Event.tsx b/src/components/NewUI/Event.tsx
index 5949c70..6b108f0 100644
--- a/src/components/NewUI/Event.tsx
+++ b/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({
+
Where:
- {address}
+ {formattedAddress}
{};
+
export default function EventCreator({ group }: { group: IGroup }) {
const [name, setName] = useState('');
const [startTime, setStartTime] = useState(null);
const [endTime, setEndTime] = useState(null);
const [placeId, setPlaceId] = useState(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', {
- name,
- startTime,
- endTime,
- groupId: group.id,
- placeId,
- })
- .then((response) => response.json())
- .then(({ id }) => {
- window.location.href = `/groups/${id}`;
- });
- }, [name, startTime, endTime, group.id, placeId]);
+ if (!creating) {
+ setCreating(true);
+ post('/events', {
+ name,
+ startTime,
+ endTime,
+ groupId: group.id,
+ placeId,
+ })
+ .then((response) => response.json())
+ .then(({ id }) => {
+ setCreatedEventId(id);
+ })
+ .finally(() => setCreating(false));
+ }
+ }, [creating, name, startTime, endTime, group.id, placeId]);
return (
@@ -48,7 +63,18 @@ export default function EventCreator({ group }: { group: IGroup }) {
setPlaceId(placeId);
}}
/>
- Create Event
+ {createdEventId === -1 ? (
+
+ {creating ? 'Creating event' : 'Create event'}
+
+ ) : (
+
+ Created {name}.
+
+ )}
);
}
diff --git a/src/components/NewUI/GroupCreator.tsx b/src/components/NewUI/GroupCreator.tsx
index efafe92..f967386 100644
--- a/src/components/NewUI/GroupCreator.tsx
+++ b/src/components/NewUI/GroupCreator.tsx
@@ -10,23 +10,37 @@ export default function GroupCreator() {
const [creationSuccessful, setCreationSuccessful] =
useState(null);
const [createdGroupId, setCreatedGroupId] = useState(0);
+ const [creating, setCreating] = useState(false);
const createGroup = useCallback(() => {
- post('/groups', {
- name,
- })
- .then((res) => res.json())
- .then(({ id }) => {
- setCreationSuccessful(true);
- setCreatedGroupId(id);
- });
- }, [name]);
+ if (!creating) {
+ setCreating(true);
+ post('/groups', {
+ name,
+ })
+ .then((res) => res.json())
+ .then(({ id }) => {
+ setCreationSuccessful(true);
+ setCreatedGroupId(id);
+ })
+ .finally(() => {
+ setCreating(false);
+ });
+ }
+ }, [creating, name]);
+
+ const buttonEnabled = name.length > 0 && !creating;
return (
Create Group
Name
- Create group
+
+ {creating ? 'Creating group' : 'Create group'}
+
{creationSuccessful !== null &&
(creationSuccessful ? (
diff --git a/src/components/NewUI/GroupJoinerLink.tsx b/src/components/NewUI/GroupJoinerLink.tsx
index 099734f..f42688c 100644
--- a/src/components/NewUI/GroupJoinerLink.tsx
+++ b/src/components/NewUI/GroupJoinerLink.tsx
@@ -20,7 +20,7 @@ function GroupJoiner() {
const buttonEnabled = code.length > 0 && !joining;
return (
-
+
Join Group
Code