@djangocfg/ext-support 1.0.0

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

@@ -0,0 +1,258 @@
+/**
+ * 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, type Message, type MessageCreateRequest } from '../../../contexts/SupportContext';
+import { useAuth } from '@djangocfg/api/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,33 @@
+"use client"
+
+/**
+ * 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,115 @@
+/**
+ * Hook for infinite scroll support messages
+ * Uses SWR Infinite for pagination
+ */
+
+import useSWRInfinite from 'swr/infinite';
+import * as Fetchers from '../../../api/generated/ext_support/_utils/fetchers';
+import type { PaginatedMessageList, Message } from '../../../api/generated/ext_support/_utils/schemas';
+
+const PAGE_SIZE = 20;
+
+interface UseInfiniteMessagesReturn {
+  messages: Message[];
+  isLoading: boolean;
+  isLoadingMore: boolean;
+  error: Error | undefined;
+  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 Fetchers.getSupportTicketsMessagesList(
+      ticket_uuid,
+      { page, page_size: pageSize }
+    );
+  };
+
+  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,88 @@
+/**
+ * Hook for infinite scroll support tickets
+ * Uses SWR Infinite for pagination
+ */
+
+import useSWRInfinite from 'swr/infinite';
+import * as Fetchers from '../../../api/generated/ext_support/_utils/fetchers';
+import type { PaginatedTicketList, Ticket } from '../../../api/generated/ext_support/_utils/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 Fetchers.getSupportTicketsList(
+      { page, page_size: pageSize }
+    );
+  };
+
+  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,21 @@
+/**
+ * Support Layout Types
+ * UI state types for SupportLayout
+ */
+
+// Note: API types (Ticket, Message) are exported from the generated API:
+// import type { Ticket, Message } from '../../../api/generated/ext_support/_utils/schemas';
+
+// UI State
+export interface SupportUIState {
+  selectedTicketUuid: string | null;
+  isCreateDialogOpen: boolean;
+  viewMode: 'list' | 'grid';
+}
+
+// Form types
+export interface TicketFormData {
+  subject: string;
+  message: string;
+}
+

package/src/utils/logger.ts

@@ -0,0 +1,14 @@
+import { createConsola } from 'consola';
+
+/**
+ * Logger for @djangocfg/ext-support
+ */
+const isDevelopment = process.env.NODE_ENV === 'development';
+const showLogs = isDevelopment;
+
+export const logger = createConsola({
+  level: showLogs ? 4 : 1,
+}).withTag('ext-support');
+
+export const supportLogger = logger;
+export default logger;