@djangocfg/layouts 2.1.9 → 2.1.14

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

@@ -1,153 +0,0 @@
-/**
- * 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-nextjs';
-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) => (
-          <div key={i}>
-            <Skeleton
-              className="h-24 w-full animate-pulse"
-              style={{ animationDelay: `${i * 100}ms` }}
-            />
-          </div>
-        ))}
-      </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" viewportRef={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

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

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

@@ -1,263 +0,0 @@
-/**
- * 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/layouts/contexts';
-import { CfgSupportTypes } from '@djangocfg/api';
-import { supportLogger } from '../../../utils/logger';
-
-type Message = CfgSupportTypes.Message;
-type MessageCreateRequest = CfgSupportTypes.MessageCreateRequest;
-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

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

package/src/layouts/SupportLayout/events.ts

@@ -1,33 +0,0 @@
-"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

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

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

@@ -1,119 +0,0 @@
-/**
- * Hook for infinite scroll support messages
- * Uses SWR Infinite for pagination
- */
-
-import useSWRInfinite from 'swr/infinite';
-import { api, Fetchers, CfgSupportTypes } from '@djangocfg/api';
-import type { API } from '@djangocfg/api';
-
-type PaginatedMessageList = CfgSupportTypes.PaginatedMessageList;
-type Message = CfgSupportTypes.Message;
-
-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 },
-      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

@@ -1,92 +0,0 @@
-/**
- * Hook for infinite scroll support tickets
- * Uses SWR Infinite for pagination
- */
-
-import useSWRInfinite from 'swr/infinite';
-import { api, Fetchers, CfgSupportTypes } from '@djangocfg/api';
-import type { API } from '@djangocfg/api';
-
-type PaginatedTicketList = CfgSupportTypes.PaginatedTicketList;
-type Ticket = CfgSupportTypes.Ticket;
-
-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 },
-      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

@@ -1,8 +0,0 @@
-export * from './SupportLayout';
-export * from './context';
-export * from './events';
-// types.ts only contains UI-specific types (SupportUIState, TicketFormData)
-// Ticket and Message are exported from @djangocfg/layouts/contexts
-export * from './types';
-export * from './components';
-