Appearance

useHelpers Composable ​

File Information ​

  • Path: app/composables/core/common/useHelpers.ts
  • Purpose: Workspace, brand, formatting helpers and utility functions
  • Type: Core Common Composable

Overview ​

The useHelpers composable provides a comprehensive set of utility functions used throughout the application. It includes workspace management, brand information, date/time formatting, file size formatting, and various helper functions.

Features ​

  • Workspace Management: Get current workspace, set workspace, get workspace ID
  • Brand Information: Get brand name, brand details, brand URL
  • Formatting: Date formatting, file size formatting, query string generation
  • Route Helpers: Safe route access for SSR compatibility
  • Analytics: Lazy-loaded analytics instance
  • Download Helpers: Download-related utility functions

Return Type ​

typescript
{
  setCurrentWorkspace: (workspaceId: string) => void
  getBrandName: () => string
  brandName: () => string
  brandDetail: ComputedRef<Brand>
  getWorkspaceId: () => string | null
  toHumanlySize: (size: number | string) => string
  formatDate: (date: string | Date) => string
  toQueryString: (obj: Record<string, unknown>) => string
  // ... other helper functions
}

Key Functions ​

Workspace Functions ​

  • setCurrentWorkspace(workspaceId) - Sets current workspace in localStorage
  • getWorkspaceId() - Gets current workspace ID from auth store or localStorage
  • _auth() - Gets current workspace from localStorage (internal)

Brand Functions ​

  • getBrandName() - Gets brand name from workspace or route params
  • brandName() - Gets brand name (alias)
  • brandDetail - Computed brand details from app data store

Formatting Functions ​

  • toHumanlySize(size) - Converts bytes to human-readable format (B, KB, MB, GB, TB, PB)
  • formatDate(date) - Formats date using dayjs (format: "MMM D, YYYY")
  • toQueryString(obj) - Converts object to query string

Route Helpers ​

  • getRoute() - Safely gets route (SSR-safe, returns null in middleware)

Analytics ​

  • getAnalytics() - Lazy-loaded analytics instance (avoids middleware issues)

Usage Example ​

typescript
import { useHelpers } from '~/composables/core/common/useHelpers'

const { 
  getWorkspaceId, 
  getBrandName, 
  toHumanlySize, 
  formatDate 
} = useHelpers()

// Get workspace ID
const workspaceId = getWorkspaceId()

// Get brand name
const brand = getBrandName()

// Format file size
const size = toHumanlySize(1024000) // "1000 KB"

// Format date
const date = formatDate(new Date()) // "Jan 1, 2024"

Dependencies ​

  • useAuthStore() - Authentication store
  • useAppDataStore() - App data store
  • useDownloadStore() - Download store
  • useAnalytics() - Analytics composable (lazy-loaded)
  • dayjs - Date formatting library

SSR Compatibility ​

The composable is SSR-safe:

  • Uses import.meta.client checks
  • Safe route access with try/catch
  • Lazy-loaded analytics to avoid middleware issues