From 6516a726e90551a0797d20b487961e5817ab54c1 Mon Sep 17 00:00:00 2001 From: alma Date: Sun, 27 Apr 2025 18:10:31 +0200 Subject: [PATCH] courrier multi account --- app/courrier/page.tsx | 360 ++++++++++++++++++++++++++---------------- 1 file changed, 224 insertions(+), 136 deletions(-) diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx index 654f790e..71d002f5 100644 --- a/app/courrier/page.tsx +++ b/app/courrier/page.tsx @@ -208,18 +208,43 @@ export default function CourrierPage() { const response = await fetch('/api/courrier/session'); const data = await response.json(); - console.log('[DEBUG] Session API response:', { - authenticated: data.authenticated, - hasEmailCredentials: data.hasEmailCredentials, - email: data.email, - allAccountsExists: !!data.allAccounts, - allAccountsIsArray: Array.isArray(data.allAccounts), - allAccountsLength: data.allAccounts?.length || 0, - mailboxesExists: !!data.mailboxes, - mailboxesIsArray: Array.isArray(data.mailboxes), - mailboxesLength: data.mailboxes?.length || 0 - }); - + // Log the raw API response to inspect structure + console.log('[DEBUG] Raw session API response:', JSON.stringify(data, null, 2)); + + // 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.allAccounts && Array.isArray(data.allAccounts)) { + data.allAccounts.forEach((account: any, idx: number) => { + console.log(`Account ${idx + 1}:`, { + id: account.id, + email: account.email, + display_name: account.display_name, + foldersExist: !!account.folders, + foldersIsArray: Array.isArray(account.folders), + foldersLength: account.folders?.length || 0, + folders: account.folders + }); + }); + } + if (!isMounted) return; if (data.authenticated) { @@ -234,33 +259,39 @@ export default function CourrierPage() { // Check if we have multiple accounts returned if (data.allAccounts && Array.isArray(data.allAccounts) && data.allAccounts.length > 0) { - console.log('Multiple accounts found:', data.allAccounts.length); + console.log('[DEBUG] Multiple accounts found:', data.allAccounts.length); + + // First, validate the structure of each account + data.allAccounts.forEach((account: any, index: number) => { + console.log(`[DEBUG] Account ${index+1} structure check:`, { + id: account.id, + email: account.email, + display_name: account.display_name, + hasFolders: !!account.folders, + foldersIsArray: Array.isArray(account.folders), + foldersCount: Array.isArray(account.folders) ? account.folders.length : 0, + folders: account.folders || [] + }); + }); // Add each account from the server data.allAccounts.forEach((account: any, index: number) => { - console.log(`[DEBUG] Processing account: ${account.email}, id: ${account.id}, display_name: ${account.display_name}, has folders: ${account.folders ? account.folders.length : 0}`); + // Check if the account has a valid folders array + if (!account.folders || !Array.isArray(account.folders)) { + console.warn(`[WARN] Account ${account.email} has invalid folders structure:`, account.folders); + // Use the global mailboxes as a fallback if available + account.folders = data.mailboxes && Array.isArray(data.mailboxes) ? + data.mailboxes : ['INBOX', 'Sent', 'Drafts', 'Trash', 'Junk']; + console.log(`[DEBUG] Using fallback folders for ${account.email}:`, account.folders); + } - // Force include some hardcoded folders if none are present - const fallbackFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Junk']; - - // Prioritize account-specific folders over global mailboxes - const folderList = (account.folders && account.folders.length > 0) ? - account.folders : - (data.mailboxes && data.mailboxes.length > 0) ? - data.mailboxes : - fallbackFolders; - - console.log(`[DEBUG] Using folders for ${account.email}:`, folderList); - - const accountWithFolders = { - id: account.id || `account-${index + 1}`, // Use the database ID or generate a stable ID + updatedAccounts.push({ + id: account.id || `account-${index}`, name: account.display_name || account.email, email: account.email, color: account.color || 'bg-blue-500', - folders: folderList - }; - console.log(`[DEBUG] Adding account with id ${accountWithFolders.id} and ${accountWithFolders.folders.length} folders:`, accountWithFolders.folders); - updatedAccounts.push(accountWithFolders); + folders: account.folders + }); }); } else if (data.email) { // Check if we have a single account from the API @@ -312,6 +343,12 @@ export default function CourrierPage() { } console.log('Setting accounts:', updatedAccounts); + // Debug each account's folders + updatedAccounts.forEach((acc: Account, idx: number) => { + console.log(`Account ${idx + 1}: ${acc.name} (${acc.email}) - Folders:`, + acc.folders ? acc.folders.length : 0, + acc.folders || []); + }); setAccounts(updatedAccounts); // Auto-select the first non-All account if available @@ -522,8 +559,38 @@ export default function CourrierPage() { router.push('/courrier/login'); }; - return ( - <> + // Add this log right before the return statement in the CourrierPage component + // Debug accounts and selectedAccount before rendering + useEffect(() => { + console.log('=== RENDER STATE INSPECTION ==='); + console.log('Current accounts state:', accounts); + console.log('Selected account:', selectedAccount); + console.log('Current folder:', currentFolder); + console.log('Show folders:', showFolders); + }, [accounts, selectedAccount, currentFolder, showFolders]); + + // Extra debugging for folder rendering + useEffect(() => { + if (selectedAccount && showFolders) { + console.log('Folder rendering debug:', + 'account:', selectedAccount.id, + 'folders:', selectedAccount.folders?.length || 0, + 'showFolders:', showFolders + ); + } + }, [selectedAccount, showFolders]); + + // Add useEffect for debugging near the other useEffect hooks + useEffect(() => { + if (typeof window !== 'undefined') { + console.log('[DEBUG] Rendering UI with:', { + accountsCount: accounts.length, + selectedAccountId: selectedAccount?.id, + showFolders, + currentFolder + }); + } + })} @@ -797,115 +864,136 @@ export default function CourrierPage() { {accountsDropdownOpen && (
- {accounts.map(account => ( -
- - - {/* Show folders for this account if it's selected and folders are shown */} - {((selectedAccount?.id === account.id && showFolders) || - (!selectedAccount && account.id !== 'all-accounts' && account.folders)) && ( -
- {account.folders && account.folders.length > 0 ? ( - account.folders.map((folder, folderIndex) => ( - + + {/* Show folders for this account if it's selected and folders are shown */} + {((selectedAccount?.id === account.id && showFolders) || + (!selectedAccount && account.id !== 'all-accounts' && account.folders)) && ( +
+ {/* No console.log here - moved to useEffect */} + {account.folders && account.folders.length > 0 ? ( + account.folders.map((folder, folderIndex) => ( +
- - )) - ) : ( -
No folders found
- )} -
- )} -
- ))} + + )) + ) : ( +
No folders found
+ )} +
+ )} + + ); + })} )}