Appearance

useAppDataApi Composable ​

File Information ​

  • Path: app/composables/api/useAppDataApi.ts
  • Purpose: Dashboard and application data API operations
  • Category: Data API Composable

Overview ​

The useAppDataApi composable provides functionality to fetch dashboard data, tiles, banners, folders, and verify domains. This is the primary composable for loading initial application data.

Functions ​

getDashboardData ​

Fetches dashboard data including banners and other common data.

Signature:

typescript
getDashboardData(
  workspaceId: string | number,
  instanceId: string | number
): Promise<DashboardData>

Parameters:

  • workspaceId: string | number - Workspace ID
  • instanceId: string | number - Instance ID

Returns:

  • Promise<DashboardData> - Dashboard data response

API Endpoint: GET /digital/common-data?workspace_id={workspaceId}&instance_id={instanceId}

Usage:

typescript
const { getDashboardData } = useAppDataApi()

const data = await getDashboardData(workspaceId, instanceId)
// data contains banners and other dashboard data

getTiles ​

Fetches tiles for the dashboard.

Signature:

typescript
getTiles(workspaceId: string | number): Promise<Tile[]>

Parameters:

  • workspaceId: string | number - Workspace ID

Returns:

  • Promise<Tile[]> - Array of tiles

API Endpoint: GET /digital/get-tiles?workspace_id={workspaceId}

Usage:

typescript
const { getTiles } = useAppDataApi()

const tiles = await getTiles(workspaceId)
// tiles is an array of Tile objects

getBanners ​

Fetches banners for the dashboard.

Signature:

typescript
getBanners(
  workspaceId: string | number,
  instanceId: string | number
): Promise<Banner[]>

Parameters:

  • workspaceId: string | number - Workspace ID
  • instanceId: string | number - Instance ID

Returns:

  • Promise<Banner[]> - Array of banners

API Endpoint: GET /digital/get-banners?workspace_id={workspaceId}&instance_id={instanceId}

Usage:

typescript
const { getBanners } = useAppDataApi()

const banners = await getBanners(workspaceId, instanceId)
// banners is an array of Banner objects

getFolders ​

Fetches folders/categories list.

Signature:

typescript
getFolders(
  workspaceId: string | number,
  subfolderList: boolean
): Promise<Folder[]>

Parameters:

  • workspaceId: string | number - Workspace ID
  • subfolderList: boolean - Whether to include subfolders

Returns:

  • Promise<Folder[]> - Array of folders

API Endpoint: GET /digital/category-list?workspace_id={workspaceId}&subfolder_list={0|1}

Usage:

typescript
const { getFolders } = useAppDataApi()

// Get folders without subfolders
const folders = await getFolders(workspaceId, false)

// Get folders with subfolders
const foldersWithSubs = await getFolders(workspaceId, true)

verifyDomain ​

Verifies a domain/brand name. This is a public endpoint (no auth required).

Signature:

typescript
verifyDomain(brandName: string): Promise<BrandDetails>

Parameters:

  • brandName: string - Brand name/domain to verify

Returns:

  • Promise<BrandDetails> - Brand details response

API Endpoint: POST /verify-domain (public, skipAuth: true)

Usage:

typescript
const { verifyDomain } = useAppDataApi()

const brandDetails = await verifyDomain('example-brand')
// Returns brand details if domain is valid

Error Handling ​

All functions include error logging:

typescript
catch (error: any) {
  console.error('[AppDataAPI] {functionName} - Error:', error)
  throw error
}

Type Definitions ​

typescript
import type { Banner, Tile, File, DashboardData, Folder, BrandDetails } from '~/types'

Integration with API Client ​

The composable uses the global $api client from Nuxt app:

typescript
const { $api } = useNuxtApp()

This ensures:

  • Automatic authentication
  • Error handling
  • Request/response interceptors
  • Account status monitoring

Use Cases ​

Dashboard Initialization ​

typescript
const { getDashboardData, getTiles, getBanners } = useAppDataApi()

const loadDashboard = async () => {
  try {
    const [dashboardData, tiles, banners] = await Promise.all([
      getDashboardData(workspaceId, instanceId),
      getTiles(workspaceId),
      getBanners(workspaceId, instanceId)
    ])
    
    // Use data...
  } catch (error) {
    console.error('Failed to load dashboard:', error)
  }
}

Folder Navigation ​

typescript
const { getFolders } = useAppDataApi()

const loadFolders = async (includeSubfolders: boolean) => {
  const folders = await getFolders(workspaceId, includeSubfolders)
  // Display folders...
}

Domain Verification ​

typescript
const { verifyDomain } = useAppDataApi()

const checkDomain = async (brandName: string) => {
  try {
    const details = await verifyDomain(brandName)
    if (details) {
      // Domain is valid, proceed...
    }
  } catch (error) {
    // Domain invalid or error occurred
  }
}