alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

courrier multi account

Browse Source
This commit is contained in:
alma 2025-04-27 18:10:31 +02:00
parent c787d6a1a5
commit 6516a726e9
1 changed files with 224 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
app/courrier/page.tsx
View File

@ -208,17 +208,42 @@ export default function CourrierPage() {
const response = await fetch('/api/courrier/session'); const response = await fetch('/api/courrier/session');
const data = await response.json(); const data = await response.json();
console.log('[DEBUG] Session API response:', { // Log the raw API response to inspect structure
authenticated: data.authenticated, console.log('[DEBUG] Raw session API response:', JSON.stringify(data, null, 2));
hasEmailCredentials: data.hasEmailCredentials,
email: data.email, // Add detailed logging to inspect the accounts and folders structure
allAccountsExists: !!data.allAccounts, console.log('=== SESSION API RESPONSE DETAILED INSPECTION ===');
allAccountsIsArray: Array.isArray(data.allAccounts), console.log('Session authenticated:', data.authenticated);
allAccountsLength: data.allAccounts?.length || 0, console.log('Has email credentials:', data.hasEmailCredentials);
mailboxesExists: !!data.mailboxes, console.log('Primary email:', data.email);
mailboxesIsArray: Array.isArray(data.mailboxes), console.log('Redis status:', data.redisStatus);
mailboxesLength: data.mailboxes?.length || 0
// 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 (!isMounted) return;
@ -234,33 +259,39 @@ export default function CourrierPage() {
// Check if we have multiple accounts returned // Check if we have multiple accounts returned
if (data.allAccounts && Array.isArray(data.allAccounts) && data.allAccounts.length > 0) { 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 // Add each account from the server
data.allAccounts.forEach((account: any, index: number) => { 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 updatedAccounts.push({
const fallbackFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Junk']; id: account.id || `account-${index}`,
// 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
name: account.display_name || account.email, name: account.display_name || account.email,
email: account.email, email: account.email,
color: account.color || 'bg-blue-500', color: account.color || 'bg-blue-500',
folders: folderList folders: account.folders
}; });
console.log(`[DEBUG] Adding account with id ${accountWithFolders.id} and ${accountWithFolders.folders.length} folders:`, accountWithFolders.folders);
updatedAccounts.push(accountWithFolders);
}); });
} else if (data.email) { } else if (data.email) {
// Check if we have a single account from the API // Check if we have a single account from the API
@ -312,6 +343,12 @@ export default function CourrierPage() {
} }
console.log('Setting accounts:', updatedAccounts); 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); setAccounts(updatedAccounts);
// Auto-select the first non-All account if available // Auto-select the first non-All account if available
@ -522,8 +559,38 @@ export default function CourrierPage() {
router.push('/courrier/login'); 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
});
}
})}
<SimplifiedLoadingFix /> <SimplifiedLoadingFix />
<RedisCacheStatus /> <RedisCacheStatus />
@ -797,7 +864,12 @@ export default function CourrierPage() {
{accountsDropdownOpen && ( {accountsDropdownOpen && (
<div className="space-y-1 pl-2 accounts-dropdown"> <div className="space-y-1 pl-2 accounts-dropdown">
{accounts.map(account => ( {accounts.map(account => {
// Log outside of the JSX to avoid linter issues
if (process.env.NODE_ENV !== 'production') {
console.log('Rendering account:', account.id, account.name, 'has folders:', account.folders?.length || 0);
}
return (
<div key={account.id} className="relative group account-item"> <div key={account.id} className="relative group account-item">
<Button <Button
variant="ghost" variant="ghost"
@ -805,9 +877,15 @@ export default function CourrierPage() {
onClick={() => { onClick={() => {
// Toggle folders for this specific account // Toggle folders for this specific account
if (selectedAccount?.id === account.id) { if (selectedAccount?.id === account.id) {
console.log('[DEBUG] Toggling folders visibility for existing selection:', account.id, showFolders ? 'hiding' : 'showing');
setShowFolders(!showFolders); setShowFolders(!showFolders);
} else { } else {
// When selecting a new account, make sure we show its folders // When selecting a new account, make sure we show its folders
console.log('[DEBUG] Selecting different account', {
oldAccount: selectedAccount ? selectedAccount.id : 'none',
newAccount: account.id,
folders: account.folders?.length || 0
});
setShowFolders(true); setShowFolders(true);
// Reset to the inbox folder of the new account by default // Reset to the inbox folder of the new account by default
@ -816,20 +894,28 @@ export default function CourrierPage() {
const inboxFolder = account.folders.find(f => const inboxFolder = account.folders.find(f =>
f.toLowerCase() === 'inbox') || account.folders[0]; f.toLowerCase() === 'inbox') || account.folders[0];
console.log('[DEBUG] Switching to folder:', inboxFolder, 'for account', account.id);
// Change to this account's inbox folder // Change to this account's inbox folder
handleMailboxChange(inboxFolder, account.id); handleMailboxChange(inboxFolder, account.id);
} else {
console.log('[DEBUG] No folders found for account', account.id);
} }
} }
console.log('[DEBUG] Setting selected account to:', account.id, account.email);
setSelectedAccount(account); setSelectedAccount(account);
// Force the account to have folders if it doesn't already // Force the account to have folders if it doesn't already
if (account.id !== 'all-accounts' && (!account.folders || account.folders.length === 0)) { if (account.id !== 'all-accounts' && (!account.folders || account.folders.length === 0)) {
console.log('[DEBUG] Account has no folders, fetching folders for account:', account.id);
// Fetch folders for this account if not already available // Fetch folders for this account if not already available
fetch(`/api/courrier/account-folders?accountId=${account.id}`) fetch(`/api/courrier/account-folders?accountId=${account.id}`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
console.log('[DEBUG] Received folders from API:', data);
if (data.folders && Array.isArray(data.folders)) { if (data.folders && Array.isArray(data.folders)) {
console.log('[DEBUG] Updating account with fetched folders:', data.folders.length);
const accountWithFolders = { const accountWithFolders = {
...account, ...account,
folders: data.folders folders: data.folders
@ -844,7 +930,7 @@ export default function CourrierPage() {
} }
}) })
.catch(err => { .catch(err => {
console.error(`Error fetching folders for account ${account.id}:`, err); console.error(`[ERROR] Error fetching folders for account ${account.id}:`, err);
// Use default folders if API fails // Use default folders if API fails
const accountWithFolders = { const accountWithFolders = {
...account, ...account,
@ -872,6 +958,7 @@ export default function CourrierPage() {
{((selectedAccount?.id === account.id && showFolders) || {((selectedAccount?.id === account.id && showFolders) ||
(!selectedAccount && account.id !== 'all-accounts' && account.folders)) && ( (!selectedAccount && account.id !== 'all-accounts' && account.folders)) && (
<div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-200 folder-container"> <div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-200 folder-container">
{/* No console.log here - moved to useEffect */}
{account.folders && account.folders.length > 0 ? ( {account.folders && account.folders.length > 0 ? (
account.folders.map((folder, folderIndex) => ( account.folders.map((folder, folderIndex) => (
<Button <Button
@ -905,7 +992,8 @@ export default function CourrierPage() {
</div> </div>
)} )}
</div> </div>
))} );
})}
</div> </div>
)} )}
</div> </div>