diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx index afedf3d2..117c88b4 100644 --- a/app/courrier/page.tsx +++ b/app/courrier/page.tsx @@ -124,10 +124,7 @@ export default function CourrierPage() { const [showAddAccountForm, setShowAddAccountForm] = useState(false); // Email accounts for the sidebar - const [accounts, setAccounts] = useState([ - { id: 'all-accounts', name: 'All', email: '', color: 'bg-gray-500', folders: [] }, - { id: 'loading-account', name: 'Loading...', email: '', color: 'bg-blue-500', folders: [] } - ]); + const [accounts, setAccounts] = useState([]); const [selectedAccount, setSelectedAccount] = useState(null); // Track expanded folders for each account @@ -136,24 +133,20 @@ export default function CourrierPage() { // Add state to track selected folder per account const [selectedFolders, setSelectedFolders] = useState>({}); - // Update account folders when mailboxes change - update this to maintain account IDs + // Update account folders individually useEffect(() => { - console.log('Mailboxes updated:', mailboxes); - setAccounts(prev => { - const updated = [...prev]; - if (updated.length > 1) { - // Only update folders, preserve other properties including ID - if (updated[1]) { - updated[1] = { - ...updated[1], + if (mailboxes && selectedAccount) { + setAccounts(prev => prev.map(account => { + if (account.id === selectedAccount.id) { + return { + ...account, folders: mailboxes }; } - console.log('Updated accounts with new mailboxes:', updated); - } - return updated; - }); - }, [mailboxes]); + return account; + })); + } + }, [mailboxes, selectedAccount]); // Debug accounts state useEffect(() => { @@ -550,7 +543,7 @@ export default function CourrierPage() { // Reset to page 1 when changing folders setPage(1); - // If we have a specific accountId, validate the folder exists for that account + // Validate folder exists for account before changing if (accountId && accountId !== 'all-accounts') { const account = accounts.find(a => a.id === accountId); if (!account) { @@ -559,38 +552,37 @@ export default function CourrierPage() { } // Check if the folder exists for this account - if (!account.folders?.includes(folder)) { + const accountFolder = account.folders?.find(f => + f === folder || f.startsWith(`${folder}-`) + ); + + if (!accountFolder) { console.error(`Folder ${folder} does not exist for account ${accountId}`); - // Fall back to INBOX if the folder doesn't exist - folder = 'INBOX'; + return; } // Update the selected folder for this account setSelectedFolders(prev => ({ ...prev, - [accountId]: folder + [accountId]: accountFolder })); - // Log the folder change with account ID - console.log(`Changing folder to ${folder} for account ${accountId}`); - } - - // Change folder in the state, passing the clean folder name and accountId separately - changeFolder(folder, accountId); - setCurrentView(folder); - - // Start prefetching additional pages for this folder - if (session?.user?.id && folder) { - // First two pages are most important - prefetch immediately - prefetchFolderEmails(session.user.id, folder, 3, 1, accountId).catch(err => { - console.error(`Error prefetching ${folder}:`, err); - }); + // Change folder in state with the correct account-specific folder name + changeFolder(accountFolder, accountId); + setCurrentView(accountFolder); + } else { + // Handle "All Accounts" view + changeFolder(folder); + setCurrentView(folder); } }; // Update the folder button rendering to show selected state based on account const renderFolderButton = (folder: string, accountId: string) => { + // Remove account ID suffix for display + const displayFolder = folder.split('-')[0]; const isSelected = selectedFolders[accountId] === folder; + return (