From 9ecf21dab3f7e72549a40ac427eb8211e34fddb1 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Tue, 13 Jul 2021 18:33:33 -0400
Subject: [PATCH] give link to new carpool when creating a carpool
---
src/components/Event/EventCarpools.tsx | 43 ++++++++++++++++----------
src/components/api.ts | 2 +-
2 files changed, 27 insertions(+), 18 deletions(-)
diff --git a/src/components/Event/EventCarpools.tsx b/src/components/Event/EventCarpools.tsx
index ec7aabf..eb531dc 100644
--- a/src/components/Event/EventCarpools.tsx
+++ b/src/components/Event/EventCarpools.tsx
@@ -1,12 +1,12 @@
// import CallMergeIcon from '@material-ui/icons/CallMerge';
import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople';
-import { useMemo } from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
import { createCarpool } from '../api';
import { lightgrey } from '../colors';
import { useMe } from '../hooks';
import { IEvent } from '../types';
import UIButton from '../UI/UIButton';
+import UILink from '../UI/UILink';
function CarpoolRow({ carpool }: { carpool: IEvent['carpools'][0] }) {
const PADDING = '1rem';
@@ -49,6 +49,8 @@ type CreationStatus = null | 'pending' | 'completed' | 'errored';
export default function Carpools({ event }: { event: IEvent }) {
const [creationStatus, setCreationStatus] = useState<CreationStatus>(null);
+ const [createdCarpoolId, setCreatedCarpoolId] = useState<null | number>(null);
+
const me = useMe()!;
const myCarpool = useMemo(
() =>
@@ -63,14 +65,13 @@ export default function Carpools({ event }: { event: IEvent }) {
setCreationStatus('pending');
createCarpool({ name: me.name + "'s Carpool", eventId: event.id })
- .then(() => {
+ .then(({ id }) => {
+ setCreatedCarpoolId(id);
setCreationStatus('completed');
})
.catch(() => {
setCreationStatus('errored');
});
-
- setTimeout(() => setCreationStatus('completed'), 1000);
}, [event.id, me.name]);
return (
@@ -80,20 +81,28 @@ export default function Carpools({ event }: { event: IEvent }) {
<span>You are already in a carpool for this event</span>
) : (
<>
- <span>Available to drive?</span>
{creationStatus !== 'completed' ? (
- <UIButton
- onClick={createEmptyCarpool}
- style={{ backgroundColor: lightgrey }}
- >
- {creationStatus === null
- ? 'Create Empty Carpool'
- : creationStatus === 'pending'
- ? 'Creating...'
- : 'Errored'}
- </UIButton>
+ <>
+ <span>Available to drive?</span>
+ <UIButton
+ onClick={createEmptyCarpool}
+ style={{ backgroundColor: lightgrey }}
+ >
+ {creationStatus === null
+ ? 'Create Empty Carpool'
+ : creationStatus === 'pending'
+ ? 'Creating...'
+ : 'Errored'}
+ </UIButton>
+ </>
) : (
- 'Created!'
+ <span>
+ Created{' '}
+ <UILink href={`/carpools/${createdCarpoolId}`}>
+ your carpool
+ </UILink>
+ !
+ </span>
)}
</>
)}
diff --git a/src/components/api.ts b/src/components/api.ts
index 1a484ef..0b26b31 100644
--- a/src/components/api.ts
+++ b/src/components/api.ts
@@ -178,7 +178,7 @@ export async function createCarpool({
}: {
eventId: number;
name: string;
-}) {
+}): Promise<{ id: number }> {
return await post('/carpools/', { eventId, name });
}