@djangocfg/layouts 1.0.1

package/src/layouts/SupportLayout/components/TicketList.tsx

@@ -0,0 +1,152 @@
+/**
+ * Ticket List Component
+ * Displays a list of support tickets with infinite scroll
+ */
+
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+import { ScrollArea, Skeleton, Button } from '@djangocfg/ui';
+import { TicketCard } from './TicketCard';
+import { useSupportLayoutContext } from '../context';
+import { MessageSquare, Loader2 } from 'lucide-react';
+import { useInfiniteTickets } from '../hooks';
+import { SUPPORT_LAYOUT_EVENTS } from '../events';
+
+export const TicketList: React.FC = () => {
+  const { selectedTicket, selectTicket } = useSupportLayoutContext();
+  const {
+    tickets,
+    isLoading,
+    isLoadingMore,
+    hasMore,
+    loadMore,
+    totalCount,
+    refresh
+  } = useInfiniteTickets();
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+
+  // Listen for ticket creation events to refresh the list
+  useEffect(() => {
+    const handleTicketCreated = () => {
+      // Refresh the tickets list when a new ticket is created
+      refresh();
+    };
+
+    window.addEventListener(SUPPORT_LAYOUT_EVENTS.TICKET_CREATED, handleTicketCreated);
+
+    return () => {
+      window.removeEventListener(SUPPORT_LAYOUT_EVENTS.TICKET_CREATED, handleTicketCreated);
+    };
+  }, [refresh]);
+
+  // Set up intersection observer for infinite scroll
+  useEffect(() => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+    }
+
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && hasMore && !isLoadingMore) {
+          loadMore();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (loadMoreRef.current) {
+      observerRef.current.observe(loadMoreRef.current);
+    }
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [hasMore, isLoadingMore, loadMore]);
+
+  if (isLoading) {
+    return (
+      <div className="p-4 space-y-2">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <Skeleton
+            key={i}
+            className="h-24 w-full animate-pulse"
+            style={{ animationDelay: `${i * 100}ms` }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  if (!tickets || tickets.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-8 text-center animate-in fade-in zoom-in-95 duration-300">
+        <MessageSquare className="h-16 w-16 text-muted-foreground mb-4 animate-bounce" />
+        <h3 className="text-lg font-semibold mb-2">No tickets yet</h3>
+        <p className="text-sm text-muted-foreground max-w-sm">
+          Create your first support ticket to get help from our team
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <ScrollArea className="h-full" ref={scrollRef}>
+      <div className="p-4 space-y-2">
+        {tickets.map((ticket, index) => (
+          <div
+            key={ticket.uuid}
+            className="animate-in fade-in slide-in-from-left-2 duration-300"
+            style={{ animationDelay: `${Math.min(index, 10) * 50}ms` }}
+          >
+            <TicketCard
+              ticket={ticket}
+              isSelected={selectedTicket?.uuid === ticket.uuid}
+              onClick={() => selectTicket(ticket)}
+            />
+          </div>
+        ))}
+
+        {/* Load more trigger */}
+        <div ref={loadMoreRef} className="h-2" />
+
+        {/* Loading indicator */}
+        {isLoadingMore && (
+          <div className="flex justify-center py-4">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              <span className="text-sm">Loading more tickets...</span>
+            </div>
+          </div>
+        )}
+
+        {/* Manual load button if needed */}
+        {hasMore && !isLoadingMore && (
+          <div className="flex justify-center pt-2 pb-4">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={loadMore}
+              className="text-xs"
+            >
+              Load more ({totalCount > 0 ? `${tickets.length}/${totalCount}` : ''})
+            </Button>
+          </div>
+        )}
+
+        {/* End message */}
+        {!hasMore && tickets.length > 0 && (
+          <div className="text-center py-4 text-sm text-muted-foreground">
+            All {totalCount} tickets loaded
+          </div>
+        )}
+      </div>
+    </ScrollArea>
+  );
+};
+

package/src/layouts/SupportLayout/components/index.ts

@@ -0,0 +1,6 @@
+export * from './TicketCard';
+export * from './TicketList';
+export * from './MessageList';
+export * from './MessageInput';
+export * from './CreateTicketDialog';
+

package/src/layouts/SupportLayout/context/SupportLayoutContext.tsx

@@ -0,0 +1,260 @@
+/**
+ * Support Layout Context
+ * Wrapper around SupportContext with UI state, event handling and infinite scroll
+ */
+
+'use client';
+
+import React, { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from 'react';
+import { useSupportContext, type Ticket } from '@djangocfg/api/cfg/contexts';
+import type { Message, MessageCreateRequest } from '@djangocfg/api/cfg/generated/schemas';
+import { supportLogger } from '../../../utils/logger';
+import { useAuth } from '../../../auth';
+import { SUPPORT_LAYOUT_EVENTS } from '../events';
+import { useInfiniteMessages } from '../hooks';
+import type { SupportUIState, TicketFormData } from '../types';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context Type
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface SupportLayoutContextValue {
+  // From API context
+  tickets: Ticket[] | undefined;
+  isLoadingTickets: boolean;
+  ticketsError: Error | undefined;
+
+  // Selected ticket data
+  selectedTicket: Ticket | undefined;
+  selectedTicketMessages: Message[] | undefined;
+  isLoadingMessages: boolean;
+
+  // Infinite scroll for messages
+  isLoadingMoreMessages: boolean;
+  hasMoreMessages: boolean;
+  totalMessagesCount: number;
+  loadMoreMessages: () => void;
+
+  // UI state
+  uiState: SupportUIState;
+
+  // Actions
+  selectTicket: (ticket: Ticket | null) => void;
+  createTicket: (data: TicketFormData) => Promise<void>;
+  sendMessage: (message: string) => Promise<void>;
+  refreshTickets: () => Promise<void>;
+  refreshMessages: () => Promise<void>;
+
+  // Dialog actions
+  openCreateDialog: () => void;
+  closeCreateDialog: () => void;
+
+  // Utilities
+  getUnreadCount: () => number;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────
+
+const SupportLayoutContext = createContext<SupportLayoutContextValue | undefined>(undefined);
+
+// ─────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────
+
+interface SupportLayoutProviderProps {
+  children: ReactNode;
+}
+
+export function SupportLayoutProvider({ children }: SupportLayoutProviderProps) {
+  const support = useSupportContext();
+  const { user } = useAuth();
+
+  // UI state
+  const [uiState, setUIState] = useState<SupportUIState>({
+    selectedTicketUuid: null,
+    isCreateDialogOpen: false,
+    viewMode: 'list',
+  });
+
+  // Selected ticket
+  const selectedTicket = support.tickets?.find(t => t.uuid === uiState.selectedTicketUuid);
+
+  // Use infinite scroll hook for messages
+  const {
+    messages: selectedTicketMessages,
+    isLoading: isLoadingMessages,
+    isLoadingMore: isLoadingMoreMessages,
+    hasMore: hasMoreMessages,
+    totalCount: totalMessagesCount,
+    loadMore: loadMoreMessages,
+    refresh: refreshMessages,
+    addMessage: addMessageOptimistically,
+  } = useInfiniteMessages(selectedTicket?.uuid || null);
+
+  // Select ticket
+  const selectTicket = useCallback(async (ticket: Ticket | null) => {
+    setUIState(prev => ({ ...prev, selectedTicketUuid: ticket?.uuid || null }));
+
+    if (ticket?.uuid) {
+      // The messages will be loaded automatically by the useInfiniteMessages hook
+      // when the ticket UUID changes
+
+      // Dispatch event
+      window.dispatchEvent(
+        new CustomEvent(SUPPORT_LAYOUT_EVENTS.TICKET_SELECTED, { detail: { ticket } })
+      );
+    }
+  }, []);
+
+  // Create ticket
+  const createTicket = useCallback(async (data: TicketFormData) => {
+    if (!user?.id) {
+      throw new Error('User must be authenticated to create tickets');
+    }
+
+    const ticket = await support.createTicket({
+      user: user.id,
+      subject: data.subject,
+    });
+
+    // Send initial message if provided
+    if (ticket.uuid && data.message) {
+      await support.createMessage(ticket.uuid, {
+        text: data.message,
+      });
+    }
+
+    // Close dialog first for better UX
+    setUIState(prev => ({ ...prev, isCreateDialogOpen: false }));
+
+    // Refresh tickets list to show the new ticket
+    await support.refreshTickets();
+
+    // Dispatch event
+    window.dispatchEvent(
+      new CustomEvent(SUPPORT_LAYOUT_EVENTS.TICKET_CREATED, { detail: { ticket } })
+    );
+
+    // Auto-select the newly created ticket after refresh
+    // Use the ticket UUID directly to ensure selection works even if the ticket object changes
+    setUIState(prev => ({ ...prev, selectedTicketUuid: ticket.uuid }));
+
+    // Dispatch selection event
+    window.dispatchEvent(
+      new CustomEvent(SUPPORT_LAYOUT_EVENTS.TICKET_SELECTED, { detail: { ticket } })
+    );
+  }, [support, user]);
+
+  // Send message
+  const sendMessage = useCallback(async (message: string) => {
+    if (!selectedTicket?.uuid) return;
+
+    // Create the message object
+    const messageData: MessageCreateRequest = {
+      text: message,
+    };
+
+    // Send message to backend
+    const newMessage = await support.createMessage(selectedTicket.uuid, messageData);
+
+    // Add message optimistically to the UI (it will be replaced when refreshing)
+    if (newMessage) {
+      const fullMessage: Message = {
+        uuid: newMessage.uuid || `temp-${Date.now()}`,
+        ticket: selectedTicket.uuid,
+        sender: {
+          id: user?.id || 0,
+          display_username: user?.display_username || '',
+          email: user?.email || '',
+          avatar: user?.avatar || null,
+          initials: user?.initials || '',
+          is_staff: user?.is_staff || false,
+          is_superuser: user?.is_superuser || false,
+        },
+        is_from_author: true,
+        text: message,
+        created_at: new Date().toISOString(),
+      };
+
+      addMessageOptimistically(fullMessage);
+    }
+
+    // Refresh messages to get the latest state
+    await refreshMessages();
+
+    // Dispatch event
+    window.dispatchEvent(
+      new CustomEvent(SUPPORT_LAYOUT_EVENTS.MESSAGE_SENT, { detail: { message: newMessage } })
+    );
+  }, [selectedTicket, support, user, addMessageOptimistically, refreshMessages]);
+
+  // Dialog actions
+  const openCreateDialog = useCallback(() => {
+    setUIState(prev => ({ ...prev, isCreateDialogOpen: true }));
+  }, []);
+
+  const closeCreateDialog = useCallback(() => {
+    setUIState(prev => ({ ...prev, isCreateDialogOpen: false }));
+  }, []);
+
+  // Get unread count
+  const getUnreadCount = useCallback(() => {
+    return support.tickets?.reduce((count, ticket) => count + (ticket.unanswered_messages_count || 0), 0) || 0;
+  }, [support.tickets]);
+
+  // Event listeners
+  useEffect(() => {
+    const handleOpenDialog = () => openCreateDialog();
+    const handleCloseDialog = () => closeCreateDialog();
+
+    window.addEventListener(SUPPORT_LAYOUT_EVENTS.OPEN_CREATE_DIALOG, handleOpenDialog);
+    window.addEventListener(SUPPORT_LAYOUT_EVENTS.CLOSE_CREATE_DIALOG, handleCloseDialog);
+
+    return () => {
+      window.removeEventListener(SUPPORT_LAYOUT_EVENTS.OPEN_CREATE_DIALOG, handleOpenDialog);
+      window.removeEventListener(SUPPORT_LAYOUT_EVENTS.CLOSE_CREATE_DIALOG, handleCloseDialog);
+    };
+  }, [openCreateDialog, closeCreateDialog]);
+
+  const value: SupportLayoutContextValue = {
+    tickets: support.tickets,
+    isLoadingTickets: support.isLoadingTickets,
+    ticketsError: support.ticketsError,
+    selectedTicket,
+    selectedTicketMessages,
+    isLoadingMessages,
+    isLoadingMoreMessages,
+    hasMoreMessages,
+    totalMessagesCount,
+    loadMoreMessages,
+    uiState,
+    selectTicket,
+    createTicket,
+    sendMessage,
+    refreshTickets: support.refreshTickets,
+    refreshMessages,
+    openCreateDialog,
+    closeCreateDialog,
+    getUnreadCount,
+  };
+
+  return (
+    <SupportLayoutContext.Provider value={value}>
+      {children}
+    </SupportLayoutContext.Provider>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────
+
+export function useSupportLayoutContext(): SupportLayoutContextValue {
+  const context = useContext(SupportLayoutContext);
+  if (!context) {
+    throw new Error('useSupportLayoutContext must be used within SupportLayoutProvider');
+  }
+  return context;
+}

package/src/layouts/SupportLayout/context/index.ts

@@ -0,0 +1,2 @@
+export * from './SupportLayoutContext';
+

package/src/layouts/SupportLayout/events.ts

@@ -0,0 +1,31 @@
+/**
+ * Support Layout Events
+ * Event system for SupportLayout
+ */
+
+export const SUPPORT_LAYOUT_EVENTS = {
+  // Dialog events
+  OPEN_CREATE_DIALOG: 'support-layout:open-create-dialog',
+  CLOSE_CREATE_DIALOG: 'support-layout:close-create-dialog',
+  
+  // Ticket events
+  TICKET_SELECTED: 'support-layout:ticket-selected',
+  TICKET_CREATED: 'support-layout:ticket-created',
+  
+  // Message events
+  MESSAGE_SENT: 'support-layout:message-sent',
+} as const;
+
+// Event publishers
+export const openCreateTicketDialog = () => {
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new CustomEvent(SUPPORT_LAYOUT_EVENTS.OPEN_CREATE_DIALOG));
+  }
+};
+
+export const closeCreateTicketDialog = () => {
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new CustomEvent(SUPPORT_LAYOUT_EVENTS.CLOSE_CREATE_DIALOG));
+  }
+};
+

package/src/layouts/SupportLayout/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useInfiniteTickets';
+export * from './useInfiniteMessages';

package/src/layouts/SupportLayout/hooks/useInfiniteMessages.ts

@@ -0,0 +1,118 @@
+/**
+ * Hook for infinite scroll support messages
+ * Uses SWR Infinite for pagination
+ */
+
+import useSWRInfinite from 'swr/infinite';
+import { api } from '@djangocfg/api';
+import type { API } from '@djangocfg/api/cfg/generated';
+import { getSupportTicketsMessagesList } from '@djangocfg/api/cfg/generated/fetchers';
+import type { PaginatedMessageList, Message } from '@djangocfg/api/cfg/generated/schemas';
+
+const PAGE_SIZE = 20;
+
+interface UseInfiniteMessagesReturn {
+  messages: Message[];
+  isLoading: boolean;
+  isLoadingMore: boolean;
+  error: any;
+  hasMore: boolean;
+  totalCount: number;
+  loadMore: () => void;
+  refresh: () => Promise<void>;
+  addMessage: (message: Message) => void;
+}
+
+export function useInfiniteMessages(ticketUuid: string | null): UseInfiniteMessagesReturn {
+  const getKey = (pageIndex: number, previousPageData: PaginatedMessageList | null) => {
+    // No ticket selected
+    if (!ticketUuid) return null;
+
+    // Reached the end
+    if (previousPageData && !previousPageData.has_next) return null;
+
+    // First page, no previous data
+    if (pageIndex === 0) return ['cfg-support-messages-infinite', ticketUuid, 1, PAGE_SIZE];
+
+    // Add the page number to the SWR key
+    return ['cfg-support-messages-infinite', ticketUuid, pageIndex + 1, PAGE_SIZE];
+  };
+
+  const fetcher = async ([, ticket_uuid, page, pageSize]: [string, string, number, number]) => {
+    return getSupportTicketsMessagesList(
+      ticket_uuid,
+      { page, page_size: pageSize },
+      api as unknown as API
+    );
+  };
+
+  const {
+    data,
+    error,
+    isLoading,
+    isValidating,
+    size,
+    setSize,
+    mutate,
+  } = useSWRInfinite<PaginatedMessageList>(getKey, fetcher, {
+    revalidateFirstPage: false,
+    parallel: false,
+  });
+
+  // Flatten all pages into single array (reversed for chat display)
+  const messages: Message[] = data ? data.flatMap((page) => page.results) : [];
+
+  // Check if there are more pages
+  const hasMore = data && data[data.length - 1]?.has_next;
+
+  // Total count from last page
+  const totalCount = data && data[data.length - 1]?.count;
+
+  // Loading more state
+  const isLoadingMore = !!(isValidating && data && typeof data[size - 1] !== 'undefined');
+
+  // Function to load next page
+  const loadMore = () => {
+    if (hasMore && !isLoadingMore) {
+      setSize(size + 1);
+    }
+  };
+
+  // Refresh all pages
+  const refresh = async () => {
+    await mutate();
+  };
+
+  // Add new message optimistically
+  const addMessage = (message: Message) => {
+    if (!data || !data[0]) return;
+
+    // Add the message to the first page
+    const newData = [...data];
+    const firstPage = newData[0];
+
+    if (firstPage) {
+      newData[0] = {
+        ...firstPage,
+        results: [message, ...firstPage.results],
+        count: firstPage.count + 1,
+        page: firstPage.page || 1,
+        pages: firstPage.pages || 1,
+      };
+    }
+
+    mutate(newData, false);
+  };
+
+  return {
+    messages,
+    isLoading,
+    isLoadingMore: isLoadingMore || false,
+    error,
+    hasMore: hasMore || false,
+    totalCount: totalCount || 0,
+    loadMore,
+    refresh,
+    addMessage,
+  };
+}

package/src/layouts/SupportLayout/hooks/useInfiniteTickets.ts

@@ -0,0 +1,91 @@
+/**
+ * Hook for infinite scroll support tickets
+ * Uses SWR Infinite for pagination
+ */
+
+import useSWRInfinite from 'swr/infinite';
+import { api } from '@djangocfg/api';
+import type { API } from '@djangocfg/api/cfg/generated';
+import { getSupportTicketsList } from '@djangocfg/api/cfg/generated/fetchers';
+import type { PaginatedTicketList, Ticket } from '@djangocfg/api/cfg/generated/schemas';
+
+const PAGE_SIZE = 20;
+
+interface UseInfiniteTicketsReturn {
+  tickets: Ticket[];
+  isLoading: boolean;
+  isLoadingMore: boolean;
+  error: any;
+  hasMore: boolean;
+  totalCount: number;
+  loadMore: () => void;
+  refresh: () => Promise<void>;
+}
+
+export function useInfiniteTickets(): UseInfiniteTicketsReturn {
+  const getKey = (pageIndex: number, previousPageData: PaginatedTicketList | null) => {
+    // Reached the end
+    if (previousPageData && !previousPageData.has_next) return null;
+
+    // First page, no previous data
+    if (pageIndex === 0) return ['cfg-support-tickets-infinite', 1, PAGE_SIZE];
+
+    // Add the page number to the SWR key
+    return ['cfg-support-tickets-infinite', pageIndex + 1, PAGE_SIZE];
+  };
+
+  const fetcher = async ([, page, pageSize]: [string, number, number]) => {
+    return getSupportTicketsList(
+      { page, page_size: pageSize },
+      api as unknown as API
+    );
+  };
+
+  const {
+    data,
+    error,
+    isLoading,
+    isValidating,
+    size,
+    setSize,
+    mutate,
+  } = useSWRInfinite<PaginatedTicketList>(getKey, fetcher, {
+    revalidateFirstPage: false,
+    parallel: false,
+  });
+
+  // Flatten all pages into single array
+  const tickets: Ticket[] = data ? data.flatMap((page) => page.results) : [];
+
+  // Check if there are more pages
+  const hasMore = data && data[data.length - 1]?.has_next;
+
+  // Total count from last page
+  const totalCount = data && data[data.length - 1]?.count;
+
+  // Loading more state
+  const isLoadingMore = isValidating && data && typeof data[size - 1] !== 'undefined';
+
+  // Function to load next page
+  const loadMore = () => {
+    if (hasMore && !isLoadingMore) {
+      setSize(size + 1);
+    }
+  };
+
+  // Refresh all pages
+  const refresh = async () => {
+    await mutate();
+  };
+
+  return {
+    tickets,
+    isLoading,
+    isLoadingMore: isLoadingMore || false,
+    error,
+    hasMore: hasMore || false,
+    totalCount: totalCount || 0,
+    loadMore,
+    refresh,
+  };
+}

package/src/layouts/SupportLayout/index.ts

@@ -0,0 +1,6 @@
+export * from './SupportLayout';
+export * from './context';
+export * from './events';
+export * from './types';
+export * from './components';
+

package/src/layouts/SupportLayout/types.ts

@@ -0,0 +1,23 @@
+/**
+ * Support Layout Types
+ * Types for SupportLayout - combines API types with UI state
+ */
+
+import type { Ticket, Message } from '@djangocfg/api/cfg/contexts';
+
+// Re-export API types
+export type { Ticket, Message };
+
+// UI State
+export interface SupportUIState {
+  selectedTicketUuid: string | null;
+  isCreateDialogOpen: boolean;
+  viewMode: 'list' | 'grid';
+}
+
+// Form types
+export interface TicketFormData {
+  subject: string;
+  message: string;
+}
+