From fe7cbf5ff49bea7638b915dc95ed70d85206b74e Mon Sep 17 00:00:00 2001 From: alma Date: Wed, 16 Apr 2025 13:43:43 +0200 Subject: [PATCH] mail page ui correction maj compose 20 --- app/mail/page.tsx | 112 +++++++++++++++++++++++----------------------- 1 file changed, 57 insertions(+), 55 deletions(-) diff --git a/app/mail/page.tsx b/app/mail/page.tsx index e766da1..c92756b 100644 --- a/app/mail/page.tsx +++ b/app/mail/page.tsx @@ -39,14 +39,17 @@ interface Email { id: number; accountId: number; from: string; - fromName: string; + fromName?: string; to: string; subject: string; body: string; date: string; read: boolean; starred: boolean; - category: string; + deleted: boolean; + category?: string; + cc?: string; + bcc?: string; } interface Attachment { @@ -463,7 +466,7 @@ export default function MailPage() { const [attachments, setAttachments] = useState([]); const [folders, setFolders] = useState([]); - // Filter emails based on current view and selected account + // Update the filteredEmails logic const filteredEmails = useMemo(() => { return emails.filter(email => { // First filter by account if one is selected @@ -474,16 +477,15 @@ export default function MailPage() { // Then filter by current view switch (currentView) { case 'inbox': - return !email.deleted && email.category === 'inbox'; + return !email.deleted && !email.category?.includes('sent'); case 'starred': - return !email.deleted && email.starred; + return !email.deleted && email.starred === true; case 'sent': - return !email.deleted && email.category === 'sent'; + return !email.deleted && email.category?.includes('sent'); case 'trash': - return email.deleted; + return email.deleted === true; default: - // Handle folder views - return !email.deleted && email.category === currentView; + return false; } }); }, [emails, currentView, selectedAccount]); @@ -522,55 +524,33 @@ export default function MailPage() { checkCredentials(); }, [router]); - // Fetch emails from IMAP API - const loadEmails = async (view?: string, accountId?: number, folder?: string) => { + // Update the loadEmails function to properly set email properties + const loadEmails = async () => { try { - console.log('Loading emails...', { view, accountId, folder }); setLoading(true); setError(null); - let url = '/api/mail'; - const params = new URLSearchParams(); - - if (view) params.append('view', view); - if (accountId) params.append('accountId', accountId.toString()); - if (folder) params.append('folder', folder); - - if (params.toString()) { - url += `?${params.toString()}`; - } - - const response = await fetch(url); - + const response = await fetch('/api/mail'); if (!response.ok) { - const errorData = await response.json(); - if (errorData.error === 'No stored credentials found') { - router.push('/mail/login'); - return; - } - throw new Error(errorData.error || 'Failed to load emails'); + throw new Error('Failed to load emails'); } const data = await response.json(); - // Update accounts and folders if provided in the response - if (data.accounts) { - setAccounts([ - { id: 0, name: 'All', email: '', color: 'bg-gray-500' }, - ...data.accounts - ]); - } - - if (data.folders) { - setFolders(data.folders); - } - - // Process the emails array from data.emails - const processedEmails = data.emails.map((email: Email) => ({ + // Process the emails array with proper properties + const processedEmails = data.emails.map((email: any) => ({ ...email, - date: new Date(email.date), - read: email.read || false, - starred: email.starred || false, + id: email.id, + accountId: email.accountId, + from: email.from, + fromName: email.fromName || email.from.split('@')[0], + to: email.to, + subject: email.subject, + body: decodeMimeContent(email.body), + date: new Date(email.date).toISOString(), + read: Boolean(email.read), + starred: Boolean(email.starred), + deleted: Boolean(email.deleted), category: email.category || 'inbox' })); @@ -585,8 +565,8 @@ export default function MailPage() { // Update useEffect to load emails when view changes useEffect(() => { - loadEmails(currentView, selectedAccount?.id); - }, [currentView, selectedAccount]); + loadEmails(); + }, [currentView]); // Format date for display const formatDate = (dateString: string) => { @@ -638,20 +618,30 @@ export default function MailPage() { } }; + // Update the toggleStarred function to properly handle starring const toggleStarred = async (emailId: number, e: React.MouseEvent) => { e.stopPropagation(); try { - await fetch('/api/mail/toggle-star', { + // Optimistically update the UI + setEmails(emails.map(email => + email.id === emailId ? { ...email, starred: !email.starred } : email + )); + + // Send request to server + const response = await fetch('/api/mail/toggle-star', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ emailId }) }); - const updatedEmails = emails.map(email => - email.id === emailId ? { ...email, starred: !email.starred } : email - ); - setEmails(updatedEmails); + if (!response.ok) { + // Revert the change if the server request fails + setEmails(emails.map(email => + email.id === emailId ? { ...email, starred: !email.starred } : email + )); + throw new Error('Failed to toggle star'); + } } catch (error) { console.error('Error toggling star:', error); } @@ -891,6 +881,18 @@ export default function MailPage() { } }; + // Add debug logging to help track the filtering + useEffect(() => { + console.log('Current view:', currentView); + console.log('Total emails:', emails.length); + console.log('Filtered emails:', filteredEmails.length); + console.log('Filter criteria:', { + starred: filteredEmails.filter(e => e.starred).length, + sent: filteredEmails.filter(e => e.category?.includes('sent')).length, + deleted: filteredEmails.filter(e => e.deleted).length + }); + }, [currentView, emails, filteredEmails]); + if (error) { return (