een-api-toolkit 0.0.18 → 0.1.2

package/examples/vue-cameras/src/views/CameraDetail.vue

@@ -1,20 +1,54 @@
 <script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { useCamera, type CameraStatus } from 'een-api-toolkit'
+import { getCamera, type Camera, type CameraStatus, type EenError } from 'een-api-toolkit'
 
 const route = useRoute()
 
-// Fetch camera with all details
-const { camera, loading, error, refresh } = useCamera(
-  () => route.params.id as string,
-  {
+// Reactive state
+const camera = ref<Camera | null>(null)
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+
+async function fetchCamera() {
+  const id = route.params.id as string
+  if (!id) {
+    error.value = { code: 'VALIDATION_ERROR', message: 'Camera ID is required' }
+    return
+  }
+
+  loading.value = true
+  error.value = null
+
+  const result = await getCamera(id, {
     include: ['deviceInfo', 'status', 'shareDetails', 'devicePosition', 'networkInfo', 'tags']
+  })
+
+  if (result.error) {
+    error.value = result.error
+    camera.value = null
+  } else {
+    camera.value = result.data
   }
-)
+
+  loading.value = false
+}
+
+function refresh() {
+  return fetchCamera()
+}
+
+// Helper to extract status string from the union type
+function getStatusString(status?: CameraStatus | { connectionStatus?: CameraStatus }): CameraStatus | undefined {
+  if (!status) return undefined
+  if (typeof status === 'string') return status
+  return status.connectionStatus
+}
 
 // Get status badge class
-function getStatusClass(status?: CameraStatus): string {
-  switch (status) {
+function getStatusClass(status?: CameraStatus | { connectionStatus?: CameraStatus }): string {
+  const statusStr = getStatusString(status)
+  switch (statusStr) {
     case 'online':
     case 'streaming':
       return 'status-online'
@@ -29,6 +63,20 @@ function getStatusClass(status?: CameraStatus): string {
       return 'status-unknown'
   }
 }
+
+onMounted(() => {
+  fetchCamera()
+})
+
+// Watch for route param changes
+watch(
+  () => route.params.id,
+  (newId, oldId) => {
+    if (newId && newId !== oldId) {
+      fetchCamera()
+    }
+  }
+)
 </script>
 
 <template>
@@ -53,7 +101,7 @@ function getStatusClass(status?: CameraStatus): string {
         </div>
         <div class="header-actions">
           <span :class="['status-badge', getStatusClass(camera.status)]">
-            {{ camera.status || 'Unknown' }}
+            {{ getStatusString(camera.status) || 'Unknown' }}
           </span>
           <button @click="refresh">Refresh</button>
         </div>

package/examples/vue-cameras/src/views/Cameras.vue

@@ -1,26 +1,65 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import { useCameras, type CameraStatus } from 'een-api-toolkit'
+import { ref, computed, watch, onMounted } from 'vue'
+import { getCameras, type Camera, type CameraStatus, type EenError, type ListCamerasParams } from 'een-api-toolkit'
 
 // Status filter
 const statusFilter = ref<CameraStatus | ''>('')
 
-// Initial fetch with common includes
-const {
-  cameras,
-  loading,
-  error,
-  hasNextPage,
-  totalSize,
-  fetchNextPage,
-  refresh,
-  setParams,
-  fetch
-} = useCameras({
+// Reactive state
+const cameras = ref<Camera[]>([])
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+const nextPageToken = ref<string | undefined>(undefined)
+const totalSize = ref<number | undefined>(undefined)
+
+const hasNextPage = computed(() => !!nextPageToken.value)
+
+const params = ref<ListCamerasParams>({
   pageSize: 20,
   include: ['deviceInfo', 'status']
 })
 
+async function fetchCameras(fetchParams?: ListCamerasParams, append = false) {
+  loading.value = true
+  error.value = null
+
+  const mergedParams = { ...params.value, ...fetchParams }
+  const result = await getCameras(mergedParams)
+
+  if (result.error) {
+    error.value = result.error
+    if (!append) {
+      cameras.value = []
+      totalSize.value = undefined
+    }
+    nextPageToken.value = undefined
+  } else {
+    if (append) {
+      cameras.value = [...cameras.value, ...result.data.results]
+    } else {
+      cameras.value = result.data.results
+    }
+    nextPageToken.value = result.data.nextPageToken
+    totalSize.value = result.data.totalSize
+  }
+
+  loading.value = false
+  return result
+}
+
+function refresh() {
+  return fetchCameras()
+}
+
+async function fetchNextPage() {
+  if (!nextPageToken.value) return
+  return fetchCameras({ ...params.value, pageToken: nextPageToken.value }, true)
+}
+
+function setParams(newParams: ListCamerasParams) {
+  params.value = newParams
+}
+
 // Watch for status filter changes
 watch(statusFilter, async (newStatus) => {
   if (newStatus) {
@@ -35,12 +74,20 @@ watch(statusFilter, async (newStatus) => {
       include: ['deviceInfo', 'status']
     })
   }
-  await fetch()
+  await fetchCameras()
 })
 
+// Helper to extract status string from the union type
+function getStatusString(status?: CameraStatus | { connectionStatus?: CameraStatus }): CameraStatus | undefined {
+  if (!status) return undefined
+  if (typeof status === 'string') return status
+  return status.connectionStatus
+}
+
 // Get status badge class
-function getStatusClass(status?: CameraStatus): string {
-  switch (status) {
+function getStatusClass(status?: CameraStatus | { connectionStatus?: CameraStatus }): string {
+  const statusStr = getStatusString(status)
+  switch (statusStr) {
     case 'online':
     case 'streaming':
       return 'status-online'
@@ -55,6 +102,10 @@ function getStatusClass(status?: CameraStatus): string {
       return 'status-unknown'
   }
 }
+
+onMounted(() => {
+  fetchCameras()
+})
 </script>
 
 <template>
@@ -100,7 +151,7 @@ function getStatusClass(status?: CameraStatus): string {
           <div class="camera-header">
             <h3>{{ camera.name }}</h3>
             <span :class="['status-badge', getStatusClass(camera.status)]">
-              {{ camera.status || 'Unknown' }}
+              {{ getStatusString(camera.status) || 'Unknown' }}
             </span>
           </div>
           <div class="camera-details">

package/examples/vue-cameras/src/views/Home.vue

@@ -1,45 +1,70 @@
 <script setup lang="ts">
-import { useAuthStore, useCurrentUser } from 'een-api-toolkit'
-import { computed } from 'vue'
+import { useAuthStore, getCurrentUser, type UserProfile, type EenError } from 'een-api-toolkit'
+import { computed, ref, onMounted } from 'vue'
 
 const authStore = useAuthStore()
 const isAuthenticated = computed(() => authStore.isAuthenticated)
 
-// Fetch current user if authenticated
-const { user, loading, error } = useCurrentUser({ immediate: true })
+// Reactive state for current user
+const user = ref<UserProfile | null>(null)
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+
+async function fetchUser() {
+  if (!isAuthenticated.value) return
+
+  loading.value = true
+  error.value = null
+
+  const result = await getCurrentUser()
+  if (result.error) {
+    error.value = result.error
+    user.value = null
+  } else {
+    user.value = result.data
+  }
+
+  loading.value = false
+}
+
+onMounted(() => {
+  if (isAuthenticated.value) {
+    fetchUser()
+  }
+})
 </script>
 
 <template>
   <div class="home">
     <h2>Welcome to the EEN Cameras Example</h2>
 
-    <div v-if="isAuthenticated">
+    <div v-if="isAuthenticated" data-testid="authenticated">
       <div v-if="loading" class="loading">Loading user info...</div>
       <div v-else-if="error" class="error">{{ error.message }}</div>
-      <div v-else-if="user" class="user-info">
+      <div v-else-if="user" class="user-info" data-testid="user-info">
         <p>Logged in as: <strong>{{ user.firstName }} {{ user.lastName }}</strong></p>
         <p>Email: {{ user.email }}</p>
       </div>
 
       <div class="actions">
         <router-link to="/cameras">
-          <button>View Cameras</button>
+          <button data-testid="view-cameras-button">View Cameras</button>
         </router-link>
       </div>
     </div>
 
-    <div v-else class="login-prompt">
+    <div v-else class="login-prompt" data-testid="not-authenticated">
       <p>Please log in to view your cameras.</p>
       <router-link to="/login">
-        <button>Login</button>
+        <button data-testid="login-button">Login</button>
       </router-link>
     </div>
 
     <div class="description">
       <h3>About This Example</h3>
       <p>
-        This example demonstrates how to use the <code>useCameras</code> and
-        <code>useCamera</code> composables from the EEN API Toolkit to display
+        This example demonstrates how to use the <code>getCameras</code> and
+        <code>getCamera</code> functions from the EEN API Toolkit to display
         and manage cameras from the Eagle Eye Networks platform.
       </p>
       <h4>Features</h4>

package/examples/{vue-basic → vue-users}/README.md

@@ -1,4 +1,4 @@
-# EEN API Toolkit - Vue 3 Example
+# EEN API Toolkit - Vue Users Example
 
 A complete example showing how to use the een-api-toolkit in a Vue 3 application.
 
@@ -30,11 +30,11 @@ A complete example showing how to use the een-api-toolkit in a Vue 3 application
 
 ### Example Setup
 
-All commands below should be run from this example directory (`examples/vue-basic/`):
+All commands below should be run from this example directory (`examples/vue-users/`):
 
 2. Copy the environment file:
    ```bash
-   # From examples/vue-basic/
+   # From examples/vue-users/
    cp .env.example .env
    ```
 
@@ -48,7 +48,7 @@ All commands below should be run from this example directory (`examples/vue-basi
 
 4. Install dependencies and start:
    ```bash
-   # From examples/vue-basic/
+   # From examples/vue-users/
    npm install
    npm run dev
    ```

package/examples/{vue-basic → vue-users}/e2e/app.spec.ts

@@ -1,16 +1,16 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('Vue Basic Example - App', () => {
+test.describe('Vue Users Example - App', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/')
   })
 
   test('app loads with correct title', async ({ page }) => {
-    await expect(page).toHaveTitle(/EEN API Toolkit/)
+    await expect(page).toHaveTitle(/EEN Users/)
   })
 
   test('header displays app name', async ({ page }) => {
-    await expect(page.locator('[data-testid="app-title"]')).toHaveText('EEN API Toolkit Example')
+    await expect(page.locator('[data-testid="app-title"]')).toHaveText('EEN Users Example')
   })
 
   test('navigation shows Home and Login links when not authenticated', async ({ page }) => {

package/examples/{vue-basic → vue-users}/e2e/auth.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect, Page } from '@playwright/test'
 
 /**
- * E2E tests for the Vue Basic Example
+ * E2E tests for the Vue Users Example
  *
  * Tests the OAuth login flow through the UI:
  * 1. Click login button in the example app
@@ -111,7 +111,7 @@ async function clearAuthState(page: Page): Promise<void> {
   }
 }
 
-test.describe('Vue Basic Example', () => {
+test.describe('Vue Users Example', () => {
   // Check proxy accessibility once before all tests
   let proxyAccessible = false
 

package/examples/{vue-basic → vue-users}/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>EEN API Toolkit Example</title>
+    <title>EEN Users Example</title>
   </head>
   <body>
     <div id="app"></div>

package/examples/{vue-basic → vue-users}/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "een-api-toolkit-example",
-  "version": "0.0.8",
+  "version": "0.0.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "een-api-toolkit-example",
-      "version": "0.0.8",
+      "version": "0.0.12",
       "dependencies": {
         "een-api-toolkit": "file:../..",
         "pinia": "^2.1.7",
@@ -23,7 +23,7 @@
       }
     },
     "../..": {
-      "version": "0.0.11",
+      "version": "0.1.1",
       "license": "MIT",
       "devDependencies": {
         "@playwright/test": "^1.57.0",

package/examples/{vue-basic → vue-users}/package.json

@@ -1,6 +1,6 @@
 {
   "name": "een-api-toolkit-example",
-  "version": "0.0.8",
+  "version": "0.0.12",
   "private": true,
   "type": "module",
   "scripts": {

package/examples/{vue-basic → vue-users}/src/App.vue

@@ -9,7 +9,7 @@ const isAuthenticated = computed(() => authStore.isAuthenticated)
 <template>
   <div class="app">
     <header>
-      <h1 data-testid="app-title">EEN API Toolkit Example</h1>
+      <h1 data-testid="app-title">EEN Users Example</h1>
       <nav>
         <router-link data-testid="nav-home" to="/">Home</router-link>
         <router-link data-testid="nav-users" v-if="isAuthenticated" to="/users">Users</router-link>

package/examples/{vue-basic → vue-users}/src/views/Home.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useAuthStore, useCurrentUser, getAuthUrl } from 'een-api-toolkit'
+import { useAuthStore, getCurrentUser, getAuthUrl, type UserProfile, type EenError } from 'een-api-toolkit'
 import { computed, ref, watch } from 'vue'
 
 const authStore = useAuthStore()
@@ -17,25 +17,40 @@ function login() {
   }
 }
 
-// Don't fetch on mount - we'll handle it reactively
-const { user, loading, error, fetch } = useCurrentUser({
-  immediate: false
-})
+// Reactive state for current user
+const user = ref<UserProfile | null>(null)
+const loading = ref(false)
+const error = ref<EenError | null>(null)
 
 // Guard to prevent concurrent fetch calls
 let fetchInProgress = false
 
+async function fetchUser() {
+  if (fetchInProgress) return
+  fetchInProgress = true
+  loading.value = true
+  error.value = null
+
+  try {
+    const result = await getCurrentUser()
+    if (result.error) {
+      error.value = result.error
+      user.value = null
+    } else {
+      user.value = result.data
+    }
+  } finally {
+    loading.value = false
+    fetchInProgress = false
+  }
+}
+
 // Fetch user when authentication state changes
 watch(
   isAuthenticated,
   async (isAuth) => {
     if (isAuth && !user.value && !fetchInProgress) {
-      fetchInProgress = true
-      try {
-        await fetch()
-      } finally {
-        fetchInProgress = false
-      }
+      await fetchUser()
     }
   },
   { immediate: true }
@@ -44,7 +59,7 @@ watch(
 
 <template>
   <div class="home">
-    <h2>Welcome to the EEN API Toolkit Example</h2>
+    <h2>Welcome to the EEN Users Example</h2>
 
     <div v-if="!isAuthenticated" class="not-authenticated" data-testid="not-authenticated">
       <p data-testid="not-authenticated-message">You are not logged in.</p>

package/examples/{vue-basic → vue-users}/src/views/Users.vue

@@ -1,14 +1,55 @@
 <script setup lang="ts">
-import { useUsers } from 'een-api-toolkit'
-
-const {
-  users,
-  loading,
-  error,
-  hasNextPage,
-  fetchNextPage,
-  refresh
-} = useUsers({ pageSize: 10 })
+import { ref, computed, onMounted } from 'vue'
+import { getUsers, type User, type EenError, type ListUsersParams } from 'een-api-toolkit'
+
+// Reactive state
+const users = ref<User[]>([])
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+const nextPageToken = ref<string | undefined>(undefined)
+
+const hasNextPage = computed(() => !!nextPageToken.value)
+
+const params = ref<ListUsersParams>({ pageSize: 10 })
+
+async function fetchUsers(fetchParams?: ListUsersParams, append = false) {
+  loading.value = true
+  error.value = null
+
+  const mergedParams = { ...params.value, ...fetchParams }
+  const result = await getUsers(mergedParams)
+
+  if (result.error) {
+    error.value = result.error
+    if (!append) {
+      users.value = []
+    }
+    nextPageToken.value = undefined
+  } else {
+    if (append) {
+      users.value = [...users.value, ...result.data.results]
+    } else {
+      users.value = result.data.results
+    }
+    nextPageToken.value = result.data.nextPageToken
+  }
+
+  loading.value = false
+  return result
+}
+
+function refresh() {
+  return fetchUsers()
+}
+
+async function fetchNextPage() {
+  if (!nextPageToken.value) return
+  return fetchUsers({ ...params.value, pageToken: nextPageToken.value }, true)
+}
+
+onMounted(() => {
+  fetchUsers()
+})
 </script>
 
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "een-api-toolkit",
-  "version": "0.0.18",
+  "version": "0.1.2",
   "description": "EEN Video platform API v3.0 library for Vue 3",
   "type": "module",
   "main": "./dist/index.cjs",