courrier multi account restore compose
This commit is contained in:
parent
9801ce2f27
commit
860bfbf7a4
@ -124,10 +124,7 @@ export default function CourrierPage() {
|
|||||||
const [showAddAccountForm, setShowAddAccountForm] = useState(false);
|
const [showAddAccountForm, setShowAddAccountForm] = useState(false);
|
||||||
|
|
||||||
// Email accounts for the sidebar
|
// Email accounts for the sidebar
|
||||||
const [accounts, setAccounts] = useState<Account[]>([
|
const [accounts, setAccounts] = useState<Account[]>([]);
|
||||||
{ id: 'all-accounts', name: 'All', email: '', color: 'bg-gray-500', folders: [] },
|
|
||||||
{ id: 'loading-account', name: 'Loading...', email: '', color: 'bg-blue-500', folders: [] }
|
|
||||||
]);
|
|
||||||
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
|
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
|
||||||
|
|
||||||
// Track expanded folders for each account
|
// Track expanded folders for each account
|
||||||
@ -136,24 +133,20 @@ export default function CourrierPage() {
|
|||||||
// Add state to track selected folder per account
|
// Add state to track selected folder per account
|
||||||
const [selectedFolders, setSelectedFolders] = useState<Record<string, string>>({});
|
const [selectedFolders, setSelectedFolders] = useState<Record<string, string>>({});
|
||||||
|
|
||||||
// Update account folders when mailboxes change - update this to maintain account IDs
|
// Update account folders individually
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('Mailboxes updated:', mailboxes);
|
if (mailboxes && selectedAccount) {
|
||||||
setAccounts(prev => {
|
setAccounts(prev => prev.map(account => {
|
||||||
const updated = [...prev];
|
if (account.id === selectedAccount.id) {
|
||||||
if (updated.length > 1) {
|
return {
|
||||||
// Only update folders, preserve other properties including ID
|
...account,
|
||||||
if (updated[1]) {
|
|
||||||
updated[1] = {
|
|
||||||
...updated[1],
|
|
||||||
folders: mailboxes
|
folders: mailboxes
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
console.log('Updated accounts with new mailboxes:', updated);
|
return account;
|
||||||
}
|
}));
|
||||||
return updated;
|
}
|
||||||
});
|
}, [mailboxes, selectedAccount]);
|
||||||
}, [mailboxes]);
|
|
||||||
|
|
||||||
// Debug accounts state
|
// Debug accounts state
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -550,7 +543,7 @@ export default function CourrierPage() {
|
|||||||
// Reset to page 1 when changing folders
|
// Reset to page 1 when changing folders
|
||||||
setPage(1);
|
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') {
|
if (accountId && accountId !== 'all-accounts') {
|
||||||
const account = accounts.find(a => a.id === accountId);
|
const account = accounts.find(a => a.id === accountId);
|
||||||
if (!account) {
|
if (!account) {
|
||||||
@ -559,38 +552,37 @@ export default function CourrierPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Check if the folder exists for this account
|
// 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}`);
|
console.error(`Folder ${folder} does not exist for account ${accountId}`);
|
||||||
// Fall back to INBOX if the folder doesn't exist
|
return;
|
||||||
folder = 'INBOX';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update the selected folder for this account
|
// Update the selected folder for this account
|
||||||
setSelectedFolders(prev => ({
|
setSelectedFolders(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
[accountId]: folder
|
[accountId]: accountFolder
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// Log the folder change with account ID
|
// Change folder in state with the correct account-specific folder name
|
||||||
console.log(`Changing folder to ${folder} for account ${accountId}`);
|
changeFolder(accountFolder, accountId);
|
||||||
}
|
setCurrentView(accountFolder);
|
||||||
|
} else {
|
||||||
// Change folder in the state, passing the clean folder name and accountId separately
|
// Handle "All Accounts" view
|
||||||
changeFolder(folder, accountId);
|
changeFolder(folder);
|
||||||
setCurrentView(folder);
|
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);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Update the folder button rendering to show selected state based on account
|
// Update the folder button rendering to show selected state based on account
|
||||||
const renderFolderButton = (folder: string, accountId: string) => {
|
const renderFolderButton = (folder: string, accountId: string) => {
|
||||||
|
// Remove account ID suffix for display
|
||||||
|
const displayFolder = folder.split('-')[0];
|
||||||
const isSelected = selectedFolders[accountId] === folder;
|
const isSelected = selectedFolders[accountId] === folder;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
key={folder}
|
key={folder}
|
||||||
@ -599,9 +591,9 @@ export default function CourrierPage() {
|
|||||||
onClick={() => handleMailboxChange(folder, accountId !== 'all-accounts' ? accountId : undefined)}
|
onClick={() => handleMailboxChange(folder, accountId !== 'all-accounts' ? accountId : undefined)}
|
||||||
>
|
>
|
||||||
<div className="flex items-center w-full">
|
<div className="flex items-center w-full">
|
||||||
{getFolderIcon(folder)}
|
{getFolderIcon(displayFolder)}
|
||||||
<span className="ml-2 truncate text-gray-700">{formatFolderName(folder)}</span>
|
<span className="ml-2 truncate text-gray-700">{formatFolderName(displayFolder)}</span>
|
||||||
{folder === 'INBOX' && unreadCount > 0 && (
|
{displayFolder === 'INBOX' && unreadCount > 0 && (
|
||||||
<span className="ml-auto bg-blue-500 text-white text-[10px] px-1.5 rounded-full">
|
<span className="ml-auto bg-blue-500 text-white text-[10px] px-1.5 rounded-full">
|
||||||
{unreadCount}
|
{unreadCount}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user