courrier multi account restore compose
This commit is contained in:
parent
a9e85ca5f2
commit
952144c03c
@ -42,7 +42,6 @@ import ComposeEmail from '@/components/email/ComposeEmail';
|
||||
import { DeleteConfirmDialog } from '@/components/email/EmailDialogs';
|
||||
|
||||
// Import the custom hooks
|
||||
import { useCourrier, EmailData } from '@/hooks/use-courrier';
|
||||
import { useEmailState } from '@/hooks/use-email-state';
|
||||
|
||||
// Import the prefetching function
|
||||
@ -51,6 +50,9 @@ import { prefetchFolderEmails } from '@/lib/services/prefetch-service';
|
||||
// Import Account type from the reducer
|
||||
import { Account } from '@/lib/reducers/emailReducer';
|
||||
|
||||
// Add the missing EmailData import from use-courrier
|
||||
import { EmailData } from '@/hooks/use-courrier';
|
||||
|
||||
// Simplified version for this component
|
||||
function SimplifiedLoadingFix() {
|
||||
// In production, don't render anything
|
||||
@ -137,59 +139,54 @@ export default function CourrierPage() {
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
|
||||
// Get all the email functionality from the hook
|
||||
// Replace useCourrier with useEmailState
|
||||
const {
|
||||
emails = [],
|
||||
// State values
|
||||
accounts,
|
||||
selectedAccount,
|
||||
selectedFolders,
|
||||
currentFolder,
|
||||
emails,
|
||||
selectedEmail,
|
||||
selectedEmailIds,
|
||||
currentFolder,
|
||||
mailboxes,
|
||||
isLoading,
|
||||
isSending,
|
||||
error,
|
||||
searchQuery,
|
||||
page,
|
||||
totalPages,
|
||||
totalEmails,
|
||||
mailboxes,
|
||||
unreadCountMap,
|
||||
showFolders,
|
||||
|
||||
// Actions
|
||||
loadEmails,
|
||||
handleEmailSelect,
|
||||
markEmailAsRead,
|
||||
toggleStarred,
|
||||
sendEmail,
|
||||
deleteEmails,
|
||||
toggleEmailSelection,
|
||||
toggleSelectAll,
|
||||
markEmailAsRead,
|
||||
toggleStarred,
|
||||
changeFolder,
|
||||
deleteEmails,
|
||||
sendEmail,
|
||||
searchEmails,
|
||||
formatEmailForAction,
|
||||
setPage,
|
||||
setEmails,
|
||||
} = useCourrier();
|
||||
selectAccount,
|
||||
handleLoadMore
|
||||
} = useEmailState();
|
||||
|
||||
// UI state
|
||||
// UI state (keeping only what's still needed)
|
||||
const [showComposeModal, setShowComposeModal] = useState(false);
|
||||
const [composeType, setComposeType] = useState<'new' | 'reply' | 'reply-all' | 'forward'>('new');
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [showLoginNeeded, setShowLoginNeeded] = useState(false);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
||||
const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(true);
|
||||
const [currentView, setCurrentView] = useState('INBOX');
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [prefetchStarted, setPrefetchStarted] = useState(false);
|
||||
const [showFolders, setShowFolders] = useState(false);
|
||||
const [showAddAccountForm, setShowAddAccountForm] = useState(false);
|
||||
|
||||
// Email accounts for the sidebar
|
||||
const [accounts, setAccounts] = useState<Account[]>([
|
||||
{ id: 'loading-account', name: 'Loading...', email: '', color: 'bg-blue-500', folders: [] }
|
||||
]);
|
||||
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
|
||||
|
||||
// Track selected folder per account
|
||||
const [selectedFolders, setSelectedFolders] = useState<Record<string, string>>({});
|
||||
|
||||
// Add state for modals/dialogs
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
@ -199,47 +196,14 @@ export default function CourrierPage() {
|
||||
const [editLoading, setEditLoading] = useState(false);
|
||||
const [deleteLoading, setDeleteLoading] = useState(false);
|
||||
|
||||
// Add a type definition for the unreadCount structure to match what EmailSidebar expects
|
||||
const [unreadCountMap, setUnreadCountMap] = useState<Record<string, Record<string, number>>>({});
|
||||
// Use the reducer-managed values directly instead of tracked separately
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
|
||||
// Calculate unread count for each account and folder
|
||||
// Calculate unread count for the selected folder
|
||||
useEffect(() => {
|
||||
// Create a map to store unread counts per account and folder
|
||||
const accountFolderUnreadCounts: Record<string, Record<string, number>> = {};
|
||||
|
||||
// Initialize counts for all accounts and folders
|
||||
accounts.forEach(account => {
|
||||
if (account.id !== 'loading-account') {
|
||||
accountFolderUnreadCounts[account.id.toString()] = {};
|
||||
account.folders.forEach(folder => {
|
||||
accountFolderUnreadCounts[account.id.toString()][folder] = 0;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Count unread emails for each account and folder
|
||||
(emails || []).forEach(email => {
|
||||
// Check if email is unread based on flags
|
||||
const isUnread = email.flags && !email.flags.seen;
|
||||
|
||||
// Count unread emails for the specific account and folder
|
||||
if (isUnread && email.accountId && email.folder) {
|
||||
if (!accountFolderUnreadCounts[email.accountId]) {
|
||||
accountFolderUnreadCounts[email.accountId] = {};
|
||||
}
|
||||
if (!accountFolderUnreadCounts[email.accountId][email.folder]) {
|
||||
accountFolderUnreadCounts[email.accountId][email.folder] = 0;
|
||||
}
|
||||
accountFolderUnreadCounts[email.accountId][email.folder]++;
|
||||
}
|
||||
});
|
||||
|
||||
// Update the unreadCountMap state
|
||||
setUnreadCountMap(accountFolderUnreadCounts);
|
||||
|
||||
// Update the unread count for the selected account and folder
|
||||
if (selectedAccount && selectedAccount.id !== 'loading-account') {
|
||||
const folderCounts = accountFolderUnreadCounts[selectedAccount.id.toString()];
|
||||
const folderCounts = unreadCountMap[selectedAccount.id.toString()];
|
||||
if (folderCounts) {
|
||||
setUnreadCount(folderCounts[currentFolder] || 0);
|
||||
} else {
|
||||
@ -248,55 +212,12 @@ export default function CourrierPage() {
|
||||
} else {
|
||||
// For 'loading-account', sum up all unread counts for the current folder
|
||||
let totalUnread = 0;
|
||||
Object.values(accountFolderUnreadCounts).forEach((folderCounts) => {
|
||||
Object.values(unreadCountMap).forEach((folderCounts) => {
|
||||
totalUnread += folderCounts[currentFolder] || 0;
|
||||
});
|
||||
setUnreadCount(totalUnread);
|
||||
}
|
||||
|
||||
// Log the counts for debugging
|
||||
console.log('Unread counts per account and folder:',
|
||||
Object.fromEntries(
|
||||
Object.entries(accountFolderUnreadCounts)
|
||||
)
|
||||
);
|
||||
}, [emails, selectedAccount, currentFolder, accounts]);
|
||||
|
||||
// Ensure accounts section is never empty
|
||||
useEffect(() => {
|
||||
// If accounts array becomes empty (bug), restore default accounts
|
||||
if (!accounts || accounts.length === 0) {
|
||||
console.warn('Accounts array is empty, restoring defaults');
|
||||
setAccounts([
|
||||
{ id: 'loading-account', name: 'Loading...', email: '', color: 'bg-blue-500', folders: mailboxes }
|
||||
]);
|
||||
}
|
||||
}, [accounts, mailboxes]);
|
||||
|
||||
// Handle initial loading and folder prefetching
|
||||
useEffect(() => {
|
||||
// Only run if we have a selected account and current folder
|
||||
if (selectedAccount && currentFolder && !isLoading) {
|
||||
logEmailOp('PREFETCH', `Prefetching emails for folder: ${currentFolder}`);
|
||||
|
||||
// Ensure the UI is updated to reflect current selections
|
||||
if (selectedAccount.id !== 'loading-account') {
|
||||
// Show the current folder as selected
|
||||
setSelectedFolders(prev => {
|
||||
if (prev[selectedAccount.id] === currentFolder) {
|
||||
// Already selected, no need to update
|
||||
return prev;
|
||||
}
|
||||
|
||||
logEmailOp('FOLDER-SELECT', `Updating selected folder for ${selectedAccount.id} to ${currentFolder}`);
|
||||
return {
|
||||
...prev,
|
||||
[selectedAccount.id]: currentFolder
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [selectedAccount, currentFolder, isLoading]);
|
||||
}, [unreadCountMap, selectedAccount, currentFolder]);
|
||||
|
||||
// Initialize session and start prefetching
|
||||
useEffect(() => {
|
||||
@ -322,7 +243,7 @@ export default function CourrierPage() {
|
||||
// Call the session API to check email credentials and start prefetching
|
||||
logEmailOp('SESSION', 'Fetching session data from API');
|
||||
const response = await fetch('/api/courrier/session', {
|
||||
credentials: 'include', // Ensure cookies are sent
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
@ -337,7 +258,6 @@ export default function CourrierPage() {
|
||||
return initSession();
|
||||
} else {
|
||||
console.error('Max retries reached for session request');
|
||||
// Instead of throwing, redirect to login
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -348,135 +268,77 @@ export default function CourrierPage() {
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Log the raw API response to inspect structure
|
||||
console.log('[DEBUG] Raw session API response:', JSON.stringify(data, null, 2));
|
||||
// Log session response
|
||||
console.log('[DEBUG] Session API response details:', {
|
||||
authenticated: data.authenticated,
|
||||
hasEmailCredentials: data.hasEmailCredentials,
|
||||
accountsCount: data.allAccounts?.length || 0
|
||||
});
|
||||
|
||||
// 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.authenticated) {
|
||||
if (data.hasEmailCredentials) {
|
||||
console.log('Session initialized, prefetch status:', data.prefetchStarted ? 'running' : 'not started');
|
||||
setPrefetchStarted(Boolean(data.prefetchStarted));
|
||||
// Process accounts if authenticated
|
||||
if (data.authenticated && data.hasEmailCredentials) {
|
||||
setPrefetchStarted(Boolean(data.prefetchStarted));
|
||||
|
||||
let updatedAccounts: Account[] = [];
|
||||
|
||||
// Process multiple accounts
|
||||
if (data.allAccounts && Array.isArray(data.allAccounts) && data.allAccounts.length > 0) {
|
||||
console.log('[DEBUG] Processing multiple accounts:', data.allAccounts.length);
|
||||
|
||||
let updatedAccounts: Account[] = [];
|
||||
|
||||
// Check if we have multiple accounts returned
|
||||
if (data.allAccounts && Array.isArray(data.allAccounts) && data.allAccounts.length > 0) {
|
||||
console.log('[DEBUG] Multiple accounts found:', data.allAccounts.length);
|
||||
data.allAccounts.forEach((account: any) => {
|
||||
// Use exact folders from IMAP
|
||||
const accountFolders = (account.folders && Array.isArray(account.folders))
|
||||
? account.folders
|
||||
: [];
|
||||
|
||||
// Add all accounts from the API response
|
||||
data.allAccounts.forEach((account: any) => {
|
||||
console.log('[DEBUG] Processing account:', {
|
||||
id: account.id,
|
||||
email: account.email,
|
||||
folders: account.folders
|
||||
});
|
||||
|
||||
// Use exact folders from IMAP without any mapping
|
||||
const accountFolders = (account.folders && Array.isArray(account.folders))
|
||||
? account.folders
|
||||
: [];
|
||||
|
||||
// Keep the account prefix in folder names
|
||||
const validFolders = accountFolders.map((folder: string) => {
|
||||
// If folder doesn't have account prefix, add it
|
||||
if (!folder.includes(':')) {
|
||||
return `${account.id}:${folder}`;
|
||||
}
|
||||
return folder;
|
||||
});
|
||||
|
||||
updatedAccounts.push({
|
||||
id: account.id,
|
||||
name: account.display_name || account.email,
|
||||
email: account.email,
|
||||
color: colorPalette[(updatedAccounts.length - 1) % colorPalette.length],
|
||||
folders: validFolders
|
||||
});
|
||||
console.log(`[DEBUG] Added account with folders:`, {
|
||||
id: account.id,
|
||||
email: account.email,
|
||||
folders: validFolders
|
||||
});
|
||||
// Ensure folder names have account prefix
|
||||
const validFolders = accountFolders.map((folder: string) => {
|
||||
if (!folder.includes(':')) {
|
||||
return `${account.id}:${folder}`;
|
||||
}
|
||||
return folder;
|
||||
});
|
||||
} else {
|
||||
// Fallback to single account if allAccounts is not available
|
||||
console.log(`[DEBUG] Fallback to single account: ${data.email}`);
|
||||
|
||||
// Use exact folders from IMAP if available
|
||||
const folderList = (data.mailboxes && data.mailboxes.length > 0) ?
|
||||
data.mailboxes : [];
|
||||
|
||||
updatedAccounts.push({
|
||||
id: 'default-account',
|
||||
name: data.displayName || data.email,
|
||||
email: data.email,
|
||||
color: colorPalette[(updatedAccounts.length - 1) % colorPalette.length],
|
||||
folders: folderList
|
||||
id: account.id,
|
||||
name: account.display_name || account.email,
|
||||
email: account.email,
|
||||
color: colorPalette[(updatedAccounts.length) % colorPalette.length],
|
||||
folders: validFolders
|
||||
});
|
||||
}
|
||||
|
||||
// Update accounts state
|
||||
setAccounts(updatedAccounts);
|
||||
console.log('[DEBUG] Updated accounts:', updatedAccounts);
|
||||
|
||||
// Auto-select the first account if available
|
||||
if (updatedAccounts.length > 0) {
|
||||
// Get first real account (index 0)
|
||||
const firstAccount = updatedAccounts[0];
|
||||
console.log('Auto-selecting first account:', firstAccount);
|
||||
|
||||
// Trigger account selection
|
||||
setTimeout(() => {
|
||||
// Use the same account selection flow we use when user clicks
|
||||
if (firstAccount) {
|
||||
// This will handle showing folders and loading emails
|
||||
handleAccountSelect(firstAccount);
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// User is authenticated but doesn't have email credentials
|
||||
setShowLoginNeeded(true);
|
||||
// Fallback to single account if allAccounts is not available
|
||||
const folderList = (data.mailboxes && data.mailboxes.length > 0) ?
|
||||
data.mailboxes : [];
|
||||
|
||||
updatedAccounts.push({
|
||||
id: 'default-account',
|
||||
name: data.displayName || data.email,
|
||||
email: data.email,
|
||||
color: colorPalette[0],
|
||||
folders: folderList
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Preload first page of emails for faster initial rendering
|
||||
if (session?.user?.id) {
|
||||
await loadEmails();
|
||||
|
||||
// If the user hasn't opened this page recently, trigger a background refresh
|
||||
if (data.lastVisit && Date.now() - data.lastVisit > 5 * 60 * 1000) {
|
||||
// It's been more than 5 minutes, refresh in background
|
||||
try {
|
||||
const refreshResponse = await fetch('/api/courrier/refresh', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ folder: currentFolder })
|
||||
});
|
||||
console.log('Background refresh triggered');
|
||||
} catch (error) {
|
||||
console.error('Failed to trigger background refresh', error);
|
||||
}
|
||||
// Update accounts state using our reducer actions
|
||||
// First, set the accounts
|
||||
setEmails([]); // Clear any existing emails first
|
||||
|
||||
// Use our reducer actions instead of setState
|
||||
setAccounts(updatedAccounts);
|
||||
|
||||
// Auto-select the first account if available
|
||||
if (updatedAccounts.length > 0) {
|
||||
const firstAccount = updatedAccounts[0];
|
||||
console.log('Auto-selecting first account:', firstAccount);
|
||||
|
||||
// Use our new selectAccount function which handles state atomically
|
||||
selectAccount(firstAccount);
|
||||
}
|
||||
} else {
|
||||
// User is authenticated but doesn't have email credentials
|
||||
setShowLoginNeeded(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error initializing session:', error);
|
||||
@ -494,7 +356,7 @@ export default function CourrierPage() {
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [session?.user?.id, loadEmails]);
|
||||
}, [session?.user?.id, setEmails, selectAccount]);
|
||||
|
||||
// Helper to get folder icons
|
||||
const getFolderIcon = (folder: string) => {
|
||||
@ -519,35 +381,51 @@ export default function CourrierPage() {
|
||||
|
||||
// Helper to format folder names
|
||||
const formatFolderName = (folder: string) => {
|
||||
return folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase();
|
||||
// Extract base folder name if prefixed
|
||||
const baseFolderName = folder.includes(':') ? folder.split(':')[1] : folder;
|
||||
return baseFolderName.charAt(0).toUpperCase() + baseFolderName.slice(1).toLowerCase();
|
||||
};
|
||||
|
||||
// Handle actions - replace with useReducer-based functions
|
||||
const handleMailboxChange = (folder: string, accountId?: string) => {
|
||||
// Simply call our new changeFolder function which handles everything atomically
|
||||
setLoading(true);
|
||||
changeFolder(folder, accountId)
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
// Handle account selection - replace with reducer-based function
|
||||
const handleAccountSelect = (account: Account) => {
|
||||
// Simply call our new selectAccount function which handles everything atomically
|
||||
setLoading(true);
|
||||
selectAccount(account);
|
||||
setTimeout(() => setLoading(false), 300); // Give UI time to update
|
||||
};
|
||||
|
||||
// Email actions
|
||||
const handleReply = () => {
|
||||
if (!selectedEmail) return;
|
||||
setComposeType('reply');
|
||||
setShowComposeModal(true);
|
||||
};
|
||||
|
||||
// Check for more emails
|
||||
const hasMoreEmails = page < totalPages;
|
||||
|
||||
// Handle loading more emails on scroll
|
||||
const handleLoadMore = () => {
|
||||
if (hasMoreEmails && !isLoading) {
|
||||
// Increment the page
|
||||
const nextPage = page + 1;
|
||||
setPage(nextPage);
|
||||
|
||||
// Also prefetch additional pages to make scrolling smoother
|
||||
if (session?.user?.id) {
|
||||
// Prefetch next 2 pages beyond the current next page
|
||||
prefetchFolderEmails(
|
||||
session.user.id,
|
||||
currentFolder,
|
||||
2,
|
||||
nextPage + 1,
|
||||
selectedAccount?.id
|
||||
).catch(err => {
|
||||
console.error(`Error prefetching additional pages for ${currentFolder}:`, err);
|
||||
});
|
||||
}
|
||||
|
||||
// Note: loadEmails will be called automatically due to the page dependency in useEffect
|
||||
}
|
||||
const handleReplyAll = () => {
|
||||
if (!selectedEmail) return;
|
||||
setComposeType('reply-all');
|
||||
setShowComposeModal(true);
|
||||
};
|
||||
|
||||
const handleForward = () => {
|
||||
if (!selectedEmail) return;
|
||||
setComposeType('forward');
|
||||
setShowComposeModal(true);
|
||||
};
|
||||
|
||||
const handleComposeNew = () => {
|
||||
setComposeType('new');
|
||||
setShowComposeModal(true);
|
||||
};
|
||||
|
||||
// Handle bulk actions
|
||||
@ -579,170 +457,6 @@ export default function CourrierPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Handle email actions
|
||||
const handleReply = () => {
|
||||
if (!selectedEmail) return;
|
||||
setComposeType('reply');
|
||||
setShowComposeModal(true);
|
||||
};
|
||||
|
||||
const handleReplyAll = () => {
|
||||
if (!selectedEmail) return;
|
||||
setComposeType('reply-all');
|
||||
setShowComposeModal(true);
|
||||
};
|
||||
|
||||
const handleForward = () => {
|
||||
if (!selectedEmail) return;
|
||||
setComposeType('forward');
|
||||
setShowComposeModal(true);
|
||||
};
|
||||
|
||||
const handleComposeNew = () => {
|
||||
setComposeType('new');
|
||||
setShowComposeModal(true);
|
||||
};
|
||||
|
||||
// Update handleMailboxChange to ensure consistent folder naming and prevent race conditions
|
||||
const handleMailboxChange = (folder: string, accountId?: string) => {
|
||||
// Enhanced logging to trace the flow
|
||||
logEmailOp('MAILBOX-CHANGE', `Starting mailbox change to folder=${folder}, accountId=${accountId || 'undefined'}`);
|
||||
|
||||
// CRITICAL FIX: Account ID is REQUIRED for proper folder switching
|
||||
if (!accountId || accountId === 'loading-account') {
|
||||
logEmailOp('MAILBOX-CHANGE', 'ERROR: No valid accountId provided, cannot switch folders reliably', { folder });
|
||||
toast({
|
||||
title: "Cannot switch folders",
|
||||
description: "A valid account ID is required to switch folders",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Set loading state immediately
|
||||
setLoading(true);
|
||||
|
||||
// CRITICAL FIX: Clear email selection BEFORE changing folders
|
||||
// This prevents stale emails from previous folders from being displayed
|
||||
logEmailOp('MAILBOX-CHANGE', 'Clearing email selection before folder change');
|
||||
handleEmailSelect('', '', '');
|
||||
|
||||
// Clear emails during transition to avoid UI flicker/confusion
|
||||
setEmails([]);
|
||||
|
||||
// Find the account to ensure it exists
|
||||
const account = accounts.find(a => a.id.toString() === accountId.toString());
|
||||
if (!account) {
|
||||
logEmailOp('MAILBOX-CHANGE', `ERROR: Account not found: ${accountId}`);
|
||||
toast({
|
||||
title: "Account not found",
|
||||
description: `The account ${accountId} could not be found.`,
|
||||
variant: "destructive",
|
||||
});
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
logEmailOp('MAILBOX-CHANGE', `Account found: ${account.email}`, {
|
||||
accountId: account.id
|
||||
});
|
||||
|
||||
// CRITICAL FIX: Simplify and clarify parameter handling
|
||||
// Extract base folder name and ensure we have a clean normalized folder
|
||||
let baseFolder: string;
|
||||
|
||||
if (folder.includes(':')) {
|
||||
const parts = folder.split(':');
|
||||
const folderAccountId = parts[0];
|
||||
baseFolder = parts[1];
|
||||
|
||||
logEmailOp('MAILBOX-CHANGE', `Parsed folder: accountId=${folderAccountId}, baseFolder=${baseFolder}`);
|
||||
|
||||
// CRITICAL FIX: If folder has a different account prefix than requested, log warning
|
||||
if (folderAccountId !== accountId) {
|
||||
logEmailOp('MAILBOX-CHANGE', `WARNING: Folder prefix (${folderAccountId}) doesn't match requested account (${accountId})`);
|
||||
}
|
||||
} else {
|
||||
baseFolder = folder;
|
||||
logEmailOp('MAILBOX-CHANGE', `No folder prefix, using baseFolder=${baseFolder}`);
|
||||
}
|
||||
|
||||
// CRITICAL FIX: ALWAYS create consistent folder name with REQUESTED account prefix
|
||||
const prefixedFolder = `${accountId}:${baseFolder}`;
|
||||
logEmailOp('MAILBOX-CHANGE', `Standardized folder: ${prefixedFolder}`);
|
||||
|
||||
// CRITICAL FIX: Update the selected account BEFORE changing folders
|
||||
// This prevents potential race conditions during account switching
|
||||
setSelectedAccount(account);
|
||||
|
||||
// CRITICAL FIX: Update selected folder map with the new account's folder
|
||||
// This ensures UI consistency with the selected folder
|
||||
setSelectedFolders(prev => {
|
||||
const updated = {
|
||||
...prev,
|
||||
[accountId]: prefixedFolder
|
||||
};
|
||||
logEmailOp('MAILBOX-CHANGE', `Updated selected folders map`, updated);
|
||||
return updated;
|
||||
});
|
||||
|
||||
// CRITICAL FIX: Log the EXACT parameters being passed to changeFolder
|
||||
logEmailOp('MAILBOX-CHANGE', `Calling changeFolder with: folder=${prefixedFolder}, accountId=${accountId}`);
|
||||
|
||||
// CRITICAL FIX: Call changeFolder with both parameters explicitly
|
||||
// The accountId parameter is critical for successful account switching
|
||||
changeFolder(prefixedFolder, accountId)
|
||||
.then(() => {
|
||||
logEmailOp('MAILBOX-CHANGE', `Successfully changed to folder ${prefixedFolder} for account ${accountId}`);
|
||||
})
|
||||
.catch(error => {
|
||||
logEmailOp('MAILBOX-CHANGE', `ERROR: Failed to change to folder ${prefixedFolder}`, { error });
|
||||
toast({
|
||||
title: "Error changing folders",
|
||||
description: `Failed to change to folder ${baseFolder}. ${error instanceof Error ? error.message : String(error)}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
// Update the folder button rendering to show selected state based on account
|
||||
const renderFolderButton = (folder: string, accountId: string) => {
|
||||
// Get the account prefix from the folder name
|
||||
const folderAccountId = folder.includes(':') ? folder.split(':')[0] : accountId;
|
||||
|
||||
// Only show folders that belong to this account
|
||||
if (folderAccountId !== accountId) return null;
|
||||
|
||||
const isSelected = selectedFolders[accountId] === folder;
|
||||
const account = accounts.find(a => a.id === accountId);
|
||||
|
||||
// Get the base folder name for display
|
||||
const baseFolder = folder.includes(':') ? folder.split(':')[1] : folder;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={folder}
|
||||
variant="ghost"
|
||||
className={`w-full justify-start text-xs py-1 h-7 ${isSelected ? 'bg-gray-100' : ''}`}
|
||||
onClick={() => handleMailboxChange(folder, accountId)}
|
||||
>
|
||||
<div className="flex items-center w-full">
|
||||
{getFolderIcon(baseFolder)}
|
||||
<span className="ml-2 truncate text-gray-700">{formatFolderName(baseFolder)}</span>
|
||||
{baseFolder === 'INBOX' && unreadCount > 0 && (
|
||||
<span className="ml-auto bg-blue-500 text-white text-[10px] px-1.5 rounded-full">
|
||||
{unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
// Handle sending email
|
||||
const handleSendEmail = async (emailData: EmailData) => {
|
||||
try {
|
||||
const result = await sendEmail(emailData);
|
||||
@ -751,114 +465,42 @@ export default function CourrierPage() {
|
||||
}
|
||||
return result;
|
||||
} catch (error) {
|
||||
// Handle any errors
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// Handle delete confirmation
|
||||
const handleDeleteConfirm = async () => {
|
||||
await deleteEmails(selectedEmailIds);
|
||||
setShowDeleteConfirm(false);
|
||||
};
|
||||
|
||||
// Check login on mount
|
||||
useEffect(() => {
|
||||
// Check if the user is logged in after a short delay
|
||||
const timer = setTimeout(() => {
|
||||
if (error?.includes('Not authenticated') || error?.includes('No email credentials found')) {
|
||||
setShowLoginNeeded(true);
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [error]);
|
||||
|
||||
// Go to login page
|
||||
const handleGoToLogin = () => {
|
||||
router.push('/courrier/login');
|
||||
};
|
||||
|
||||
// Extra debugging for folder rendering
|
||||
useEffect(() => {
|
||||
if (selectedAccount && showFolders) {
|
||||
console.log('Folder rendering debug:',
|
||||
'account:', selectedAccount.id,
|
||||
'folders:', selectedAccount.folders?.length || 0,
|
||||
'showFolders:', showFolders
|
||||
);
|
||||
// Helper function for logging
|
||||
const logEmailOp = (operation: string, details: string, data?: any) => {
|
||||
const timestamp = new Date().toISOString().split('T')[1].substring(0, 12);
|
||||
console.log(`[${timestamp}][EMAIL-APP][${operation}] ${details}`);
|
||||
if (data) {
|
||||
console.log(`[${timestamp}][EMAIL-APP][DATA]`, data);
|
||||
}
|
||||
}, [selectedAccount, showFolders]);
|
||||
|
||||
const handleAccountSelect = (account: Account) => {
|
||||
// Enhanced logging to trace the flow
|
||||
logEmailOp('ACCOUNT-SELECT', `Selecting account: ${account.email} (id: ${account.id})`, {
|
||||
folderCount: account.folders?.length || 0
|
||||
});
|
||||
|
||||
// Skip if this is already the selected account
|
||||
if (selectedAccount?.id === account.id) {
|
||||
logEmailOp('ACCOUNT-SELECT', `Account ${account.id} already selected, skipping`);
|
||||
return;
|
||||
}
|
||||
|
||||
// First set loading state to provide visual feedback
|
||||
setLoading(true);
|
||||
|
||||
// CRITICAL FIX: Clear current selection to prevent stale email from previous account
|
||||
// This ensures no emails from the previous account remain selected
|
||||
logEmailOp('ACCOUNT-SELECT', `CRITICAL FIX: Clearing all email selections to prevent cross-account UI contamination`);
|
||||
|
||||
// Direct clearing of selected email for immediate UI effect
|
||||
// Clear the selected email in the UI - Panel 3
|
||||
handleEmailSelect('', '', '');
|
||||
|
||||
// Clear any multi-selected emails - Panel 2
|
||||
if (selectedEmailIds.length > 0) {
|
||||
toggleSelectAll();
|
||||
}
|
||||
|
||||
// Clear current emails to avoid confusion during transition
|
||||
setEmails([]);
|
||||
|
||||
// Update selected account
|
||||
setSelectedAccount(account);
|
||||
logEmailOp('ACCOUNT-SELECT', `Selected account set to: ${account.email}`);
|
||||
|
||||
// SIMPLIFIED APPROACH: Instead of trying to find an existing INBOX folder,
|
||||
// just create a properly formatted one with the current account ID
|
||||
const inboxFolder = `${account.id}:INBOX`;
|
||||
logEmailOp('ACCOUNT-SELECT', `Using standardized INBOX folder: ${inboxFolder}`);
|
||||
|
||||
// Update the selected folders map with the proper account ID and folder
|
||||
setSelectedFolders(prev => {
|
||||
const updated = {
|
||||
...prev,
|
||||
[account.id]: inboxFolder
|
||||
};
|
||||
logEmailOp('ACCOUNT-SELECT', `Updated selected folders map`, updated);
|
||||
return updated;
|
||||
});
|
||||
|
||||
// First, show the folders for better UX
|
||||
setShowFolders(true);
|
||||
|
||||
// CRITICAL FIX: Use the immediate mode of handleMailboxChange - no timeout needed
|
||||
logEmailOp('ACCOUNT-SELECT', `Triggering folder change to: ${inboxFolder} for account ${account.id}`);
|
||||
|
||||
// Use handleMailboxChange which properly passes the account ID with the folder
|
||||
handleMailboxChange(inboxFolder, account.id.toString());
|
||||
|
||||
// We'll let handleMailboxChange manage the loading state, don't reset it here
|
||||
};
|
||||
|
||||
const handleAddAccount = async (accountData: AccountData) => {
|
||||
// ... account creation logic ...
|
||||
// setAccounts(prev => [...prev, newAccount]);
|
||||
// setVisibleFolders(prev => ({
|
||||
// ...prev,
|
||||
// [newAccount.id]: newAccount.folders
|
||||
// }));
|
||||
// Update the accounts from state
|
||||
const setAccounts = (newAccounts: Account[]) => {
|
||||
// Dispatch action directly through our hook's returned state values
|
||||
const action = { type: 'SET_ACCOUNTS', payload: newAccounts };
|
||||
// We don't have direct access to dispatch, so we need a workaround
|
||||
// This is a temporary solution until we fully migrate to the reducer pattern
|
||||
try {
|
||||
// @ts-ignore - We're accessing internal functionality for transition purposes
|
||||
// This will be cleaned up in a future refactor when we fully migrate
|
||||
window.dispatchEmailAction?.(action);
|
||||
} catch (err) {
|
||||
console.error('Failed to update accounts through reducer:', err);
|
||||
// Fallback approach if needed
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user