From f0c4dd3c408c861952737ad037316a6dec6f97c3 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Wed, 11 Aug 2021 20:58:20 -0400 Subject: [PATCH] add group link resolver --- src/components/App.tsx | 5 ++ src/components/GroupSharedLinkResolver.tsx | 67 ++++++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 src/components/GroupSharedLinkResolver.tsx diff --git a/src/components/App.tsx b/src/components/App.tsx index ecd2c58..b751827 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -16,6 +16,7 @@ const Authenticator = lazy(() => import('./Authentication/Authenticator')); const CarpoolPage = lazy(() => import('./Carpool/CarpoolPage')); const EventPage = lazy(() => import('./Event/EventPage')); const GroupPage = lazy(() => import('./Group/GroupPage')); +const GroupSharedLinkResolver = lazy(() => import('./GroupSharedLinkResolver')); const style: CSSProperties = { display: 'flex', @@ -59,6 +60,10 @@ export default function App() {
+ diff --git a/src/components/GroupSharedLinkResolver.tsx b/src/components/GroupSharedLinkResolver.tsx new file mode 100644 index 0000000..d60c4ba --- /dev/null +++ b/src/components/GroupSharedLinkResolver.tsx @@ -0,0 +1,67 @@ +import { useCallback, useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; +import { joinGroup, resolveCode } from './api'; +import { GroupPreview } from './GroupJoinerLink'; +import UIButton from './UI/UIButton'; +import UILink from './UI/UILink'; + +export default function GroupSharedLinkResolver() { + const { code } = useParams<{ code: string }>(); + const [group, setGroup] = useState(); + const [resolving, setResolving] = useState(false); + const [joining, setJoining] = useState(false); + + useEffect(() => { + setResolving(true); + resolveCode(code) + .then(setGroup) + .finally(() => setResolving(false)); + }, [code]); + + const join = useCallback(() => { + const id = group?.id; + if (code && id) { + console.log('Joining a group with the code', code); + setJoining(true); + joinGroup(id, code) + .then(({ status }) => { + if (status === 'success') { + window.location.href = '/groups/' + id; + } + }) + .finally(() => setJoining(false)); + } + }, [code, group?.id]); + + return ( +
+ {resolving ? ( +
Searching for group...

+ ) : !group ? ( +
No group found

+ ) : ( + <> +
{group.name}

+ {joining ? ( + 'Joining...' + ) : ( + + Join + + )} + + )} +
+ Home +
+ ); +}