@jmruthers/pace-core 0.5.102 → 0.5.103

package/src/hooks/useEventLogo.ts

@@ -1,316 +0,0 @@
-/**
- * @file Event Logo Hook (Authenticated)
- * @package @jmruthers/pace-core
- * @module Hooks
- *
- * A React hook for accessing event logos in authenticated contexts.
- * Can handle both public and private event logos using the file_references system.
- *
- * Features:
- * - Works in authenticated contexts
- * - Supports both public and private event logos
- * - Automatic fallback to event initials
- * - Bucket-aware URL generation
- * - Signed URL support for private files
- * - Caching for performance
- * - Error handling and loading states
- *
- * @example
- * ```tsx
- * import { useEventLogo } from '@jmruthers/pace-core';
- *
- * function EventHeader() {
- *   const { logoUrl, fallbackText, isLoading, error } = useEventLogo(
- *     supabase,
- *     eventId,
- *     eventName,
- *     organisationId
- *   );
- *
- *   if (isLoading) return <div>Loading...</div>;
- *   if (error) return <div>Error: {error.message}</div>;
- *
- *   return (
- *     <div>
- *       {logoUrl ? (
- *         <img src={logoUrl} alt={`${eventName} logo`} />
- *       ) : (
- *         <div className="logo-fallback">{fallbackText}</div>
- *       )}
- *     </div>
- *   );
- * }
- * ```
- */
-
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import type { SupabaseClient } from '@supabase/supabase-js';
-import { getPublicUrl, getSignedUrl } from '../utils/storage/helpers';
-import { FileCategory } from '../types/file-reference';
-import { createFileReferenceService } from '../utils/file-reference';
-
-export interface UseEventLogoReturn {
-  /** The logo URL if available, null if not found or error */
-  logoUrl: string | null;
-  /** Fallback text (event initials) if no logo is available */
-  fallbackText: string;
-  /** Whether the logo is currently loading */
-  isLoading: boolean;
-  /** Any error that occurred during loading */
-  error: Error | null;
-  /** Function to manually refetch the logo */
-  refetch: () => Promise<void>;
-}
-
-export interface UseEventLogoOptions {
-  /** Cache TTL in milliseconds (default: 30 minutes) */
-  cacheTtl?: number;
-  /** Whether to enable caching (default: true) */
-  enableCache?: boolean;
-  /** Whether to validate image existence (default: true) */
-  validateImage?: boolean;
-  /** Custom fallback text generator */
-  generateFallbackText?: (eventName: string) => string;
-}
-
-/**
- * Generate fallback text from event name (first letter of each word)
- */
-function defaultGenerateFallbackText(eventName: string): string {
-  if (!eventName) return 'EV';
-  
-  return eventName
-    .split(' ')
-    .map(word => word.charAt(0).toUpperCase())
-    .join('')
-    .substring(0, 3); // Max 3 characters
-}
-
-// Simple in-memory cache for authenticated event logos
-const authenticatedLogoCache = new Map<string, { data: any; timestamp: number; ttl: number }>();
-
-// Cache size limit to prevent memory leaks
-const MAX_CACHE_SIZE = 100;
-
-// Helper function to clean up expired entries and enforce size limit
-function cleanupCache() {
-  const now = Date.now();
-  const entries = Array.from(authenticatedLogoCache.entries());
-  
-  // Remove expired entries
-  entries.forEach(([key, value]) => {
-    if (now - value.timestamp > value.ttl) {
-      authenticatedLogoCache.delete(key);
-    }
-  });
-  
-  // If still over limit, remove oldest entries
-  if (authenticatedLogoCache.size > MAX_CACHE_SIZE) {
-    const sortedEntries = Array.from(authenticatedLogoCache.entries())
-      .sort((a, b) => a[1].timestamp - b[1].timestamp);
-    
-    const toRemove = sortedEntries.slice(0, authenticatedLogoCache.size - MAX_CACHE_SIZE);
-    toRemove.forEach(([key]) => authenticatedLogoCache.delete(key));
-  }
-}
-
-/**
- * Hook for accessing event logo URLs in authenticated contexts
- * 
- * This hook provides access to event logo URLs for authenticated users.
- * It supports both public and private logos, generating appropriate URLs
- * (public URLs for public files, signed URLs for private files).
- * 
- * @param supabase - Supabase client instance (required)
- * @param eventId - The event ID to fetch logo for
- * @param eventName - The event name for fallback text generation
- * @param organisationId - The organisation ID for storage path
- * @param options - Configuration options for caching and behavior
- * @returns Object containing logo URL, fallback text, loading state, error, and refetch function
- */
-export function useEventLogo(
-  supabase: SupabaseClient | null,
-  eventId: string | undefined,
-  eventName: string | undefined,
-  organisationId: string | undefined,
-  options: UseEventLogoOptions = {}
-): UseEventLogoReturn {
-  const {
-    cacheTtl = 30 * 60 * 1000, // 30 minutes
-    enableCache = true,
-    validateImage = true,
-    generateFallbackText = defaultGenerateFallbackText
-  } = options;
-
-  const [logoUrl, setLogoUrl] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  // Generate fallback text
-  const fallbackText = useMemo(() => {
-    return eventName ? generateFallbackText(eventName) : 'EV';
-  }, [eventName, generateFallbackText]);
-
-  const fetchLogo = useCallback(async (): Promise<void> => {
-    if (!eventId || !organisationId || !supabase) {
-      setLogoUrl(null);
-      setIsLoading(false);
-      return;
-    }
-
-    // Validate UUID format for organisationId to prevent database errors
-    const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-    if (!uuidRegex.test(organisationId)) {
-      console.warn('[useEventLogo] Invalid organisationId format (not a valid UUID):', organisationId);
-      // Don't return early - let the database handle the validation
-      // This allows for more graceful error handling
-    }
-
-    // Check cache first
-    const cacheKey = `event_logo_${eventId}_${organisationId}`;
-    if (enableCache) {
-      const cached = authenticatedLogoCache.get(cacheKey);
-      if (cached && Date.now() - cached.timestamp < cached.ttl) {
-        setLogoUrl(cached.data);
-        setIsLoading(false);
-        setError(null);
-        return;
-      }
-    }
-
-    try {
-      setIsLoading(true);
-      setError(null);
-
-      // Get event logo from file_references using new RPC function
-      const service = createFileReferenceService(supabase);
-      const files = await service.getFilesByCategory(
-        'event',
-        eventId,
-        FileCategory.EVENT_LOGOS,
-        organisationId
-      );
-
-      if (!files || files.length === 0) {
-        setLogoUrl(null);
-        return;
-      }
-
-      // Get the first logo (events typically have one logo)
-      const logoFileRef = files[0];
-      const logoPath = logoFileRef.file_path;
-      const isPublic = logoFileRef.is_public ?? true;
-
-      let url: string | null = null;
-
-      if (isPublic) {
-        // Public files: generate public URL using bucket-aware helper
-        url = getPublicUrl(supabase, logoPath, true);
-      } else {
-        // Private files: generate signed URL
-        const signedUrlResult = await getSignedUrl(supabase, logoPath, {
-          appName: 'pace-core',
-          orgId: organisationId,
-          expiresIn: 3600
-        });
-        url = signedUrlResult?.url || null;
-      }
-
-      if (!url) {
-        setLogoUrl(null);
-        return;
-      }
-
-      // Validate image existence if requested
-      if (validateImage) {
-        try {
-          const response = await fetch(url, { method: 'HEAD' });
-          if (!response.ok) {
-            console.warn('[useEventLogo] Logo URL not accessible:', url);
-            setLogoUrl(null);
-            return;
-          }
-        } catch (fetchError) {
-          console.warn('[useEventLogo] Error validating logo URL:', fetchError);
-          setLogoUrl(null);
-          return;
-        }
-      }
-
-      setLogoUrl(url);
-
-      // Cache the result
-      if (enableCache) {
-        authenticatedLogoCache.set(cacheKey, {
-          data: url,
-          timestamp: Date.now(),
-          ttl: cacheTtl
-        });
-        // Clean up cache to prevent memory leaks
-        cleanupCache();
-      }
-
-    } catch (err) {
-      console.error('[useEventLogo] Error fetching logo:', err);
-      const error = err instanceof Error ? err : new Error('Unknown error occurred');
-      setError(error);
-      setLogoUrl(null);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [eventId, organisationId, supabase, cacheTtl, enableCache, validateImage, generateFallbackText]);
-
-  // Fetch logo when parameters change
-  useEffect(() => {
-    if (eventId && organisationId && supabase) {
-      fetchLogo();
-    } else {
-      setLogoUrl(null);
-      setIsLoading(false);
-      setError(null);
-    }
-  }, [eventId, organisationId, supabase, cacheTtl, enableCache, validateImage, generateFallbackText]);
-
-  const refetch = useCallback(async (): Promise<void> => {
-    if (!eventId || !organisationId || !supabase) return;
-    
-    // Clear cache for this logo
-    if (enableCache) {
-      const cacheKey = `event_logo_${eventId}_${organisationId}`;
-      authenticatedLogoCache.delete(cacheKey);
-    }
-    await fetchLogo();
-  }, [fetchLogo, eventId, organisationId, supabase, enableCache]);
-
-  return {
-    logoUrl,
-    fallbackText,
-    isLoading,
-    error,
-    refetch
-  };
-}
-
-/**
- * Clear all cached authenticated event logo data
- * Useful for testing or when you need to force refresh all data
- */
-export function clearEventLogoCache(): void {
-  for (const [key] of authenticatedLogoCache) {
-    if (key.startsWith('event_logo_')) {
-      authenticatedLogoCache.delete(key);
-    }
-  }
-}
-
-/**
- * Get cache statistics for debugging
- */
-export function getEventLogoCacheStats(): { size: number; keys: string[] } {
-  const keys = Array.from(authenticatedLogoCache.keys()).filter(key => key.startsWith('event_logo_'));
-  return {
-    size: keys.length,
-    keys
-  };
-}
-