refactor(app): refactor layer item store

app/.env

@@ -1 +1,4 @@
-VITE_OPEN_COLLECTIVE_API_KEY=your_key
+VITE_OPEN_COLLECTIVE_API_KEY=your_key
+VITE_API_URL=https://api.utopia-lab.org
+VITE_VALIDATE_INVITE_FLOW_ID=01d61db0-25aa-4bfa-bc24-c6a8f208a455
+VITE_REDEEM_INVITE_FLOW_ID=cc80ec73-ecf5-4789-bee5-1127fb1a6ed4

app/.eslintrc.cjs

@@ -82,7 +82,7 @@ module.exports = {
     'import/no-relative-parent-imports': [
       'error',
       {
-        ignore: ['#[src,types,root,components,utils,assets]/*'],
+        ignore: ['#[src,types,root,components,utils,assets]/*', '@/config/*'],
       },
     ],
     'import/no-self-import': 'error',

app/.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+.DS_Store

app/package.json

@@ -20,6 +20,7 @@
     "react-dom": "^18.2.0",
     "react-rnd": "^10.4.1",
     "react-router-dom": "^6.23.0",
+    "vite-tsconfig-paths": "^5.1.4",
     "utopia-ui": "^3.0.111"
   },
   "devDependencies": {

app/src/App.tsx

@@ -20,6 +20,7 @@ import {
   Content,
   AuthProvider,
   Modal,
+  InvitePage,
   LoginPage,
   SignupPage,
   Quests,
@@ -33,8 +34,8 @@ import {
   MarketView,
   SVG,
   LoadingMapOverlay,
-  ProfileView,
   ProfileForm,
+  ProfileView,
   UserSettings,
 } from 'utopia-ui'
 
@@ -48,11 +49,16 @@ import { itemsApi } from './api/itemsApi'
 import { layersApi } from './api/layersApi'
 import { mapApi } from './api/mapApi'
 import { permissionsApi } from './api/permissionsApi'
-import { userApi } from './api/userApi'
+import { UserApi } from './api/userApi'
 import { ModalContent } from './ModalContent'
 import { Landingpage } from './pages/Landingpage'
 import MapContainer from './pages/MapContainer'
 import { getBottomRoutes, routes } from './routes/sidebar'
+import { config } from '@/config'
+import { InviteApi } from './api/inviteApi'
+
+const userApi = new UserApi()
+const inviteApi = new InviteApi(userApi)
 
 function App() {
   const [permissionsApiInstance, setPermissionsApiInstance] = useState<permissionsApi>()
@@ -140,12 +146,12 @@ function App() {
   if (map && layers)
     return (
       <div className='App tw:overflow-x-hidden'>
-        <AuthProvider userApi={new userApi()}>
+        <AuthProvider userApi={userApi} inviteApi={inviteApi}>
           <AppShell
             assetsApi={new assetsApi('https://api.utopia-lab.org/assets/')}
             appName={map.name}
             embedded={embedded}
-            openCollectiveApiKey={import.meta.env.VITE_OPEN_COLLECTIVE_API_KEY}
+            openCollectiveApiKey={config.openCollectiveApiKey}
           >
             <Permissions
               api={permissionsApiInstance}
@@ -160,7 +166,8 @@ function App() {
               <Quests />
               <Routes>
                 <Route path='/*' element={<MapContainer map={map} layers={layers} />}>
-                  <Route path='login' element={<LoginPage />} />
+                  <Route path='invite/:id' element={<InvitePage inviteApi={inviteApi} />} />
+                  <Route path='login' element={<LoginPage inviteApi={inviteApi} />} />
                   <Route path='signup' element={<SignupPage />} />
                   <Route
                     path='reset-password'

app/src/api/directus.ts

@@ -51,13 +51,19 @@ interface CustomUserFields {
   position: Point
 }
 
+interface ItemSecret {
+  secret: string
+  item: string
+}
+
 export interface MyCollections {
   places: Place[]
   events: Event[]
   updates: Update[]
   tags: Tag[]
   projects: Project[]
   directus_users: CustomUserFields[]
+  item_secrets: ItemSecret[]
   items: Item[]
   team: any[]
   features: any[]

app/src/api/inviteApi.ts

@@ -0,0 +1,79 @@
+/* @eslint-disable-next-line import/no-relative-parent-imports */
+import { config } from '@/config'
+
+import type { UserApi } from 'utopia-ui'
+
+type InvitingProfileResponse = [
+  {
+    item: string
+  },
+]
+
+export class InviteApi {
+  userApi: UserApi
+
+  constructor(userApi: UserApi) {
+    this.userApi = userApi
+  }
+
+  async validateInvite(inviteId: string): Promise<string | null> {
+    try {
+      const response = await fetch(
+        `${config.apiUrl}/flows/trigger/${config.validateInviteFlowId}?secret=${inviteId}`,
+        {
+          method: 'GET',
+          mode: 'cors',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        },
+      )
+
+      if (!response.ok) return null
+
+      const data = (await response.json()) as InvitingProfileResponse
+
+      return data[0].item
+    } catch (error: unknown) {
+      // eslint-disable-next-line no-console
+      console.error('Error fetching inviting profile:', error)
+      if (error instanceof Error && error.message) {
+        throw new Error(error.message)
+      } else {
+        throw new Error('An unknown error occurred while fetching the inviting profile.')
+      }
+    }
+  }
+
+  async redeemInvite(inviteId: string, itemId: string): Promise<string | null> {
+    try {
+      const token = await this.userApi.getToken()
+
+      if (!token) {
+        throw new Error('User is not authenticated. Cannot redeem invite.')
+      }
+
+      const response = await fetch(`${config.apiUrl}/flows/trigger/${config.redeemInviteFlowId}`, {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ secret: inviteId, item: itemId }),
+      })
+
+      if (!response.ok) return null
+
+      return (await response.json()) as string
+    } catch (error: unknown) {
+      // eslint-disable-next-line no-console
+      console.error('Error fetching inviting profile:', error)
+      if (error instanceof Error && error.message) {
+        throw new Error(error.message)
+      } else {
+        throw new Error('An unknown error occurred while fetching the inviting profile.')
+      }
+    }
+  }
+}

app/src/api/itemsApi.ts

@@ -45,6 +45,7 @@ export class itemsApi<T> implements ItemsApi<T> {
         readItems(this.collectionName as never, {
           fields: [
             '*',
+            'secrets.*',
             'to.*',
             'relations.*',
             'user_created.*',

app/src/api/userApi.ts

@@ -8,7 +8,7 @@ import { createUser, passwordRequest, passwordReset, readMe, updateMe } from '@d
 
 import { directusClient } from './directus'
 
-import type { UserApi, UserItem } from 'utopia-ui'
+import type { UserItem } from 'utopia-ui'
 
 interface DirectusError {
   errors: {
@@ -17,7 +17,7 @@ interface DirectusError {
   }[]
 }
 
-export class userApi implements UserApi {
+export class UserApi {
   async register(email: string, password: string, userName: string): Promise<any> {
     try {
       return await directusClient.request(createUser({ email, password, first_name: userName }))

app/src/config/index.ts

@@ -0,0 +1,12 @@
+export const config = {
+  apiUrl: String(import.meta.env.VITE_API_URL ?? 'https://api.utopia-lab.org'),
+  validateInviteFlowId: String(
+    import.meta.env.VITE_VALIDATE_INVITE_FLOW_ID ?? '01d61db0-25aa-4bfa-bc24-c6a8f208a455',
+  ),
+  redeemInviteFlowId: String(
+    import.meta.env.VITE_REDEEM_INVITE_FLOW_ID ?? 'cc80ec73-ecf5-4789-bee5-1127fb1a6ed4',
+  ),
+  openCollectiveApiKey: String(import.meta.env.VITE_OPEN_COLLECTIVE_API_KEY ?? ''),
+}
+
+export type Config = typeof config

app/tsconfig.json

@@ -10,16 +10,40 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
     "paths": {
-      "utopia-ui": ["../lib/src"],
-      "#components/*": ["../lib/src/Components/*"],
-      "#utils/*":      ["../lib/src/Utils/*"],
-      "#types/*":      ["../lib/src/types/*"],
-      "#assets/*":     ["../lib/src/assets/*"],
-      "#src/*":        ["../lib/src/*"],
-      "#root/*":       ["../lib/*"]
+      "@/*": [
+        "src/*"
+      ],
+      "utopia-ui": [
+        "../lib/src"
+      ],
+      "#components/*": [
+        "../lib/src/Components/*"
+      ],
+      "#utils/*": [
+        "../lib/src/Utils/*"
+      ],
+      "#types/*": [
+        "../lib/src/types/*"
+      ],
+      "#assets/*": [
+        "../lib/src/assets/*"
+      ],
+      "#src/*": [
+        "../lib/src/*"
+      ],
+      "#root/*": [
+        "../lib/*"
+      ]
     }
   },
-  "include": ["src"], 
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }