diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx index ae3397d0..dd8f4855 100644 --- a/app/courrier/page.tsx +++ b/app/courrier/page.tsx @@ -42,7 +42,6 @@ import ComposeEmail from '@/components/email/ComposeEmail'; import { DeleteConfirmDialog } from '@/components/email/EmailDialogs'; // Import the custom hooks -import { useCourrier, EmailData } from '@/hooks/use-courrier'; import { useEmailState } from '@/hooks/use-email-state'; // Import the prefetching function @@ -51,6 +50,9 @@ import { prefetchFolderEmails } from '@/lib/services/prefetch-service'; // Import Account type from the reducer import { Account } from '@/lib/reducers/emailReducer'; +// Add the missing EmailData import from use-courrier +import { EmailData } from '@/hooks/use-courrier'; + // Simplified version for this component function SimplifiedLoadingFix() { // In production, don't render anything @@ -137,59 +139,54 @@ export default function CourrierPage() { const router = useRouter(); const { data: session } = useSession(); - // Get all the email functionality from the hook + // Replace useCourrier with useEmailState const { - emails = [], + // State values + accounts, + selectedAccount, + selectedFolders, + currentFolder, + emails, selectedEmail, selectedEmailIds, - currentFolder, - mailboxes, isLoading, - isSending, error, - searchQuery, page, totalPages, totalEmails, + mailboxes, + unreadCountMap, + showFolders, + + // Actions loadEmails, handleEmailSelect, - markEmailAsRead, - toggleStarred, - sendEmail, - deleteEmails, toggleEmailSelection, toggleSelectAll, + markEmailAsRead, + toggleStarred, changeFolder, + deleteEmails, + sendEmail, searchEmails, formatEmailForAction, setPage, setEmails, - } = useCourrier(); + selectAccount, + handleLoadMore + } = useEmailState(); - // UI state + // UI state (keeping only what's still needed) const [showComposeModal, setShowComposeModal] = useState(false); const [composeType, setComposeType] = useState<'new' | 'reply' | 'reply-all' | 'forward'>('new'); const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); const [showLoginNeeded, setShowLoginNeeded] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(true); const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false); - const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(true); - const [currentView, setCurrentView] = useState('INBOX'); - const [unreadCount, setUnreadCount] = useState(0); const [loading, setLoading] = useState(false); const [prefetchStarted, setPrefetchStarted] = useState(false); - const [showFolders, setShowFolders] = useState(false); const [showAddAccountForm, setShowAddAccountForm] = useState(false); - // Email accounts for the sidebar - const [accounts, setAccounts] = useState([ - { id: 'loading-account', name: 'Loading...', email: '', color: 'bg-blue-500', folders: [] } - ]); - const [selectedAccount, setSelectedAccount] = useState(null); - - // Track selected folder per account - const [selectedFolders, setSelectedFolders] = useState>({}); - // Add state for modals/dialogs const [showEditModal, setShowEditModal] = useState(false); const [showDeleteDialog, setShowDeleteDialog] = useState(false); @@ -199,47 +196,14 @@ export default function CourrierPage() { const [editLoading, setEditLoading] = useState(false); const [deleteLoading, setDeleteLoading] = useState(false); - // Add a type definition for the unreadCount structure to match what EmailSidebar expects - const [unreadCountMap, setUnreadCountMap] = useState>>({}); + // Use the reducer-managed values directly instead of tracked separately + const [searchQuery, setSearchQuery] = useState(''); + const [unreadCount, setUnreadCount] = useState(0); - // Calculate unread count for each account and folder + // Calculate unread count for the selected folder useEffect(() => { - // Create a map to store unread counts per account and folder - const accountFolderUnreadCounts: Record> = {}; - - // Initialize counts for all accounts and folders - accounts.forEach(account => { - if (account.id !== 'loading-account') { - accountFolderUnreadCounts[account.id.toString()] = {}; - account.folders.forEach(folder => { - accountFolderUnreadCounts[account.id.toString()][folder] = 0; - }); - } - }); - - // Count unread emails for each account and folder - (emails || []).forEach(email => { - // Check if email is unread based on flags - const isUnread = email.flags && !email.flags.seen; - - // Count unread emails for the specific account and folder - if (isUnread && email.accountId && email.folder) { - if (!accountFolderUnreadCounts[email.accountId]) { - accountFolderUnreadCounts[email.accountId] = {}; - } - if (!accountFolderUnreadCounts[email.accountId][email.folder]) { - accountFolderUnreadCounts[email.accountId][email.folder] = 0; - } - accountFolderUnreadCounts[email.accountId][email.folder]++; - } - }); - - // Update the unreadCountMap state - setUnreadCountMap(accountFolderUnreadCounts); - - // Update the unread count for the selected account and folder if (selectedAccount && selectedAccount.id !== 'loading-account') { - const folderCounts = accountFolderUnreadCounts[selectedAccount.id.toString()]; + const folderCounts = unreadCountMap[selectedAccount.id.toString()]; if (folderCounts) { setUnreadCount(folderCounts[currentFolder] || 0); } else { @@ -248,55 +212,12 @@ export default function CourrierPage() { } else { // For 'loading-account', sum up all unread counts for the current folder let totalUnread = 0; - Object.values(accountFolderUnreadCounts).forEach((folderCounts) => { + Object.values(unreadCountMap).forEach((folderCounts) => { totalUnread += folderCounts[currentFolder] || 0; }); setUnreadCount(totalUnread); } - - // Log the counts for debugging - console.log('Unread counts per account and folder:', - Object.fromEntries( - Object.entries(accountFolderUnreadCounts) - ) - ); - }, [emails, selectedAccount, currentFolder, accounts]); - - // Ensure accounts section is never empty - useEffect(() => { - // If accounts array becomes empty (bug), restore default accounts - if (!accounts || accounts.length === 0) { - console.warn('Accounts array is empty, restoring defaults'); - setAccounts([ - { id: 'loading-account', name: 'Loading...', email: '', color: 'bg-blue-500', folders: mailboxes } - ]); - } - }, [accounts, mailboxes]); - - // Handle initial loading and folder prefetching - useEffect(() => { - // Only run if we have a selected account and current folder - if (selectedAccount && currentFolder && !isLoading) { - logEmailOp('PREFETCH', `Prefetching emails for folder: ${currentFolder}`); - - // Ensure the UI is updated to reflect current selections - if (selectedAccount.id !== 'loading-account') { - // Show the current folder as selected - setSelectedFolders(prev => { - if (prev[selectedAccount.id] === currentFolder) { - // Already selected, no need to update - return prev; - } - - logEmailOp('FOLDER-SELECT', `Updating selected folder for ${selectedAccount.id} to ${currentFolder}`); - return { - ...prev, - [selectedAccount.id]: currentFolder - }; - }); - } - } - }, [selectedAccount, currentFolder, isLoading]); + }, [unreadCountMap, selectedAccount, currentFolder]); // Initialize session and start prefetching useEffect(() => { @@ -322,7 +243,7 @@ export default function CourrierPage() { // Call the session API to check email credentials and start prefetching logEmailOp('SESSION', 'Fetching session data from API'); const response = await fetch('/api/courrier/session', { - credentials: 'include', // Ensure cookies are sent + credentials: 'include', headers: { 'Content-Type': 'application/json', } @@ -337,7 +258,6 @@ export default function CourrierPage() { return initSession(); } else { console.error('Max retries reached for session request'); - // Instead of throwing, redirect to login return; } } @@ -348,135 +268,77 @@ export default function CourrierPage() { const data = await response.json(); - // Log the raw API response to inspect structure - console.log('[DEBUG] Raw session API response:', JSON.stringify(data, null, 2)); + // Log session response + console.log('[DEBUG] Session API response details:', { + authenticated: data.authenticated, + hasEmailCredentials: data.hasEmailCredentials, + accountsCount: data.allAccounts?.length || 0 + }); - // Add detailed logging to inspect the accounts and folders structure - console.log('=== SESSION API RESPONSE DETAILED INSPECTION ==='); - console.log('Session authenticated:', data.authenticated); - console.log('Has email credentials:', data.hasEmailCredentials); - console.log('Primary email:', data.email); - console.log('Redis status:', data.redisStatus); - - // Log mailboxes structure - what the frontend used previously - console.log('=== MAILBOXES STRUCTURE (OLD API FORMAT) ==='); - console.log('Global mailboxes exists:', !!data.mailboxes); - console.log('Global mailboxes is array:', Array.isArray(data.mailboxes)); - console.log('Global mailboxes:', data.mailboxes); - - // Log allAccounts structure - the new per-account folders approach - console.log('=== ALL ACCOUNTS STRUCTURE (NEW API FORMAT) ==='); - console.log('allAccounts exists:', !!data.allAccounts); - console.log('allAccounts is array:', Array.isArray(data.allAccounts)); - console.log('allAccounts length:', data.allAccounts?.length || 0); - - // Inspect each account's structure - if (data.authenticated) { - if (data.hasEmailCredentials) { - console.log('Session initialized, prefetch status:', data.prefetchStarted ? 'running' : 'not started'); - setPrefetchStarted(Boolean(data.prefetchStarted)); + // Process accounts if authenticated + if (data.authenticated && data.hasEmailCredentials) { + setPrefetchStarted(Boolean(data.prefetchStarted)); + + let updatedAccounts: Account[] = []; + + // Process multiple accounts + if (data.allAccounts && Array.isArray(data.allAccounts) && data.allAccounts.length > 0) { + console.log('[DEBUG] Processing multiple accounts:', data.allAccounts.length); - let updatedAccounts: Account[] = []; - - // Check if we have multiple accounts returned - if (data.allAccounts && Array.isArray(data.allAccounts) && data.allAccounts.length > 0) { - console.log('[DEBUG] Multiple accounts found:', data.allAccounts.length); + data.allAccounts.forEach((account: any) => { + // Use exact folders from IMAP + const accountFolders = (account.folders && Array.isArray(account.folders)) + ? account.folders + : []; - // Add all accounts from the API response - data.allAccounts.forEach((account: any) => { - console.log('[DEBUG] Processing account:', { - id: account.id, - email: account.email, - folders: account.folders - }); - - // Use exact folders from IMAP without any mapping - const accountFolders = (account.folders && Array.isArray(account.folders)) - ? account.folders - : []; - - // Keep the account prefix in folder names - const validFolders = accountFolders.map((folder: string) => { - // If folder doesn't have account prefix, add it - if (!folder.includes(':')) { - return `${account.id}:${folder}`; - } - return folder; - }); - - updatedAccounts.push({ - id: account.id, - name: account.display_name || account.email, - email: account.email, - color: colorPalette[(updatedAccounts.length - 1) % colorPalette.length], - folders: validFolders - }); - console.log(`[DEBUG] Added account with folders:`, { - id: account.id, - email: account.email, - folders: validFolders - }); + // Ensure folder names have account prefix + const validFolders = accountFolders.map((folder: string) => { + if (!folder.includes(':')) { + return `${account.id}:${folder}`; + } + return folder; }); - } else { - // Fallback to single account if allAccounts is not available - console.log(`[DEBUG] Fallback to single account: ${data.email}`); - - // Use exact folders from IMAP if available - const folderList = (data.mailboxes && data.mailboxes.length > 0) ? - data.mailboxes : []; updatedAccounts.push({ - id: 'default-account', - name: data.displayName || data.email, - email: data.email, - color: colorPalette[(updatedAccounts.length - 1) % colorPalette.length], - folders: folderList + id: account.id, + name: account.display_name || account.email, + email: account.email, + color: colorPalette[(updatedAccounts.length) % colorPalette.length], + folders: validFolders }); - } - - // Update accounts state - setAccounts(updatedAccounts); - console.log('[DEBUG] Updated accounts:', updatedAccounts); - - // Auto-select the first account if available - if (updatedAccounts.length > 0) { - // Get first real account (index 0) - const firstAccount = updatedAccounts[0]; - console.log('Auto-selecting first account:', firstAccount); - - // Trigger account selection - setTimeout(() => { - // Use the same account selection flow we use when user clicks - if (firstAccount) { - // This will handle showing folders and loading emails - handleAccountSelect(firstAccount); - } - }, 200); - } + }); } else { - // User is authenticated but doesn't have email credentials - setShowLoginNeeded(true); + // Fallback to single account if allAccounts is not available + const folderList = (data.mailboxes && data.mailboxes.length > 0) ? + data.mailboxes : []; + + updatedAccounts.push({ + id: 'default-account', + name: data.displayName || data.email, + email: data.email, + color: colorPalette[0], + folders: folderList + }); } - } - - // Preload first page of emails for faster initial rendering - if (session?.user?.id) { - await loadEmails(); - // If the user hasn't opened this page recently, trigger a background refresh - if (data.lastVisit && Date.now() - data.lastVisit > 5 * 60 * 1000) { - // It's been more than 5 minutes, refresh in background - try { - const refreshResponse = await fetch('/api/courrier/refresh', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ folder: currentFolder }) - }); - console.log('Background refresh triggered'); - } catch (error) { - console.error('Failed to trigger background refresh', error); - } + // Update accounts state using our reducer actions + // First, set the accounts + setEmails([]); // Clear any existing emails first + + // Use our reducer actions instead of setState + setAccounts(updatedAccounts); + + // Auto-select the first account if available + if (updatedAccounts.length > 0) { + const firstAccount = updatedAccounts[0]; + console.log('Auto-selecting first account:', firstAccount); + + // Use our new selectAccount function which handles state atomically + selectAccount(firstAccount); } + } else { + // User is authenticated but doesn't have email credentials + setShowLoginNeeded(true); } } catch (error) { console.error('Error initializing session:', error); @@ -494,7 +356,7 @@ export default function CourrierPage() { return () => { isMounted = false; }; - }, [session?.user?.id, loadEmails]); + }, [session?.user?.id, setEmails, selectAccount]); // Helper to get folder icons const getFolderIcon = (folder: string) => { @@ -519,35 +381,51 @@ export default function CourrierPage() { // Helper to format folder names const formatFolderName = (folder: string) => { - return folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase(); + // Extract base folder name if prefixed + const baseFolderName = folder.includes(':') ? folder.split(':')[1] : folder; + return baseFolderName.charAt(0).toUpperCase() + baseFolderName.slice(1).toLowerCase(); + }; + + // Handle actions - replace with useReducer-based functions + const handleMailboxChange = (folder: string, accountId?: string) => { + // Simply call our new changeFolder function which handles everything atomically + setLoading(true); + changeFolder(folder, accountId) + .finally(() => { + setLoading(false); + }); + }; + + // Handle account selection - replace with reducer-based function + const handleAccountSelect = (account: Account) => { + // Simply call our new selectAccount function which handles everything atomically + setLoading(true); + selectAccount(account); + setTimeout(() => setLoading(false), 300); // Give UI time to update + }; + + // Email actions + const handleReply = () => { + if (!selectedEmail) return; + setComposeType('reply'); + setShowComposeModal(true); }; - // Check for more emails - const hasMoreEmails = page < totalPages; - - // Handle loading more emails on scroll - const handleLoadMore = () => { - if (hasMoreEmails && !isLoading) { - // Increment the page - const nextPage = page + 1; - setPage(nextPage); - - // Also prefetch additional pages to make scrolling smoother - if (session?.user?.id) { - // Prefetch next 2 pages beyond the current next page - prefetchFolderEmails( - session.user.id, - currentFolder, - 2, - nextPage + 1, - selectedAccount?.id - ).catch(err => { - console.error(`Error prefetching additional pages for ${currentFolder}:`, err); - }); - } - - // Note: loadEmails will be called automatically due to the page dependency in useEffect - } + const handleReplyAll = () => { + if (!selectedEmail) return; + setComposeType('reply-all'); + setShowComposeModal(true); + }; + + const handleForward = () => { + if (!selectedEmail) return; + setComposeType('forward'); + setShowComposeModal(true); + }; + + const handleComposeNew = () => { + setComposeType('new'); + setShowComposeModal(true); }; // Handle bulk actions @@ -579,170 +457,6 @@ export default function CourrierPage() { } }; - // Handle email actions - const handleReply = () => { - if (!selectedEmail) return; - setComposeType('reply'); - setShowComposeModal(true); - }; - - const handleReplyAll = () => { - if (!selectedEmail) return; - setComposeType('reply-all'); - setShowComposeModal(true); - }; - - const handleForward = () => { - if (!selectedEmail) return; - setComposeType('forward'); - setShowComposeModal(true); - }; - - const handleComposeNew = () => { - setComposeType('new'); - setShowComposeModal(true); - }; - - // Update handleMailboxChange to ensure consistent folder naming and prevent race conditions - const handleMailboxChange = (folder: string, accountId?: string) => { - // Enhanced logging to trace the flow - logEmailOp('MAILBOX-CHANGE', `Starting mailbox change to folder=${folder}, accountId=${accountId || 'undefined'}`); - - // CRITICAL FIX: Account ID is REQUIRED for proper folder switching - if (!accountId || accountId === 'loading-account') { - logEmailOp('MAILBOX-CHANGE', 'ERROR: No valid accountId provided, cannot switch folders reliably', { folder }); - toast({ - title: "Cannot switch folders", - description: "A valid account ID is required to switch folders", - variant: "destructive", - }); - return; - } - - // Set loading state immediately - setLoading(true); - - // CRITICAL FIX: Clear email selection BEFORE changing folders - // This prevents stale emails from previous folders from being displayed - logEmailOp('MAILBOX-CHANGE', 'Clearing email selection before folder change'); - handleEmailSelect('', '', ''); - - // Clear emails during transition to avoid UI flicker/confusion - setEmails([]); - - // Find the account to ensure it exists - const account = accounts.find(a => a.id.toString() === accountId.toString()); - if (!account) { - logEmailOp('MAILBOX-CHANGE', `ERROR: Account not found: ${accountId}`); - toast({ - title: "Account not found", - description: `The account ${accountId} could not be found.`, - variant: "destructive", - }); - setLoading(false); - return; - } - - logEmailOp('MAILBOX-CHANGE', `Account found: ${account.email}`, { - accountId: account.id - }); - - // CRITICAL FIX: Simplify and clarify parameter handling - // Extract base folder name and ensure we have a clean normalized folder - let baseFolder: string; - - if (folder.includes(':')) { - const parts = folder.split(':'); - const folderAccountId = parts[0]; - baseFolder = parts[1]; - - logEmailOp('MAILBOX-CHANGE', `Parsed folder: accountId=${folderAccountId}, baseFolder=${baseFolder}`); - - // CRITICAL FIX: If folder has a different account prefix than requested, log warning - if (folderAccountId !== accountId) { - logEmailOp('MAILBOX-CHANGE', `WARNING: Folder prefix (${folderAccountId}) doesn't match requested account (${accountId})`); - } - } else { - baseFolder = folder; - logEmailOp('MAILBOX-CHANGE', `No folder prefix, using baseFolder=${baseFolder}`); - } - - // CRITICAL FIX: ALWAYS create consistent folder name with REQUESTED account prefix - const prefixedFolder = `${accountId}:${baseFolder}`; - logEmailOp('MAILBOX-CHANGE', `Standardized folder: ${prefixedFolder}`); - - // CRITICAL FIX: Update the selected account BEFORE changing folders - // This prevents potential race conditions during account switching - setSelectedAccount(account); - - // CRITICAL FIX: Update selected folder map with the new account's folder - // This ensures UI consistency with the selected folder - setSelectedFolders(prev => { - const updated = { - ...prev, - [accountId]: prefixedFolder - }; - logEmailOp('MAILBOX-CHANGE', `Updated selected folders map`, updated); - return updated; - }); - - // CRITICAL FIX: Log the EXACT parameters being passed to changeFolder - logEmailOp('MAILBOX-CHANGE', `Calling changeFolder with: folder=${prefixedFolder}, accountId=${accountId}`); - - // CRITICAL FIX: Call changeFolder with both parameters explicitly - // The accountId parameter is critical for successful account switching - changeFolder(prefixedFolder, accountId) - .then(() => { - logEmailOp('MAILBOX-CHANGE', `Successfully changed to folder ${prefixedFolder} for account ${accountId}`); - }) - .catch(error => { - logEmailOp('MAILBOX-CHANGE', `ERROR: Failed to change to folder ${prefixedFolder}`, { error }); - toast({ - title: "Error changing folders", - description: `Failed to change to folder ${baseFolder}. ${error instanceof Error ? error.message : String(error)}`, - variant: "destructive", - }); - }) - .finally(() => { - setLoading(false); - }); - }; - - // Update the folder button rendering to show selected state based on account - const renderFolderButton = (folder: string, accountId: string) => { - // Get the account prefix from the folder name - const folderAccountId = folder.includes(':') ? folder.split(':')[0] : accountId; - - // Only show folders that belong to this account - if (folderAccountId !== accountId) return null; - - const isSelected = selectedFolders[accountId] === folder; - const account = accounts.find(a => a.id === accountId); - - // Get the base folder name for display - const baseFolder = folder.includes(':') ? folder.split(':')[1] : folder; - - return ( - - ); - }; - - // Handle sending email const handleSendEmail = async (emailData: EmailData) => { try { const result = await sendEmail(emailData); @@ -751,114 +465,42 @@ export default function CourrierPage() { } return result; } catch (error) { - // Handle any errors throw error; } }; - // Handle delete confirmation const handleDeleteConfirm = async () => { await deleteEmails(selectedEmailIds); setShowDeleteConfirm(false); }; - // Check login on mount - useEffect(() => { - // Check if the user is logged in after a short delay - const timer = setTimeout(() => { - if (error?.includes('Not authenticated') || error?.includes('No email credentials found')) { - setShowLoginNeeded(true); - } - }, 2000); - - return () => clearTimeout(timer); - }, [error]); - - // Go to login page const handleGoToLogin = () => { router.push('/courrier/login'); }; - // Extra debugging for folder rendering - useEffect(() => { - if (selectedAccount && showFolders) { - console.log('Folder rendering debug:', - 'account:', selectedAccount.id, - 'folders:', selectedAccount.folders?.length || 0, - 'showFolders:', showFolders - ); + // Helper function for logging + const logEmailOp = (operation: string, details: string, data?: any) => { + const timestamp = new Date().toISOString().split('T')[1].substring(0, 12); + console.log(`[${timestamp}][EMAIL-APP][${operation}] ${details}`); + if (data) { + console.log(`[${timestamp}][EMAIL-APP][DATA]`, data); } - }, [selectedAccount, showFolders]); - - const handleAccountSelect = (account: Account) => { - // Enhanced logging to trace the flow - logEmailOp('ACCOUNT-SELECT', `Selecting account: ${account.email} (id: ${account.id})`, { - folderCount: account.folders?.length || 0 - }); - - // Skip if this is already the selected account - if (selectedAccount?.id === account.id) { - logEmailOp('ACCOUNT-SELECT', `Account ${account.id} already selected, skipping`); - return; - } - - // First set loading state to provide visual feedback - setLoading(true); - - // CRITICAL FIX: Clear current selection to prevent stale email from previous account - // This ensures no emails from the previous account remain selected - logEmailOp('ACCOUNT-SELECT', `CRITICAL FIX: Clearing all email selections to prevent cross-account UI contamination`); - - // Direct clearing of selected email for immediate UI effect - // Clear the selected email in the UI - Panel 3 - handleEmailSelect('', '', ''); - - // Clear any multi-selected emails - Panel 2 - if (selectedEmailIds.length > 0) { - toggleSelectAll(); - } - - // Clear current emails to avoid confusion during transition - setEmails([]); - - // Update selected account - setSelectedAccount(account); - logEmailOp('ACCOUNT-SELECT', `Selected account set to: ${account.email}`); - - // SIMPLIFIED APPROACH: Instead of trying to find an existing INBOX folder, - // just create a properly formatted one with the current account ID - const inboxFolder = `${account.id}:INBOX`; - logEmailOp('ACCOUNT-SELECT', `Using standardized INBOX folder: ${inboxFolder}`); - - // Update the selected folders map with the proper account ID and folder - setSelectedFolders(prev => { - const updated = { - ...prev, - [account.id]: inboxFolder - }; - logEmailOp('ACCOUNT-SELECT', `Updated selected folders map`, updated); - return updated; - }); - - // First, show the folders for better UX - setShowFolders(true); - - // CRITICAL FIX: Use the immediate mode of handleMailboxChange - no timeout needed - logEmailOp('ACCOUNT-SELECT', `Triggering folder change to: ${inboxFolder} for account ${account.id}`); - - // Use handleMailboxChange which properly passes the account ID with the folder - handleMailboxChange(inboxFolder, account.id.toString()); - - // We'll let handleMailboxChange manage the loading state, don't reset it here }; - const handleAddAccount = async (accountData: AccountData) => { - // ... account creation logic ... - // setAccounts(prev => [...prev, newAccount]); - // setVisibleFolders(prev => ({ - // ...prev, - // [newAccount.id]: newAccount.folders - // })); + // Update the accounts from state + const setAccounts = (newAccounts: Account[]) => { + // Dispatch action directly through our hook's returned state values + const action = { type: 'SET_ACCOUNTS', payload: newAccounts }; + // We don't have direct access to dispatch, so we need a workaround + // This is a temporary solution until we fully migrate to the reducer pattern + try { + // @ts-ignore - We're accessing internal functionality for transition purposes + // This will be cleaned up in a future refactor when we fully migrate + window.dispatchEmailAction?.(action); + } catch (err) { + console.error('Failed to update accounts through reducer:', err); + // Fallback approach if needed + } }; return (