From 7d3ab924fba1235aef2c5bd5c70576e01b0fa893 Mon Sep 17 00:00:00 2001 From: alma Date: Wed, 16 Apr 2025 13:56:04 +0200 Subject: [PATCH] mail page ui correction maj compose 20 bis 2 --- app/mail/page.tsx | 172 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 128 insertions(+), 44 deletions(-) diff --git a/app/mail/page.tsx b/app/mail/page.tsx index 5600b63..ce4629f 100644 --- a/app/mail/page.tsx +++ b/app/mail/page.tsx @@ -44,10 +44,10 @@ interface Email { subject: string; body: string; date: string; - read: boolean; - starred: boolean; - deleted: boolean; - category?: string; + read?: boolean; + starred?: boolean; + deleted?: boolean; + category?: 'inbox' | 'sent' | 'trash'; cc?: string; bcc?: string; } @@ -466,22 +466,69 @@ export default function MailPage() { const [attachments, setAttachments] = useState([]); const [folders, setFolders] = useState([]); - // Update the filteredEmails logic to match how Inbox works - const filteredEmails = useMemo(() => { - if (!emails) return []; + // Add this logging to see what data we're working with + useEffect(() => { + console.log('All emails:', emails); + console.log('Current view:', currentView); + console.log('Selected account:', selectedAccount); + }, [emails, currentView, selectedAccount]); - switch (currentView) { - case 'inbox': - return emails; // This is working, so let's use similar logic for others - case 'starred': - return emails.filter(email => email.starred); - case 'sent': - return emails.filter(email => email.from === selectedAccount?.email); - case 'trash': - return emails.filter(email => email.deleted); - default: - return emails; - } + // Update the filteredEmails logic + const filteredEmails = useMemo(() => { + console.log('Current view:', currentView); + console.log('Total emails:', emails.length); + + // Initialize counters for debugging + let starredCount = 0; + let sentCount = 0; + let deletedCount = 0; + + const filtered = emails.filter(email => { + // Log each email for debugging + console.log('Processing email:', { + id: email.id, + category: email.category, + from: email.from, + starred: email.starred, + deleted: email.deleted + }); + + switch (currentView) { + case 'inbox': + return true; // Show all emails in inbox since it's working + + case 'starred': + if (email.starred) starredCount++; + // Consider an email starred if it has the starred property set to true + return Boolean(email.starred); + + case 'sent': + // Check if the email is from the current account + const isSent = selectedAccount && email.from.includes(selectedAccount.email); + if (isSent) sentCount++; + return isSent; + + case 'trash': + if (email.deleted) deletedCount++; + // Consider an email deleted if it has the deleted property set to true + return Boolean(email.deleted); + + default: + return true; + } + }); + + // Log the results for debugging + console.log('Filter results:', { + view: currentView, + total: emails.length, + filtered: filtered.length, + starredCount, + sentCount, + deletedCount + }); + + return filtered; }, [emails, currentView, selectedAccount]); // Move getSelectedEmail inside the component @@ -518,7 +565,7 @@ export default function MailPage() { checkCredentials(); }, [router]); - // Update the loadEmails function to properly set email properties + // Update the loadEmails function to ensure we set default values const loadEmails = async () => { try { setLoading(true); @@ -530,24 +577,20 @@ export default function MailPage() { } const data = await response.json(); + console.log('Raw email data:', data); - // Process the emails array with proper properties + // Process the emails and ensure default values are set const processedEmails = data.emails.map((email: any) => ({ ...email, - 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' + id: Number(email.id), + // Set default values for optional properties + starred: email.starred || false, + deleted: email.deleted || false, + category: email.category || 'inbox', + read: email.read || false })); + console.log('Processed emails:', processedEmails); setEmails(processedEmails); } catch (err) { console.error('Error loading emails:', err); @@ -612,17 +655,20 @@ export default function MailPage() { } }; - // Update the toggleStarred function to properly handle starring + // Update the toggleStarred function const toggleStarred = async (emailId: number, e: React.MouseEvent) => { e.stopPropagation(); - try { - // Optimistically update the UI - setEmails(emails.map(email => - email.id === emailId ? { ...email, starred: !email.starred } : email - )); + // Update the email in state + setEmails(prevEmails => + prevEmails.map(email => + email.id === emailId + ? { ...email, starred: !email.starred } + : email + ) + ); - // Send request to server + try { const response = await fetch('/api/mail/toggle-star', { method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -630,14 +676,18 @@ export default function MailPage() { }); 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); + // Revert the change if the server request fails + setEmails(prevEmails => + prevEmails.map(email => + email.id === emailId + ? { ...email, starred: !email.starred } + : email + ) + ); } }; @@ -887,6 +937,40 @@ export default function MailPage() { }); }, [currentView, emails, filteredEmails]); + // Add a function to move to trash + const moveToTrash = async (emailId: number) => { + // Update the email in state + setEmails(prevEmails => + prevEmails.map(email => + email.id === emailId + ? { ...email, deleted: true, category: 'trash' } + : email + ) + ); + + try { + const response = await fetch('/api/mail/move-to-trash', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ emailId }) + }); + + if (!response.ok) { + throw new Error('Failed to move to trash'); + } + } catch (error) { + console.error('Error moving to trash:', error); + // Revert the change if the server request fails + setEmails(prevEmails => + prevEmails.map(email => + email.id === emailId + ? { ...email, deleted: false, category: 'inbox' } + : email + ) + ); + } + }; + if (error) { return (