diff --git a/lib/src/Components/Onboarding/InvitePage.tsx b/lib/src/Components/Onboarding/InvitePage.tsx index 800766a8..41398849 100644 --- a/lib/src/Components/Onboarding/InvitePage.tsx +++ b/lib/src/Components/Onboarding/InvitePage.tsx @@ -1,12 +1,14 @@ -import { useEffect } from 'react' +import { useEffect, useState } from 'react' import { useNavigate, useParams } from 'react-router-dom' import { toast } from 'react-toastify' import { useAuth } from '#components/Auth/useAuth' +import { useAllItemsLoaded, useItems } from '#components/Map/hooks/useItems' import { useMyProfile } from '#components/Map/hooks/useMyProfile' import { MapOverlayPage } from '#components/Templates/MapOverlayPage' import type { InviteApi } from '#types/InviteApi' +import type { Item } from '#types/Item' interface Props { inviteApi: InviteApi @@ -21,9 +23,13 @@ export function InvitePage({ inviteApi }: Props) { const navigate = useNavigate() const { myProfile, isMyProfileLoaded } = useMyProfile() + const items = useItems() + const allItemsLoaded = useAllItemsLoaded() && items.length > 0 if (!id) throw new Error('Invite ID is required') + const [invitingProfile, setInvitingProfile] = useState(null) + useEffect(() => { async function redeemInvite() { if (!id) throw new Error('Invite ID is required') @@ -46,7 +52,29 @@ export function InvitePage({ inviteApi }: Props) { } } - if (!isAuthenticationInitialized) return + async function validateInvite() { + if (!id) throw new Error('Invite ID is required') + + const invitingProfileId = await inviteApi.validateInvite(id) + + if (!invitingProfileId) { + toast.error('Invalid invite code') + navigate('/') + return + } + + const invitingProfile = items.find((item) => item.id === invitingProfileId) + + if (!invitingProfile) { + toast.error('Inviting profile not found') + navigate('/') + return + } + + setInvitingProfile(invitingProfile) + } + + if (!isAuthenticationInitialized || !allItemsLoaded) return if (isAuthenticated) { void redeemInvite() @@ -54,8 +82,7 @@ export function InvitePage({ inviteApi }: Props) { // Save invite code in local storage localStorage.setItem('inviteCode', id) - // Redirect to login page - navigate('/login') + void validateInvite() } }, [ id, @@ -65,11 +92,45 @@ export function InvitePage({ inviteApi }: Props) { isAuthenticationInitialized, myProfile, isMyProfileLoaded, + items, + allItemsLoaded, ]) + const goToSignup = () => { + navigate('/signup') + } + + const goToLogin = () => { + navigate('/login') + } + return (

Invitation

+ {invitingProfile ? ( +
+

Welcome to Utopia!

+

+ You have been invited by: {invitingProfile.name} to join the Utopia + community. +

+
+ + {!isAuthenticated && ( + + )} +
+
+ ) : ( +

Validating invite...

+ )}
) }