mail page ui correction maj compose 3

This commit is contained in:
alma 2025-04-16 12:01:15 +02:00
parent 6d97a4ee34
commit 935b92989c

View File

@ -404,10 +404,16 @@ const decodeEmailContent = (content: string, charset: string = 'utf-8') => {
return convertCharset(content, charset);
};
// Add this with your other functions
const getSelectedEmail = () => {
return emails.find(email => email.id === selectedEmail?.id);
};
function cleanEmailContent(content: string): string {
// Remove or fix malformed URLs
return content.replace(/=3D"(http[^"]+)"/g, (match, url) => {
try {
return `"${decodeURIComponent(url)}"`;
} catch {
return '';
}
});
}
export default function MailPage() {
const router = useRouter();
@ -420,7 +426,7 @@ export default function MailPage() {
const [currentView, setCurrentView] = useState('inbox');
const [showCompose, setShowCompose] = useState(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const [selectedEmails, setSelectedEmails] = useState<number[]>([]);
const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
const [showBulkActions, setShowBulkActions] = useState(false);
const [showBcc, setShowBcc] = useState(false);
const [emails, setEmails] = useState<Email[]>([]);
@ -446,6 +452,11 @@ export default function MailPage() {
const [showCc, setShowCc] = useState(false);
const [contentLoading, setContentLoading] = useState(false);
// Move getSelectedEmail inside the component
const getSelectedEmail = () => {
return emails.find(email => email.id === selectedEmail?.id);
};
// Check for stored credentials
useEffect(() => {
const checkCredentials = async () => {
@ -558,7 +569,7 @@ export default function MailPage() {
return account ? account.color : 'bg-gray-500';
};
// Add email action handlers
// Update handleEmailSelect to set selectedEmail correctly
const handleEmailSelect = (emailId: number) => {
const email = emails.find(e => e.id === emailId);
if (email) {
@ -584,9 +595,9 @@ export default function MailPage() {
const handleEmailCheckbox = (e: React.ChangeEvent<HTMLInputElement>, emailId: number) => {
e.stopPropagation();
if (e.target.checked) {
setSelectedEmails([...selectedEmails, emailId]);
setSelectedEmails([...selectedEmails, emailId.toString()]);
} else {
setSelectedEmails(selectedEmails.filter(id => id !== emailId));
setSelectedEmails(selectedEmails.filter(id => id !== emailId.toString()));
}
};
@ -609,6 +620,7 @@ export default function MailPage() {
}
};
// Handle reply
const handleReply = async (type: 'reply' | 'replyAll' | 'forward') => {
const selectedEmailData = getSelectedEmail();
if (!selectedEmailData) return;
@ -617,25 +629,24 @@ export default function MailPage() {
const subject = `${type === 'forward' ? 'Fwd: ' : 'Re: '}${selectedEmailData.subject}`;
let to = '';
let content = '';
const decodedBody = decodeMimeContent(selectedEmailData.body);
switch (type) {
case 'reply':
to = selectedEmailData.from;
content = `\n\nOn ${new Date(selectedEmailData.date).toLocaleString()}, ${selectedEmailData.fromName} wrote:\n> ${decodedBody.split('\n').join('\n> ')}`;
content = `\n\nOn ${new Date(selectedEmailData.date).toLocaleString()}, ${selectedEmailData.fromName} wrote:\n> ${selectedEmailData.body.split('\n').join('\n> ')}`;
break;
case 'replyAll':
to = selectedEmailData.from;
content = `\n\nOn ${new Date(selectedEmailData.date).toLocaleString()}, ${selectedEmailData.fromName} wrote:\n> ${decodedBody.split('\n').join('\n> ')}`;
content = `\n\nOn ${new Date(selectedEmailData.date).toLocaleString()}, ${selectedEmailData.fromName} wrote:\n> ${selectedEmailData.body.split('\n').join('\n> ')}`;
break;
case 'forward':
content = `\n\n---------- Forwarded message ----------\nFrom: ${selectedEmailData.fromName} <${selectedEmailData.from}>\nDate: ${new Date(selectedEmailData.date).toLocaleString()}\nSubject: ${selectedEmailData.subject}\n\n${decodedBody}`;
content = `\n\n---------- Forwarded message ----------\nFrom: ${selectedEmailData.fromName} <${selectedEmailData.from}>\nDate: ${new Date(selectedEmailData.date).toLocaleString()}\nSubject: ${selectedEmailData.subject}\n\n${selectedEmailData.body}`;
break;
}
setComposeSubject(subject);
setComposeTo(to);
setComposeBody(content);
setComposeBody(cleanEmailContent(content));
};
const handleBulkDelete = () => {
@ -651,7 +662,7 @@ export default function MailPage() {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ emailIds: selectedEmails })
});
setEmails(emails.filter(email => !selectedEmails.includes(email.id)));
setEmails(emails.filter(email => !selectedEmails.includes(email.id.toString())));
setSelectedEmails([]);
setShowBulkActions(false);
}
@ -675,7 +686,7 @@ export default function MailPage() {
setSelectedEmails([]);
setShowBulkActions(false);
} else {
const allEmailIds = filteredEmails.map(email => email.id);
const allEmailIds = filteredEmails.map(email => email.id.toString());
setSelectedEmails(allEmailIds);
setShowBulkActions(true);
}
@ -910,13 +921,13 @@ export default function MailPage() {
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Checkbox
checked={selectedEmails.includes(email.id)}
checked={selectedEmails.includes(email.id.toString())}
onClick={(e) => e.stopPropagation()}
onCheckedChange={(checked) => {
if (checked) {
setSelectedEmails([...selectedEmails, email.id]);
setSelectedEmails([...selectedEmails, email.id.toString()]);
} else {
setSelectedEmails(selectedEmails.filter(id => id !== email.id));
setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
}
}}
/>