@linktr.ee/messaging-react 1.0.0 → 1.0.2

package/src/hooks/useParticipants.ts

@@ -0,0 +1,92 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { ParticipantSource, Participant } from '../types';
+
+/**
+ * Hook for managing participant loading with search and pagination
+ */
+export const useParticipants = (
+  participantSource: ParticipantSource,
+  options: {
+    initialSearch?: string;
+    pageSize?: number;
+  } = {}
+) => {
+  const { initialSearch = '', pageSize = 20 } = options;
+  
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState(initialSearch);
+  const [hasMore, setHasMore] = useState(true);
+  const [cursor, setCursor] = useState<string | undefined>();
+
+  // Load participants with current search query
+  const loadParticipants = useCallback(async (
+    reset = false,
+    customSearch?: string
+  ) => {
+    if (loading) return;
+    
+    const search = customSearch !== undefined ? customSearch : searchQuery;
+    
+    setLoading(true);
+    setError(null);
+
+    try {
+      const result = await participantSource.loadParticipants({
+        search: search || undefined,
+        limit: pageSize,
+        cursor: reset ? undefined : cursor,
+      });
+
+      setParticipants(prev => 
+        reset ? result.participants : [...prev, ...result.participants]
+      );
+      setHasMore(result.hasMore);
+      setCursor(result.nextCursor);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to load participants';
+      setError(errorMessage);
+      console.error('[useParticipants] Load error:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [participantSource, searchQuery, cursor, pageSize, loading]);
+
+  // Load more participants (pagination)
+  const loadMore = useCallback(() => {
+    if (hasMore && !loading) {
+      loadParticipants(false);
+    }
+  }, [hasMore, loading, loadParticipants]);
+
+  // Search participants
+  const search = useCallback((query: string) => {
+    setSearchQuery(query);
+    setCursor(undefined);
+    loadParticipants(true, query);
+  }, [loadParticipants]);
+
+  // Refresh participants
+  const refresh = useCallback(() => {
+    setCursor(undefined);
+    loadParticipants(true);
+  }, [loadParticipants]);
+
+  // Initial load - only run once when participantSource changes
+  useEffect(() => {
+    loadParticipants(true);
+  }, [participantSource.loadParticipants]); // Only depend on the function to avoid loops
+
+  return {
+    participants,
+    loading,
+    error,
+    searchQuery,
+    hasMore,
+    totalCount: participantSource.totalCount,
+    loadMore,
+    search,
+    refresh,
+  };
+};

package/src/index.ts

@@ -0,0 +1,26 @@
+// Components
+export { MessagingShell } from './components/MessagingShell';
+export { ChannelList } from './components/ChannelList';
+export { ChannelView } from './components/ChannelView';
+export { ParticipantPicker } from './components/ParticipantPicker';
+export { Avatar } from './components/Avatar';
+
+// Providers
+export { MessagingProvider } from './providers/MessagingProvider';
+
+// Hooks
+export { useMessaging } from './hooks/useMessaging';
+export { useParticipants } from './hooks/useParticipants';
+
+// Types
+export type {
+  MessagingShellProps,
+  ChannelListProps,
+  ChannelViewProps,
+  ParticipantPickerProps,
+  MessagingProviderProps,
+  MessagingCapabilities,
+  ParticipantSource,
+  Participant
+} from './types';
+export type { AvatarProps } from './components/Avatar';

package/src/providers/MessagingProvider.tsx

@@ -0,0 +1,282 @@
+import React, { createContext, useContext, useEffect, useState, useRef, useCallback } from 'react';
+import type { Channel } from 'stream-chat';
+import { Chat } from 'stream-chat-react';
+import { StreamChatService } from '@linktr.ee/messaging-core';
+
+import type { 
+  MessagingProviderProps, 
+  MessagingCapabilities,
+  MessagingCustomization 
+} from '../types';
+
+/**
+ * Context value for messaging state and service
+ */
+export interface MessagingContextValue {
+  service: StreamChatService | null;
+  client: any; // Stream Chat client
+  isConnected: boolean;
+  isLoading: boolean;
+  error: string | null;
+  capabilities: MessagingCapabilities;
+  customization: MessagingCustomization;
+  refreshConnection: () => Promise<void>;
+  debug: boolean;
+}
+
+const MessagingContext = createContext<MessagingContextValue>({
+  service: null,
+  client: null,
+  isConnected: false,
+  isLoading: false,
+  error: null,
+  capabilities: {},
+  customization: {},
+  refreshConnection: async () => {},
+  debug: false,
+});
+
+/**
+ * Hook to access messaging context
+ */
+export const useMessagingContext = () => useContext(MessagingContext);
+
+/**
+ * Provider component that wraps messaging-core with React state management
+ */
+export const MessagingProvider: React.FC<MessagingProviderProps> = ({
+  children,
+  user,
+  serviceConfig,
+  apiKey,
+  capabilities = {},
+  customization = {},
+  debug = false,
+}) => {
+  // Create debug logger that respects the debug prop
+  const debugLog = (message: string, ...args: any[]) => {
+    if (debug) {
+      console.log(`🔥 [MessagingProvider] ${message}`, ...args);
+    }
+  };
+
+  debugLog('🔄 RENDER START', {
+    userId: user?.id,
+    apiKey: apiKey?.substring(0, 8) + '...',
+    serviceConfig: !!serviceConfig,
+    capabilities: Object.keys(capabilities),
+    customization: Object.keys(customization)
+  });
+
+  const [service, setService] = useState<StreamChatService | null>(null);
+  const [client, setClient] = useState<any>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  
+  // Prevent multiple concurrent connection attempts
+  const connectingRef = useRef(false);
+
+  // Track renders and prop changes
+  const prevPropsRef = useRef({ userId: user?.id, apiKey, serviceConfig, capabilities, customization });
+  const renderCountRef = useRef(0);
+  renderCountRef.current++;
+  
+  debugLog('📊 RENDER INFO', {
+    renderCount: renderCountRef.current,
+    currentProps: { userId: user?.id, apiKey: apiKey?.substring(0, 8) + '...' },
+    propChanges: {
+      userChanged: prevPropsRef.current.userId !== user?.id,
+      apiKeyChanged: prevPropsRef.current.apiKey !== apiKey,
+      serviceConfigChanged: prevPropsRef.current.serviceConfig !== serviceConfig,
+      capabilitiesChanged: prevPropsRef.current.capabilities !== capabilities,
+      customizationChanged: prevPropsRef.current.customization !== customization
+    }
+  });
+  
+  prevPropsRef.current = { userId: user?.id, apiKey, serviceConfig, capabilities, customization };
+
+  // Initialize service when config changes
+  useEffect(() => {
+    const currentRender = renderCountRef.current;
+    debugLog('🔧 SERVICE INIT EFFECT TRIGGERED', {
+      renderCount: currentRender,
+      apiKey: !!apiKey,
+      serviceConfig: !!serviceConfig,
+      dependencies: { 
+        apiKey: apiKey?.substring(0, 8) + '...', 
+        serviceConfigRef: serviceConfig,
+        serviceConfigStable: prevPropsRef.current.serviceConfig === serviceConfig,
+        apiKeyStable: prevPropsRef.current.apiKey === apiKey
+      }
+    });
+
+    if (!apiKey || !serviceConfig) {
+      debugLog('⚠️ SERVICE INIT SKIPPED', { renderCount: currentRender, reason: 'Missing apiKey or serviceConfig' });
+      return;
+    }
+
+    debugLog('🚀 CREATING NEW SERVICE', { 
+      renderCount: currentRender,
+      apiKey: apiKey?.substring(0, 8) + '...',
+      serviceConfigChanged: prevPropsRef.current.serviceConfig !== serviceConfig
+    });
+    
+    const newService = new StreamChatService({
+      ...serviceConfig,
+      apiKey,
+      debug,
+    });
+
+    setService(newService);
+    debugLog('✅ SERVICE SET', { renderCount: currentRender, serviceInstance: !!newService });
+    
+    return () => {
+      debugLog('🧹 SERVICE CLEANUP', { renderCount: currentRender, reason: 'Effect cleanup' });
+      newService.disconnectUser().catch(console.error);
+    };
+  }, [apiKey, serviceConfig]); // Use serviceConfig object directly, not individual properties
+
+  // Track if we've already connected this user with this service to prevent duplicate connections
+  const connectedUserRef = useRef<{serviceId: any, userId: string} | null>(null);
+
+  // Connect user when service and user are available
+  useEffect(() => {
+    debugLog('🔗 USER CONNECTION EFFECT TRIGGERED', {
+      hasService: !!service,
+      hasUser: !!user,
+      userId: user?.id,
+      isConnecting: connectingRef.current,
+      isConnected: isConnected,
+      dependencies: { service: !!service, userId: user?.id }
+    });
+
+    if (!service || !user) {
+      debugLog('⚠️ USER CONNECTION SKIPPED', 'Missing service or user');
+      return;
+    }
+    
+    if (connectingRef.current) {
+      debugLog('⚠️ USER CONNECTION SKIPPED', 'Already connecting');
+      return;
+    }
+    
+    // Check if we've already connected this exact user with this exact service instance
+    if (connectedUserRef.current?.serviceId === service && connectedUserRef.current?.userId === user.id) {
+      debugLog('⚠️ USER CONNECTION SKIPPED', 'Already connected this user with this service');
+      return;
+    }
+
+    const connectUser = async () => {
+      debugLog('🚀 STARTING USER CONNECTION', { userId: user.id });
+      connectingRef.current = true;
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        debugLog('📞 CALLING SERVICE.CONNECTUSER', { userId: user.id });
+        const streamClient = await service.connectUser(user);
+        setClient(streamClient);
+        setIsConnected(true);
+        connectedUserRef.current = { serviceId: service, userId: user.id }; // Mark as connected
+        debugLog('✅ USER CONNECTION SUCCESS', { userId: user.id, clientId: streamClient.userID });
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Connection failed';
+        setError(errorMessage);
+        debugLog('❌ USER CONNECTION ERROR', { userId: user.id, error: errorMessage });
+      } finally {
+        setIsLoading(false);
+        connectingRef.current = false;
+        debugLog('🔄 USER CONNECTION FINISHED', { userId: user.id, isConnected });
+      }
+    };
+
+    connectUser();
+  }, [service, user]); // Remove isConnected to prevent circular dependency
+
+  // Disconnect when user is removed (cleanup effect)
+  useEffect(() => {
+    debugLog('🔌 CLEANUP EFFECT REGISTERED', { hasService: !!service, isConnected });
+    return () => {
+      if (service && isConnected) {
+        debugLog('🧹 CLEANUP EFFECT TRIGGERED', 'Cleaning up connection on unmount');
+        connectedUserRef.current = null; // Reset connection tracking
+        service.disconnectUser().catch(console.error);
+      } else {
+        debugLog('🔇 CLEANUP EFFECT SKIPPED', { hasService: !!service, isConnected });
+      }
+    };
+  }, [service, isConnected]);
+
+  const refreshConnection = useCallback(async () => {
+    debugLog('🔄 REFRESH CONNECTION CALLED', { hasService: !!service, hasUser: !!user });
+    
+    if (!service || !user) {
+      debugLog('⚠️ REFRESH CONNECTION SKIPPED', 'Missing service or user');
+      return;
+    }
+
+    debugLog('🚀 STARTING CONNECTION REFRESH', { userId: user.id });
+    setIsLoading(true);
+    try {
+      debugLog('🔌 DISCONNECTING FOR REFRESH');
+      await service.disconnectUser();
+      debugLog('📞 RECONNECTING FOR REFRESH');
+      const streamClient = await service.connectUser(user);
+      setClient(streamClient);
+      setIsConnected(true);
+      setError(null);
+      debugLog('✅ CONNECTION REFRESH SUCCESS', { userId: user.id });
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Refresh failed';
+      setError(errorMessage);
+      debugLog('❌ CONNECTION REFRESH ERROR', { userId: user.id, error: errorMessage });
+    } finally {
+      setIsLoading(false);
+      debugLog('🔄 CONNECTION REFRESH FINISHED', { userId: user.id });
+    }
+  }, [service, user]);
+
+  // Memoize context value to prevent unnecessary re-renders
+  const contextValue: MessagingContextValue = React.useMemo(() => {
+    debugLog('💫 CONTEXT VALUE MEMOIZATION', {
+      hasService: !!service,
+      hasClient: !!client,
+      isConnected,
+      isLoading,
+      hasError: !!error,
+      capabilitiesKeys: Object.keys(capabilities),
+      customizationKeys: Object.keys(customization)
+    });
+    
+    return {
+      service,
+      client,
+      isConnected,
+      isLoading,
+      error,
+      capabilities,
+      customization,
+      refreshConnection,
+      debug,
+    };
+  }, [service, client, isConnected, isLoading, error, capabilities, customization, refreshConnection, debug]);
+
+  debugLog('🔄 RENDER END', {
+    renderCount: renderCountRef.current,
+    willRenderChat: !!(client && isConnected),
+    contextValueReady: !!contextValue
+  });
+
+  return (
+    <MessagingContext.Provider value={contextValue}>
+      {client && isConnected ? (
+        <Chat client={client}>
+          {children}
+        </Chat>
+      ) : (
+        children
+      )}
+    </MessagingContext.Provider>
+  );
+};

package/src/stories/mocks.tsx

@@ -0,0 +1,157 @@
+import React from 'react'
+import { StreamChat } from 'stream-chat'
+import { Chat } from 'stream-chat-react'
+
+// Mock Stream Chat client for Storybook
+const mockUser = {
+  id: 'storybook-user',
+  name: 'Storybook User',
+  image: 'https://i.pravatar.cc/150?img=1',
+}
+
+const createMockClient = () => {
+  const client = new StreamChat('mock-api-key', {
+    allowServerSideConnect: true,
+  })
+  
+  // Mock the client methods
+  client.connectUser = async () => {
+    return { me: mockUser } as any
+  }
+  
+  client.disconnectUser = async () => {
+    return Promise.resolve()
+  }
+
+  // @ts-ignore
+  client.userID = mockUser.id
+  // @ts-ignore
+  client.user = mockUser
+  
+  return client
+}
+
+export const MockChatProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [client] = React.useState(() => createMockClient())
+
+  React.useEffect(() => {
+    return () => {
+      client.disconnectUser().catch(console.error)
+    }
+  }, [client])
+
+  return <Chat client={client}>{children}</Chat>
+}
+
+// Create a mock chat provider with pre-populated channels
+export const MockChatProviderWithChannels: React.FC<{ 
+  children: React.ReactNode;
+  channelCount?: number;
+}> = ({ children, channelCount = 3 }) => {
+  const [client] = React.useState(() => {
+    const mockClient = createMockClient()
+    
+    // Create mock channels
+    const mockChannels = Array.from({ length: channelCount }, (_, i) => {
+      const participant = mockParticipants[i % mockParticipants.length]
+      
+      const mockChannel = {
+        id: `channel-${i + 1}`,
+        cid: `messaging:channel-${i + 1}`,
+        type: 'messaging',
+        _client: mockClient,
+        state: {
+          members: {
+            [mockUser.id]: { 
+              user: mockUser,
+              user_id: mockUser.id,
+            },
+            [participant.id]: { 
+              user: participant,
+              user_id: participant.id,
+            },
+          },
+          messages: [
+            {
+              id: `msg-${i}-1`,
+              text: `Hey! This is message ${i + 1}`,
+              created_at: new Date(Date.now() - 1000 * 60 * (i + 1)),
+              user: participant,
+            },
+          ],
+          unreadCount: i === 0 ? 2 : 0,
+          read: {},
+        },
+        // Mock channel methods
+        query: async () => ({ messages: [] }),
+        watch: async () => ({ messages: [] }),
+      }
+      
+      return mockChannel
+    })
+
+    // @ts-ignore - Mock queryChannels method
+    mockClient.queryChannels = async () => mockChannels
+    
+    return mockClient
+  })
+
+  React.useEffect(() => {
+    return () => {
+      client.disconnectUser().catch(console.error)
+    }
+  }, [client])
+
+  return <Chat client={client}>{children}</Chat>
+}
+
+// Mock participants for testing
+export const mockParticipants = [
+  {
+    id: 'participant-1',
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    image: 'https://i.pravatar.cc/150?img=2',
+  },
+  {
+    id: 'participant-2',
+    name: 'Bob Smith',
+    email: 'bob@example.com',
+    image: 'https://i.pravatar.cc/150?img=3',
+  },
+  {
+    id: 'participant-3',
+    name: 'Carol Williams',
+    email: 'carol@example.com',
+    image: 'https://i.pravatar.cc/150?img=4',
+  },
+  {
+    id: 'participant-4',
+    name: 'David Brown',
+    email: 'david@example.com',
+    image: 'https://i.pravatar.cc/150?img=5',
+  },
+  {
+    id: 'participant-5',
+    name: 'Emma Davis',
+    email: 'emma@example.com',
+    image: 'https://i.pravatar.cc/150?img=6',
+  },
+]
+
+// Mock participant source for testing
+export const mockParticipantSource = {
+  loadParticipants: async (options?: { search?: string; limit?: number }) => {
+    const searchTerm = options?.search || ''
+    const filtered = mockParticipants.filter(
+      (p) =>
+        p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        p.email.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+    return {
+      participants: filtered,
+      hasMore: false,
+    }
+  },
+}
+

package/src/test/setup.ts

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});
+
+// Mock Stream Chat if needed
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+// Mock IntersectionObserver for virtualization
+global.IntersectionObserver = class IntersectionObserver {
+  constructor() {}
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords() {
+    return [];
+  }
+  root = null;
+  rootMargin = '';
+  thresholds = [];
+};
+

package/src/test/utils.tsx

@@ -0,0 +1,23 @@
+import { render, RenderOptions, RenderResult } from '@testing-library/react';
+import { ReactElement, ReactNode } from 'react';
+
+/**
+ * Custom render function that wraps components with common providers
+ */
+export function renderWithProviders(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+): RenderResult {
+  function Wrapper({ children }: { children: ReactNode }) {
+    return <>{children}</>;
+  }
+
+  return render(ui, { wrapper: Wrapper, ...options });
+}
+
+/**
+ * Re-export everything from React Testing Library
+ */
+export * from '@testing-library/react';
+export { default as userEvent } from '@testing-library/user-event';
+