mail page ui correction maj compose 3
This commit is contained in:
parent
6d97a4ee34
commit
935b92989c
@ -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()));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user