Redeem invite link whenever a profile is available

app/src/App.tsx

@@ -165,7 +165,10 @@ function App() {
             <Content>
               <Quests />
               <Routes>
-                <Route path='/*' element={<MapContainer map={map} layers={layers} />}>
+                <Route
+                  path='/*'
+                  element={<MapContainer map={map} layers={layers} inviteApi={inviteApi} />}
+                >
                   <Route path='invite/:id' element={<InvitePage inviteApi={inviteApi} />} />
                   <Route path='login' element={<LoginPage inviteApi={inviteApi} />} />
                   <Route path='signup' element={<SignupPage />} />

app/src/pages/MapContainer.tsx

@@ -25,6 +25,7 @@ import {
 import { itemsApi } from '../api/itemsApi'
 
 import type { Place } from '../api/directus'
+import type { InviteApi } from '@/api/inviteApi'
 import type { LayerProps } from 'utopia-ui'
 
 interface layerApi {
@@ -32,7 +33,15 @@ interface layerApi {
   api: itemsApi<Place>
 }
 
-function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
+function MapContainer({
+  layers,
+  map,
+  inviteApi,
+}: {
+  layers: LayerProps[]
+  map: any
+  inviteApi: InviteApi
+}) {
   const [apis, setApis] = useState<layerApi[]>([])
 
   useEffect(() => {
@@ -86,6 +95,7 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
         expandLayerControl={map.expand_layer_control}
         tileServerUrl={map.tile_server_url}
         tileServerAttribution={map.tile_server_attribution}
+        inviteApi={inviteApi}
       >
         {layers &&
           apis &&

lib/src/Components/Map/UtopiaMap.tsx

@@ -3,8 +3,10 @@ import { MapContainer } from 'react-leaflet'
 
 import { ContextWrapper } from '#components/AppShell/ContextWrapper'
 
+import { useRedeemInvite } from './hooks/useRedeemInvite'
 import { UtopiaMapInner } from './UtopiaMapInner'
 
+import type { InviteApi } from '#types/InviteApi'
 import type { GeoJsonObject } from 'geojson'
 
 /**
@@ -58,6 +60,7 @@ function UtopiaMap({
   expandLayerControl,
   tileServerUrl,
   tileServerAttribution,
+  inviteApi,
 }: {
   /** height of the map (default '500px') */
   height?: string
@@ -91,7 +94,11 @@ function UtopiaMap({
   tileServerUrl?: string
   /** configure a custom tile server attribution */
   tileServerAttribution?: string
+  /** API to redeem invite codes */
+  inviteApi: InviteApi
 }) {
+  // Check for invite code in localStorage and loaded profile, redeem if possible
+  useRedeemInvite(inviteApi)
   return (
     <ContextWrapper>
       <MapContainer

lib/src/Components/Map/hooks/useRedeemInvite.ts

@@ -0,0 +1,32 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'react-toastify'
+
+import { useMyProfile } from './useMyProfile'
+
+import type { InviteApi } from '#types/InviteApi'
+
+export const useRedeemInvite = (inviteApi: InviteApi) => {
+  const inviteCode = localStorage.getItem('inviteCode')
+
+  const { myProfile } = useMyProfile()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    async function redeemInvite() {
+      if (!inviteCode || !myProfile) return
+
+      const invitingProfileId = await inviteApi.redeemInvite(inviteCode, myProfile.id)
+
+      if (invitingProfileId) {
+        toast.success('Invite redeemed successfully!')
+        localStorage.removeItem('inviteCode')
+        navigate(`/item/${invitingProfileId}`)
+      } else {
+        toast.error('Failed to redeem invite')
+      }
+    }
+
+    void redeemInvite()
+  }, [inviteApi, inviteCode, myProfile, navigate])
+}