Improve typing; get inviting profile specifically

app/src/App.tsx

@@ -12,7 +12,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import type { Tag } from 'utopia-ui'
+import type { Item, Tag } from 'utopia-ui'
 
 import {
   AppShell,
@@ -66,6 +66,7 @@ function App() {
   const [mapApiInstance, setMapApiInstance] = useState<mapApi>()
   const [layersApiInstance, setLayersApiInstance] = useState<layersApi>()
   const [attestationApi, setAttestationApi] = useState<itemsApi<any>>()
+  const [itemsApiInstance, setItemsApiInstance] = useState<itemsApi<Item>>()
 
   const [map, setMap] = useState<any>()
   const [layers, setLayers] = useState<any>()
@@ -140,10 +141,15 @@ function App() {
     setLoading(false)
   }, [map])
 
+  useEffect(() => {
+    if (!map) return
+    setItemsApiInstance(new itemsApi<Item>('items', undefined, map.id))
+  }, [map])
+
   const currentUrl = window.location.href
   const bottomRoutes = getBottomRoutes(currentUrl)
 
-  if (map && layers)
+  if (map && layers && itemsApiInstance)
     return (
       <div className='App tw:overflow-x-hidden'>
         <AuthProvider userApi={userApi} inviteApi={inviteApi}>
@@ -169,7 +175,10 @@ function App() {
                   path='/*'
                   element={<MapContainer map={map} layers={layers} inviteApi={inviteApi} />}
                 >
-                  <Route path='invite/:id' element={<InvitePage inviteApi={inviteApi} />} />
+                  <Route
+                    path='invite/:id'
+                    element={<InvitePage inviteApi={inviteApi} itemsApi={itemsApiInstance} />}
+                  />
                   <Route path='login' element={<LoginPage inviteApi={inviteApi} />} />
                   <Route path='signup' element={<SignupPage />} />
                   <Route

app/src/api/itemsApi.ts

@@ -9,9 +9,9 @@ import { createItem, deleteItem, readItem, readItems, updateItem } from '@direct
 import { directusClient } from './directus'
 
 import type { MyCollections } from './directus'
-import type { ItemsApi } from 'utopia-ui'
+import type { FullItemsApi } from 'utopia-ui'
 
-export class itemsApi<T> implements ItemsApi<T> {
+export class itemsApi<T> implements FullItemsApi<T> {
   collectionName: keyof MyCollections
   filter: any
   layerId: string | undefined
@@ -70,7 +70,7 @@ export class itemsApi<T> implements ItemsApi<T> {
 
   async getItem(id: string): Promise<T> {
     try {
-      const result = await directusClient.request(readItem(this.collectionName as never, id))
+      const result = await directusClient.request(readItem(this.collectionName, id))
       return result as T
     } catch (error: any) {
       console.log(error)

lib/src/Components/Onboarding/InvitePage.tsx

@@ -3,28 +3,27 @@ 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 { FullItemsApi } from '#types/FullItemsApi'
 import type { InviteApi } from '#types/InviteApi'
 import type { Item } from '#types/Item'
 
 interface Props {
   inviteApi: InviteApi
+  itemsApi: FullItemsApi<Item>
 }
 
 /**
  * @category Onboarding
  */
-export function InvitePage({ inviteApi }: Props) {
+export function InvitePage({ inviteApi, itemsApi }: Props) {
   const { isAuthenticated, isInitialized: isAuthenticationInitialized } = useAuth()
   const { id } = useParams<{ id: string }>()
   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')
 
@@ -63,7 +62,7 @@ export function InvitePage({ inviteApi }: Props) {
         return
       }
 
-      const invitingProfile = items.find((item) => item.id === invitingProfileId)
+      const invitingProfile = await itemsApi.getItem(invitingProfileId)
 
       if (!invitingProfile) {
         toast.error('Inviting profile not found')
@@ -74,7 +73,7 @@ export function InvitePage({ inviteApi }: Props) {
       setInvitingProfile(invitingProfile)
     }
 
-    if (!isAuthenticationInitialized || !allItemsLoaded) return
+    if (!isAuthenticationInitialized) return
 
     if (isAuthenticated) {
       void redeemInvite()
@@ -92,8 +91,7 @@ export function InvitePage({ inviteApi }: Props) {
     isAuthenticationInitialized,
     myProfile,
     isMyProfileLoaded,
-    items,
-    allItemsLoaded,
+    itemsApi,
   ])
 
   const goToSignup = () => {

lib/src/index.tsx

@@ -10,6 +10,7 @@ export * from './Components/Input'
 export * from './Components/Item'
 export * from './Components/Onboarding'
 export * from './Components/Profile'
+export type * from './types/FullItemsApi'
 
 declare global {
   interface Window {

lib/src/types/FullItemsApi.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @category Types
+ */
+export interface FullItemsApi<T> {
+  getItems(): Promise<T[]>
+  getItem(id: string): Promise<T | null>
+  createItem(item: T): Promise<T>
+  updateItem(item: Partial<T>): Promise<T>
+  deleteItem(id: string): Promise<boolean>
+  collectionName?: string
+}