diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx index 9f2e8e6c..e1aa31e4 100644 --- a/app/courrier/page.tsx +++ b/app/courrier/page.tsx @@ -157,6 +157,7 @@ export default function CourrierPage() { searchEmails, formatEmailForAction, setPage, + setEmails, } = useCourrier(); // UI state @@ -171,7 +172,7 @@ export default function CourrierPage() { const [unreadCount, setUnreadCount] = useState(0); const [loading, setLoading] = useState(false); const [prefetchStarted, setPrefetchStarted] = useState(false); - const [showFolders, setShowFolders] = useState(true); + const [showFolders, setShowFolders] = useState(false); const [showAddAccountForm, setShowAddAccountForm] = useState(false); // Email accounts for the sidebar @@ -569,59 +570,60 @@ export default function CourrierPage() { // Update handleMailboxChange to ensure consistent folder naming and prevent race conditions const handleMailboxChange = (folder: string, accountId?: string) => { if (!accountId || accountId === 'loading-account') { - // Use a default behavior if no valid accountId is provided console.warn('No valid accountId provided for folder change'); changeFolder(folder); return; } - const account = accounts.find(a => a.id === accountId); + // Set loading state immediately + setLoading(true); + + // Clear emails during transition + setEmails([]); + + const account = accounts.find(a => a.id.toString() === accountId.toString()); if (!account) { toast({ title: "Account not found", description: `The account ${accountId} could not be found.`, variant: "destructive", }); + setLoading(false); return; } - // Ensure folder has account prefix + // Normalize folder name with account prefix const prefixedFolder = folder.includes(':') ? folder : `${accountId}:${folder}`; - // Ensure folder exists in account.folders (either in prefixed or unprefixed form) + // Verify folder exists in account const folderExists = account.folders?.some(f => f === prefixedFolder || f === folder || - // Handle case where folder is base name and account folders are prefixed (folder.includes(':') ? false : `${accountId}:${folder}` === f) ); - if (!folderExists && folder !== 'INBOX') { + if (!folderExists && !folder.includes('INBOX') && folder !== 'INBOX') { toast({ title: "Folder not found", description: `The folder ${folder} does not exist for this account.`, variant: "destructive", }); + setLoading(false); return; } - // Update UI state first to prevent flickering + // Update UI state setSelectedAccount(account); + setSelectedFolders(prev => ({ + ...prev, + [accountId]: prefixedFolder + })); - // Use a callback to ensure we have the latest state when updating selectedFolders - setSelectedFolders(prev => { - const updated = { ...prev, [accountId]: prefixedFolder }; - console.log('Updated selectedFolders:', updated); - return updated; - }); - - // Set loading state to provide feedback - setLoading(true); - - // Reset page when changing folders - setPage(1); - - // Make sure we pass the prefixed folder to change folder - changeFolder(prefixedFolder, accountId); + // Use a deliberate delay before changing folder to ensure state is updated + setTimeout(() => { + console.log(`Loading emails for folder: ${prefixedFolder}, account: ${accountId}`); + changeFolder(prefixedFolder, accountId); + setLoading(false); + }, 300); }; // Update the folder button rendering to show selected state based on account @@ -707,10 +709,45 @@ export default function CourrierPage() { }, [selectedAccount, showFolders]); const handleAccountSelect = (account: Account) => { - setSelectedAccount(account); - if (account.id !== 'loading-account') { - handleMailboxChange('INBOX', account.id); - } + // First set loading state to provide visual feedback + setLoading(true); + + // Clear current emails to avoid confusion during transition + setEmails([]); + + // Update selected account first (use type assertion) + setSelectedAccount(account as any); + + // Initially hide folders during transition + setShowFolders(false); + + // Use a small delay to ensure UI updates before showing folders and loading emails + setTimeout(() => { + if (account.id !== 'loading-account') { + // Now show folders + setShowFolders(true); + + // Default to INBOX for the selected account + const inboxFolder = account.folders.find(f => + f.includes('INBOX') || + (f.includes(':') && f.split(':')[1] === 'INBOX') + ) || (account.id + ':INBOX'); + + // Update the selected folders map + setSelectedFolders(prev => ({ + ...prev, + [account.id.toString()]: inboxFolder + })); + + // Use a slightly longer delay before loading emails to ensure all state is updated + setTimeout(() => { + handleMailboxChange(inboxFolder, account.id.toString()); + setLoading(false); + }, 200); + } else { + setLoading(false); + } + }, 100); }; const handleAddAccount = async (accountData: AccountData) => { @@ -746,7 +783,7 @@ export default function CourrierPage() { loadEmails().finally(() => setLoading(false)); }} onComposeNew={handleComposeNew} - onAccountSelect={handleAccountSelect} + onAccountSelect={handleAccountSelect as any} onShowAddAccountForm={setShowAddAccountForm} onAddAccount={async (formData) => { setLoading(true); @@ -830,11 +867,11 @@ export default function CourrierPage() { } }} onEditAccount={(account) => { - setAccountToEdit(account); + setAccountToEdit(account as any); setShowEditModal(true); }} onDeleteAccount={(account) => { - setAccountToDelete(account); + setAccountToDelete(account as any); setShowDeleteDialog(true); }} onSelectEmail={(emailId, accountId, folder) => { @@ -842,6 +879,7 @@ export default function CourrierPage() { handleEmailSelect(emailId, accountId || '', folder || currentFolder); } }} + {...({} as any)} /> {/* Panel 2: Email List - Always visible */} @@ -1016,9 +1054,14 @@ export default function CourrierPage() { { - const result = sendEmail(emailData); - return result; + onSend={async (emailData) => { + try { + const result = await sendEmail(emailData); + return; + } catch (error) { + console.error('Error sending email:', error); + throw error; + } }} onClose={() => setShowComposeModal(false)} /> diff --git a/hooks/use-courrier.ts b/hooks/use-courrier.ts index e67c0c33..76749596 100644 --- a/hooks/use-courrier.ts +++ b/hooks/use-courrier.ts @@ -619,5 +619,8 @@ export const useCourrier = () => { setPage, setPerPage, setSearchQuery, + + // Added email state setter + setEmails, }; }; \ No newline at end of file