mail page imap connection mime 5 bis rest 5
This commit is contained in:
parent
8c42df9d6f
commit
22dc2a74d8
@ -448,7 +448,7 @@ export default function MailPage() {
|
|||||||
console.log('Processed email data:', emailData); // Debug processed data
|
console.log('Processed email data:', emailData); // Debug processed data
|
||||||
|
|
||||||
// Ensure all dates are Date objects
|
// Ensure all dates are Date objects
|
||||||
const processedEmails = emailData.map(email => ({
|
const processedEmails = emailData.map((email: Email) => ({
|
||||||
...email,
|
...email,
|
||||||
date: email.date ? new Date(email.date) : new Date(),
|
date: email.date ? new Date(email.date) : new Date(),
|
||||||
read: email.read || false,
|
read: email.read || false,
|
||||||
@ -629,6 +629,35 @@ export default function MailPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Handle reply
|
||||||
|
const handleReply = async (type: 'reply' | 'replyAll' | 'forward') => {
|
||||||
|
const selectedEmailData = getSelectedEmail();
|
||||||
|
if (!selectedEmailData) return;
|
||||||
|
|
||||||
|
setComposeOpen(true);
|
||||||
|
const subject = `${type === 'forward' ? 'Fwd: ' : 'Re: '}${selectedEmailData.subject}`;
|
||||||
|
let to = '';
|
||||||
|
let content = '';
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case 'reply':
|
||||||
|
to = selectedEmailData.from;
|
||||||
|
content = `\n\nOn ${new Date(selectedEmailData.date).toLocaleString()}, ${selectedEmailData.fromName} wrote:\n> ${selectedEmailData.body.split('\n').join('\n> ')}`;
|
||||||
|
break;
|
||||||
|
case 'replyAll':
|
||||||
|
to = selectedEmailData.from; // You would also need to add CC recipients here
|
||||||
|
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${selectedEmailData.body}`;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
setComposeSubject(subject);
|
||||||
|
setComposeRecipient(to);
|
||||||
|
setComposeContent(content);
|
||||||
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
|
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
|
||||||
@ -996,6 +1025,98 @@ export default function MailPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Email preview panel */}
|
||||||
|
<div className="flex-1 bg-white/95 backdrop-blur-sm overflow-y-auto">
|
||||||
|
{selectedEmail ? (
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-900">{selectedEmail.subject}</h2>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-400 hover:text-gray-900"
|
||||||
|
onClick={() => handleReply('reply')}
|
||||||
|
>
|
||||||
|
<Reply className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-400 hover:text-gray-900"
|
||||||
|
onClick={() => handleReply('replyAll')}
|
||||||
|
>
|
||||||
|
<ReplyAll className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-400 hover:text-gray-900"
|
||||||
|
onClick={() => handleReply('forward')}
|
||||||
|
>
|
||||||
|
<Forward className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-400 hover:text-gray-900"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
toggleStarred(selectedEmail.id, e);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{selectedEmail.starred ? (
|
||||||
|
<Star className="h-5 w-5 text-yellow-400" />
|
||||||
|
) : (
|
||||||
|
<Star className="h-5 w-5" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-400 hover:text-gray-900"
|
||||||
|
onClick={() => {
|
||||||
|
setDeleteType('email');
|
||||||
|
setItemToDelete(parseInt(selectedEmail.id));
|
||||||
|
setShowDeleteConfirm(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 mb-6">
|
||||||
|
<Avatar className="h-10 w-10">
|
||||||
|
<AvatarFallback>
|
||||||
|
{selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">
|
||||||
|
{selectedEmail.fromName || selectedEmail.from}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
to {selectedEmail.to}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="ml-auto text-sm text-gray-500">
|
||||||
|
{formatDate(selectedEmail.date.toISOString())}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="prose max-w-none">
|
||||||
|
{selectedEmail.body}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center h-full">
|
||||||
|
<Mail className="h-12 w-12 text-gray-400 mb-4" />
|
||||||
|
<p className="text-gray-500">Select an email to view its contents</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user