Show inviting profile (but item loading is buggy)

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<Item | null>(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 (
     <MapOverlayPage backdrop className='tw:max-w-xs tw:h-fit'>
       <h2 className='tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center'>Invitation</h2>
+      {invitingProfile ? (
+        <div className='tw-text-center tw-mb-4'>
+          <p className='tw-text-lg tw-font-semibold'>Welcome to Utopia!</p>
+          <p className='tw-text-sm tw-text-gray-600'>
+            You have been invited by: <strong>{invitingProfile.name}</strong> to join the Utopia
+            community.
+          </p>
+          <div className='tw-flex tw:justify-center tw:mt-4'>
+            <button
+              className='tw-btn tw-btn-primary'
+              onClick={isAuthenticated ? () => navigate('/') : goToSignup}
+            >
+              {isAuthenticated ? 'Go to Dashboard' : 'Sign Up'}
+            </button>
+            {!isAuthenticated && (
+              <button className='tw-btn tw-btn-secondary' onClick={goToLogin}>
+                Login
+              </button>
+            )}
+          </div>
+        </div>
+      ) : (
+        <p className='tw-text-center'>Validating invite...</p>
+      )}
     </MapOverlayPage>
   )
 }