2403 lines
86 KiB
TypeScript
2403 lines
86 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import {
|
|
Mail, Search, Plus as PlusIcon, Trash, Check, Forward, FolderOpen,
|
|
MessageSquare, Copy, AlertOctagon, MoreHorizontal, ChevronDown,
|
|
ChevronUp, X, RefreshCw, Inbox, Send, Archive, Star, Settings,
|
|
Menu, Plus, Loader2, MailX, UserPlus, CheckCircle2, XCircle, Filter,
|
|
Reply, ReplyAll, AlertCircle, Folder, Eye, ChevronLeft, ChevronRight,
|
|
Paperclip, Trash2, CornerUpRight, Edit, MoreVertical, EyeOff, FileDown,
|
|
FilePlus, Ban, MailOpen
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
|
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from '@/components/ui/dialog';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import {
|
|
Command,
|
|
CommandDialog,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
CommandSeparator,
|
|
CommandShortcut,
|
|
} from '@/components/ui/command';
|
|
import { useSession } from 'next-auth/react';
|
|
import DOMPurify from 'isomorphic-dompurify';
|
|
import ComposeEmail from '@/components/email/ComposeEmail';
|
|
import { decodeEmail, cleanHtml } from '@/lib/mail-parser-wrapper';
|
|
import { Attachment as MailParserAttachment } from 'mailparser';
|
|
import { LoadingFix } from './loading-fix';
|
|
|
|
// Import centralized email formatters
|
|
import {
|
|
formatForwardedEmail,
|
|
formatReplyEmail,
|
|
formatEmailForReplyOrForward,
|
|
EmailMessage as FormatterEmailMessage,
|
|
cleanHtmlContent
|
|
} from '@/lib/utils/email-formatter';
|
|
|
|
export interface Account {
|
|
id: number;
|
|
name: string;
|
|
email: string;
|
|
color: string;
|
|
folders?: string[];
|
|
}
|
|
|
|
export interface Email {
|
|
id: string;
|
|
from: string;
|
|
fromName?: string;
|
|
to: string;
|
|
subject: string;
|
|
content: string;
|
|
preview?: string; // Preview content for list view
|
|
body?: string; // For backward compatibility
|
|
date: string;
|
|
read: boolean;
|
|
starred: boolean;
|
|
attachments?: { name: string; url: string }[];
|
|
folder: string;
|
|
cc?: string;
|
|
bcc?: string;
|
|
contentFetched?: boolean; // Track if full content has been fetched
|
|
}
|
|
|
|
interface Attachment {
|
|
name: string;
|
|
type: string;
|
|
content: string;
|
|
encoding: string;
|
|
}
|
|
|
|
interface ParsedEmailContent {
|
|
headers: string;
|
|
body: string;
|
|
html?: string;
|
|
text?: string;
|
|
attachments?: Array<{
|
|
filename: string;
|
|
content: string;
|
|
contentType: string;
|
|
}>;
|
|
}
|
|
|
|
interface ParsedEmailMetadata {
|
|
subject: string;
|
|
from: string;
|
|
to: string;
|
|
date: string;
|
|
contentType: string;
|
|
text: string | null;
|
|
html: string | null;
|
|
raw: {
|
|
headers: string;
|
|
body: string;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* @deprecated This function is deprecated and will be removed in future versions.
|
|
* Email parsing has been centralized in lib/mail-parser-wrapper.ts and the API endpoint.
|
|
*/
|
|
function splitEmailHeadersAndBody(emailBody: string): { headers: string; body: string } {
|
|
const [headers, ...bodyParts] = emailBody.split('\r\n\r\n');
|
|
return {
|
|
headers: headers || '',
|
|
body: bodyParts.join('\r\n\r\n')
|
|
};
|
|
}
|
|
|
|
function EmailContent({ email }: { email: Email }) {
|
|
const [content, setContent] = useState<React.ReactNode>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [debugInfo, setDebugInfo] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
|
|
async function loadContent() {
|
|
if (!email) return;
|
|
|
|
setIsLoading(true);
|
|
setDebugInfo(null);
|
|
try {
|
|
console.log('Loading content for email:', email.id);
|
|
|
|
// Check if we need to fetch full content
|
|
if (!email.content || email.content.length === 0) {
|
|
console.log('Fetching full content for email:', email.id);
|
|
|
|
const response = await fetch(`/api/courrier/${email.id}?folder=${encodeURIComponent(email.folder || 'INBOX')}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch email content: ${response.status}`);
|
|
}
|
|
|
|
const fullContent = await response.json();
|
|
|
|
if (mounted) {
|
|
// Update the email content with the fetched full content
|
|
email.content = fullContent.content;
|
|
|
|
// Render the content
|
|
const sanitizedHtml = DOMPurify.sanitize(fullContent.content);
|
|
setContent(
|
|
<div
|
|
className="email-content prose prose-sm max-w-none dark:prose-invert"
|
|
dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
|
|
/>
|
|
);
|
|
setDebugInfo('Rendered fetched HTML content');
|
|
setError(null);
|
|
setIsLoading(false);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Use existing content if available
|
|
console.log('Using existing content for email');
|
|
|
|
const formattedEmail = email.content.trim();
|
|
if (!formattedEmail) {
|
|
console.log('Empty content for email:', email.id);
|
|
if (mounted) {
|
|
setContent(<div className="text-gray-500">Email content is empty</div>);
|
|
setDebugInfo('Email content is empty string');
|
|
setIsLoading(false);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Check if content is already HTML
|
|
if (formattedEmail.startsWith('<') && formattedEmail.endsWith('>')) {
|
|
// Content is likely HTML, sanitize and display directly
|
|
const sanitizedHtml = DOMPurify.sanitize(formattedEmail);
|
|
setContent(
|
|
<div
|
|
className="email-content prose prose-sm max-w-none dark:prose-invert"
|
|
dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
|
|
/>
|
|
);
|
|
setDebugInfo('Rendered existing HTML content');
|
|
} else {
|
|
// Use mailparser for more complex formats
|
|
console.log('Parsing email content');
|
|
const parsedEmail = await decodeEmail(formattedEmail);
|
|
|
|
if (parsedEmail.html) {
|
|
const sanitizedHtml = DOMPurify.sanitize(parsedEmail.html);
|
|
setContent(
|
|
<div
|
|
className="email-content prose prose-sm max-w-none dark:prose-invert"
|
|
dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
|
|
/>
|
|
);
|
|
setDebugInfo('Rendered HTML content from parser');
|
|
} else if (parsedEmail.text) {
|
|
setContent(
|
|
<div className="email-content whitespace-pre-wrap">
|
|
{parsedEmail.text}
|
|
</div>
|
|
);
|
|
setDebugInfo('Rendered text content from parser');
|
|
} else {
|
|
setContent(<div className="text-gray-500">No displayable content available</div>);
|
|
setDebugInfo('No HTML or text content in parsed email');
|
|
}
|
|
}
|
|
|
|
setError(null);
|
|
} catch (err) {
|
|
console.error('Error rendering email content:', err);
|
|
if (mounted) {
|
|
setError('Error rendering email content. Please try again.');
|
|
setDebugInfo(err instanceof Error ? err.message : 'Unknown error');
|
|
setContent(null);
|
|
}
|
|
} finally {
|
|
if (mounted) {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
loadContent();
|
|
|
|
return () => {
|
|
mounted = false;
|
|
};
|
|
}, [email?.id, email?.content, email?.folder]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-8">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
|
<span className="ml-3 text-gray-500">Loading email content...</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="text-red-500 p-4">
|
|
<div>{error}</div>
|
|
{debugInfo && (
|
|
<div className="mt-2 text-xs text-gray-500">
|
|
Debug info: {debugInfo}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{content || <div className="text-gray-500">No content available</div>}
|
|
{debugInfo && process.env.NODE_ENV !== 'production' && (
|
|
<div className="mt-4 p-2 border border-gray-200 rounded text-xs text-gray-500">
|
|
Debug: {debugInfo}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function renderEmailContent(email: Email) {
|
|
return <EmailContent email={email} />;
|
|
}
|
|
|
|
function renderAttachments(attachments: MailParserAttachment[]) {
|
|
if (!attachments.length) return null;
|
|
|
|
return (
|
|
<div className="mt-4 border-t border-gray-200 pt-4">
|
|
<h3 className="text-sm font-medium text-gray-900 mb-2">Attachments</h3>
|
|
<div className="space-y-2">
|
|
{attachments.map((attachment, index) => (
|
|
<div key={index} className="flex items-center gap-2 p-2 bg-gray-50 rounded">
|
|
<Paperclip className="h-4 w-4 text-gray-400" />
|
|
<span className="text-sm text-gray-600">{attachment.filename || 'unnamed_attachment'}</span>
|
|
<span className="text-xs text-gray-400">
|
|
{attachment.size ? `(${Math.round(attachment.size / 1024)} KB)` : ''}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Define the exact folder names from IMAP
|
|
type MailFolder = string;
|
|
|
|
// Map IMAP folders to sidebar items with icons
|
|
const getFolderIcon = (folder: string) => {
|
|
switch (folder.toLowerCase()) {
|
|
case 'inbox':
|
|
return Inbox;
|
|
case 'sent':
|
|
return Send;
|
|
case 'drafts':
|
|
return Reply;
|
|
case 'trash':
|
|
return Trash;
|
|
case 'spam':
|
|
return AlertCircle;
|
|
case 'archive':
|
|
case 'archives':
|
|
return Archive;
|
|
default:
|
|
return Folder;
|
|
}
|
|
};
|
|
|
|
// Update the initialSidebarItems to be empty since we're using folders under Accounts now
|
|
const initialSidebarItems: any[] = []; // Remove the default Inbox item
|
|
|
|
function formatDate(date: Date | null): string {
|
|
if (!date) return '';
|
|
return new Intl.DateTimeFormat('fr-FR', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
}).format(date);
|
|
}
|
|
|
|
/**
|
|
* @deprecated This function is deprecated and will be removed in future versions.
|
|
* Use the ReplyContent component directly instead.
|
|
*/
|
|
function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'reply') {
|
|
console.warn('getReplyBody is deprecated, use <ReplyContent email={email} type={type} /> instead');
|
|
return <ReplyContent email={email} type={type} />;
|
|
}
|
|
|
|
function ReplyContent({ email, type }: { email: Email; type: 'reply' | 'reply-all' | 'forward' }) {
|
|
const [content, setContent] = useState<string>('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
|
|
async function loadReplyContent() {
|
|
try {
|
|
if (!email.content) {
|
|
if (mounted) setContent('');
|
|
return;
|
|
}
|
|
|
|
// Create a formatter-compatible email object
|
|
const emailForFormatter: FormatterEmailMessage = {
|
|
id: email.id,
|
|
subject: email.subject || '',
|
|
from: [{
|
|
name: email.fromName || email.from.split('@')[0] || '',
|
|
address: email.from
|
|
}],
|
|
to: [{
|
|
name: '',
|
|
address: email.to
|
|
}],
|
|
date: new Date(email.date),
|
|
content: email.content,
|
|
html: email.content,
|
|
text: ''
|
|
};
|
|
|
|
// Use centralized formatters
|
|
let formattedContent = '';
|
|
|
|
if (type === 'forward') {
|
|
const formatted = formatForwardedEmail(emailForFormatter);
|
|
formattedContent = formatted.content;
|
|
} else {
|
|
const formatted = formatReplyEmail(emailForFormatter, type as 'reply' | 'reply-all');
|
|
formattedContent = formatted.content;
|
|
}
|
|
|
|
if (mounted) {
|
|
setContent(formattedContent);
|
|
setError(null);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error generating reply body:', err);
|
|
if (mounted) {
|
|
setError('Error generating reply content. Please try again.');
|
|
setContent('');
|
|
}
|
|
}
|
|
}
|
|
|
|
loadReplyContent();
|
|
|
|
return () => {
|
|
mounted = false;
|
|
};
|
|
}, [email.content, type, email.id, email.subject, email.from, email.fromName, email.to, email.date]);
|
|
|
|
if (error) {
|
|
return <div className="text-red-500">{error}</div>;
|
|
}
|
|
|
|
return <div dangerouslySetInnerHTML={{ __html: content }} />;
|
|
}
|
|
|
|
function EmailPreview({ email }: { email: Email }) {
|
|
const [preview, setPreview] = useState<string>('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
|
|
async function loadPreview() {
|
|
if (!email) {
|
|
if (mounted) setPreview('No content available');
|
|
return;
|
|
}
|
|
|
|
// If email already has a preview, use it directly
|
|
if (email.preview) {
|
|
if (mounted) setPreview(email.preview);
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
// If we have the content already, extract preview from it
|
|
if (email.content) {
|
|
const plainText = email.content.replace(/<[^>]*>/g, ' ').trim();
|
|
if (mounted) {
|
|
setPreview(plainText.substring(0, 150) + '...');
|
|
}
|
|
} else {
|
|
// Fallback to using parser for older emails
|
|
const decoded = await decodeEmail(email.content || '');
|
|
if (mounted) {
|
|
if (decoded.text) {
|
|
setPreview(decoded.text.substring(0, 150) + '...');
|
|
} else if (decoded.html) {
|
|
const cleanText = decoded.html.replace(/<[^>]*>/g, ' ').trim();
|
|
setPreview(cleanText.substring(0, 150) + '...');
|
|
} else {
|
|
setPreview('No preview available');
|
|
}
|
|
}
|
|
}
|
|
|
|
if (mounted) {
|
|
setError(null);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error generating email preview:', err);
|
|
if (mounted) {
|
|
setError('Error generating preview');
|
|
setPreview('');
|
|
}
|
|
} finally {
|
|
if (mounted) setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
loadPreview();
|
|
|
|
return () => {
|
|
mounted = false;
|
|
};
|
|
}, [email]);
|
|
|
|
if (isLoading) {
|
|
return <span className="text-gray-400">Loading preview...</span>;
|
|
}
|
|
|
|
if (error) {
|
|
return <span className="text-red-500 text-xs">{error}</span>;
|
|
}
|
|
|
|
return <span className="text-xs text-gray-500 line-clamp-2">{preview}</span>;
|
|
}
|
|
|
|
/**
|
|
* @deprecated This function is deprecated and will be removed in future versions.
|
|
* Use the EmailPreview component directly instead.
|
|
*/
|
|
function generateEmailPreview(email: Email) {
|
|
console.warn('generateEmailPreview is deprecated, use <EmailPreview email={email} /> instead');
|
|
return <EmailPreview email={email} />;
|
|
}
|
|
|
|
export default function CourrierPage() {
|
|
const router = useRouter();
|
|
const { data: session } = useSession();
|
|
const [loading, setLoading] = useState(true);
|
|
const [accounts, setAccounts] = useState<Account[]>([
|
|
{ id: 0, name: 'All', email: '', color: 'bg-gray-400' },
|
|
{ id: 1, name: 'Mail Account', email: '', color: 'bg-blue-500' }
|
|
]);
|
|
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
|
|
const [currentView, setCurrentView] = useState<MailFolder>('INBOX');
|
|
const [showCompose, setShowCompose] = useState(false);
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
|
const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
|
|
const [showBulkActions, setShowBulkActions] = useState(false);
|
|
const [showBcc, setShowBcc] = useState(false);
|
|
const [emails, setEmails] = useState<Email[]>([]);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [composeSubject, setComposeSubject] = useState('');
|
|
const [composeTo, setComposeTo] = useState('');
|
|
const [composeCc, setComposeCc] = useState('');
|
|
const [composeBcc, setComposeBcc] = useState('');
|
|
const [composeBody, setComposeBody] = useState('');
|
|
const [selectedEmail, setSelectedEmail] = useState<Email | null>(null);
|
|
const [sidebarOpen, setSidebarOpen] = useState(true);
|
|
const [foldersOpen, setFoldersOpen] = useState(true);
|
|
const [showSettings, setShowSettings] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
|
const [composeOpen, setComposeOpen] = useState(false);
|
|
const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(true);
|
|
const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
|
|
const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
|
|
const [showEmailActions, setShowEmailActions] = useState(false);
|
|
const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email');
|
|
const [itemToDelete, setItemToDelete] = useState<number | null>(null);
|
|
const [showCc, setShowCc] = useState(false);
|
|
const [contentLoading, setContentLoading] = useState(false);
|
|
const [attachments, setAttachments] = useState<Attachment[]>([]);
|
|
const [folders, setFolders] = useState<string[]>([]);
|
|
const [unreadCount, setUnreadCount] = useState(0);
|
|
const [availableFolders, setAvailableFolders] = useState<string[]>([]);
|
|
const [sidebarItems, setSidebarItems] = useState(initialSidebarItems);
|
|
const [page, setPage] = useState(1);
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
|
const [isLoadingInitial, setIsLoadingInitial] = useState(true);
|
|
const [isLoadingSearch, setIsLoadingSearch] = useState(false);
|
|
const [isLoadingCompose, setIsLoadingCompose] = useState(false);
|
|
const [isLoadingReply, setIsLoadingReply] = useState(false);
|
|
const [isLoadingForward, setIsLoadingForward] = useState(false);
|
|
const [isLoadingDelete, setIsLoadingDelete] = useState(false);
|
|
const [isLoadingMove, setIsLoadingMove] = useState(false);
|
|
const [isLoadingStar, setIsLoadingStar] = useState(false);
|
|
const [isLoadingUnstar, setIsLoadingUnstar] = useState(false);
|
|
const [isLoadingMarkRead, setIsLoadingMarkRead] = useState(false);
|
|
const [isLoadingMarkUnread, setIsLoadingMarkUnread] = useState(false);
|
|
const [isLoadingRefresh, setIsLoadingRefresh] = useState(false);
|
|
const emailsPerPage = 20;
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
const [searchResults, setSearchResults] = useState<Email[]>([]);
|
|
const [showSearchResults, setShowSearchResults] = useState(false);
|
|
const [isComposing, setIsComposing] = useState(false);
|
|
const [composeEmail, setComposeEmail] = useState({
|
|
to: '',
|
|
subject: '',
|
|
body: '',
|
|
});
|
|
const [isSending, setIsSending] = useState(false);
|
|
const [isReplying, setIsReplying] = useState(false);
|
|
const [isForwarding, setIsForwarding] = useState(false);
|
|
const [replyToEmail, setReplyToEmail] = useState<Email | null>(null);
|
|
const [forwardEmail, setForwardEmail] = useState<Email | null>(null);
|
|
const [replyBody, setReplyBody] = useState('');
|
|
const [forwardBody, setForwardBody] = useState('');
|
|
const [replyAttachments, setReplyAttachments] = useState<File[]>([]);
|
|
const [forwardAttachments, setForwardAttachments] = useState<File[]>([]);
|
|
const [isSendingReply, setIsSendingReply] = useState(false);
|
|
const [isSendingForward, setIsSendingForward] = useState(false);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
const [isMoving, setIsMoving] = useState(false);
|
|
const [isStarring, setIsStarring] = useState(false);
|
|
const [isUnstarring, setIsUnstarring] = useState(false);
|
|
const [isMarkingRead, setIsMarkingRead] = useState(false);
|
|
const [isMarkingUnread, setIsMarkingUnread] = useState(false);
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const composeBodyRef = useRef<HTMLDivElement>(null);
|
|
const [originalEmail, setOriginalEmail] = useState<{
|
|
content: string;
|
|
type: 'reply' | 'reply-all' | 'forward';
|
|
} | null>(null);
|
|
|
|
// Debug logging for email distribution
|
|
useEffect(() => {
|
|
const emailsByFolder = emails.reduce((acc, email) => {
|
|
acc[email.folder] = (acc[email.folder] || 0) + 1;
|
|
return acc;
|
|
}, {} as Record<string, number>);
|
|
|
|
console.log('Emails by folder:', emailsByFolder);
|
|
console.log('Current view:', currentView);
|
|
}, [emails, currentView]);
|
|
|
|
// Move getSelectedEmail inside the component
|
|
const getSelectedEmail = () => {
|
|
return emails.find(email => email.id === selectedEmail?.id);
|
|
};
|
|
|
|
// Add an effect to detect and fix stuck loading states
|
|
useEffect(() => {
|
|
let timeoutId: NodeJS.Timeout | null = null;
|
|
|
|
// If we have emails but loading state is still true after emails load, it's likely stuck
|
|
if (emails.length > 0 && (loading || isLoadingInitial)) {
|
|
console.log('[DEBUG] Detected potential stuck loading state, setting recovery timeout');
|
|
|
|
// Set a timeout to automatically reset the loading state
|
|
timeoutId = setTimeout(() => {
|
|
// Double check if still stuck
|
|
if (emails.length > 0 && (loading || isLoadingInitial)) {
|
|
console.log('[DEBUG] Confirmed stuck loading state, auto-resetting');
|
|
setLoading(false);
|
|
setIsLoadingInitial(false);
|
|
}
|
|
}, 3000); // 3 second timeout
|
|
}
|
|
|
|
// Cleanup
|
|
return () => {
|
|
if (timeoutId) {
|
|
clearTimeout(timeoutId);
|
|
}
|
|
};
|
|
}, [emails.length, loading, isLoadingInitial]);
|
|
|
|
// Single initialization effect that loads emails correctly on first page load
|
|
useEffect(() => {
|
|
const loadInitialData = async () => {
|
|
try {
|
|
console.log('[DEBUG] Starting initial email data loading...');
|
|
setLoading(true);
|
|
setIsLoadingInitial(true);
|
|
|
|
// Check credentials first
|
|
console.log('[DEBUG] Checking credentials...');
|
|
const credResponse = await fetch('/api/courrier');
|
|
if (!credResponse.ok) {
|
|
const errorData = await credResponse.json();
|
|
if (errorData.error === 'No stored credentials found') {
|
|
console.log('[DEBUG] No credentials found, redirecting to login');
|
|
router.push('/courrier/login');
|
|
return;
|
|
}
|
|
throw new Error(errorData.error || 'Failed to check credentials');
|
|
}
|
|
|
|
try {
|
|
// Try to get user email from credentials
|
|
const credsData = await credResponse.json();
|
|
console.log('[DEBUG] Credentials response:', {
|
|
hasEmail: !!credsData.email,
|
|
status: credResponse.status
|
|
});
|
|
|
|
if (credsData.email) {
|
|
console.log('[DEBUG] Got email from credentials:', credsData.email);
|
|
setAccounts(prev => prev.map(account =>
|
|
account.id === 1
|
|
? {
|
|
...account,
|
|
name: credsData.email,
|
|
email: credsData.email
|
|
}
|
|
: account
|
|
));
|
|
}
|
|
} catch (error) {
|
|
console.warn('[DEBUG] Error getting email from credentials:', error);
|
|
}
|
|
|
|
// First do a quick request just for folders
|
|
try {
|
|
console.log('[DEBUG] Preloading folders...');
|
|
const folderResponse = await fetch('/api/courrier?folder=INBOX&page=1&limit=1');
|
|
if (folderResponse.ok) {
|
|
const folderData = await folderResponse.json();
|
|
console.log('[DEBUG] Folder data:', {
|
|
folders: folderData.folders?.length || 0,
|
|
emails: folderData.emails?.length || 0
|
|
});
|
|
|
|
if (folderData.folders && folderData.folders.length > 0) {
|
|
setAvailableFolders(folderData.folders);
|
|
setAccounts(prev => prev.map(account =>
|
|
account.id === 1
|
|
? { ...account, folders: folderData.folders }
|
|
: account
|
|
));
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.warn('[DEBUG] Error preloading folders:', error);
|
|
}
|
|
|
|
// Then load emails (forced fetch with timestamp)
|
|
console.log('[DEBUG] Fetching emails...');
|
|
const timestamp = Date.now();
|
|
const emailResponse = await fetch(
|
|
`/api/courrier?folder=${encodeURIComponent(currentView)}&page=${page}&limit=${emailsPerPage}&_t=${timestamp}`,
|
|
{ cache: 'no-store' }
|
|
);
|
|
|
|
if (!emailResponse.ok) {
|
|
throw new Error('Failed to load emails');
|
|
}
|
|
|
|
const data = await emailResponse.json();
|
|
console.log(`[DEBUG] Loaded ${data.emails?.length || 0} emails, response status: ${emailResponse.status}`);
|
|
|
|
// Set available folders if present
|
|
if (data.folders) {
|
|
console.log('[DEBUG] Setting folders from initialization:', data.folders.length);
|
|
setAvailableFolders(data.folders);
|
|
|
|
// Update the mail account with folders
|
|
setAccounts(prev => {
|
|
console.log('[DEBUG] Updating accounts with folders');
|
|
return prev.map(account =>
|
|
account.id === 1
|
|
? { ...account, folders: data.folders }
|
|
: account
|
|
);
|
|
});
|
|
} else {
|
|
console.warn('[DEBUG] No folders returned from API during initialization');
|
|
}
|
|
|
|
// Process emails and sort by date
|
|
console.log('[DEBUG] Processing emails...');
|
|
const processedEmails = (data.emails || [])
|
|
.map((email: any) => {
|
|
// Add proper handling for from field which might be an array or object
|
|
let fromText = '';
|
|
let fromName = '';
|
|
let toText = '';
|
|
let ccText = '';
|
|
let bccText = '';
|
|
|
|
// Handle 'from' field
|
|
if (email.from) {
|
|
if (Array.isArray(email.from)) {
|
|
if (email.from.length > 0) {
|
|
if (typeof email.from[0] === 'object') {
|
|
fromText = email.from[0].address || '';
|
|
fromName = email.from[0].name || email.from[0].address?.split('@')[0] || '';
|
|
} else {
|
|
fromText = email.from[0] || '';
|
|
fromName = fromText.split('@')[0] || '';
|
|
}
|
|
}
|
|
}
|
|
else if (typeof email.from === 'object') {
|
|
fromText = email.from.address || '';
|
|
fromName = email.from.name || email.from.address?.split('@')[0] || '';
|
|
}
|
|
else if (typeof email.from === 'string') {
|
|
fromText = email.from;
|
|
fromName = email.fromName || email.from.split('@')[0] || '';
|
|
}
|
|
}
|
|
|
|
// Handle 'to' field
|
|
if (email.to) {
|
|
if (Array.isArray(email.to)) {
|
|
if (email.to.length > 0) {
|
|
if (typeof email.to[0] === 'object') {
|
|
toText = email.to.map((t: any) => t.address || '').join(', ');
|
|
} else {
|
|
toText = email.to.join(', ');
|
|
}
|
|
}
|
|
}
|
|
else if (typeof email.to === 'object') {
|
|
toText = email.to.address || '';
|
|
}
|
|
else if (typeof email.to === 'string') {
|
|
toText = email.to;
|
|
}
|
|
}
|
|
|
|
// Handle 'cc' field
|
|
if (email.cc) {
|
|
if (Array.isArray(email.cc)) {
|
|
if (email.cc.length > 0) {
|
|
if (typeof email.cc[0] === 'object') {
|
|
ccText = email.cc.map((c: any) => c.address || '').join(', ');
|
|
} else {
|
|
ccText = email.cc.join(', ');
|
|
}
|
|
}
|
|
}
|
|
else if (typeof email.cc === 'object') {
|
|
ccText = email.cc.address || '';
|
|
}
|
|
else if (typeof email.cc === 'string') {
|
|
ccText = email.cc;
|
|
}
|
|
}
|
|
|
|
// Handle 'bcc' field
|
|
if (email.bcc) {
|
|
if (Array.isArray(email.bcc)) {
|
|
if (email.bcc.length > 0) {
|
|
if (typeof email.bcc[0] === 'object') {
|
|
bccText = email.bcc.map((b: any) => b.address || '').join(', ');
|
|
} else {
|
|
bccText = email.bcc.join(', ');
|
|
}
|
|
}
|
|
}
|
|
else if (typeof email.bcc === 'object') {
|
|
bccText = email.bcc.address || '';
|
|
}
|
|
else if (typeof email.bcc === 'string') {
|
|
bccText = email.bcc;
|
|
}
|
|
}
|
|
|
|
return {
|
|
id: email.id,
|
|
accountId: 1,
|
|
from: fromText,
|
|
fromName: fromName,
|
|
to: toText,
|
|
subject: email.subject || '(No subject)',
|
|
content: email.content || '',
|
|
preview: email.preview || '',
|
|
date: email.date || new Date().toISOString(),
|
|
read: email.read || false,
|
|
starred: email.starred || false,
|
|
folder: email.folder || currentView,
|
|
cc: ccText,
|
|
bcc: bccText,
|
|
flags: email.flags || [],
|
|
hasAttachments: email.hasAttachments || false
|
|
};
|
|
})
|
|
.sort((a: Email, b: Email) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
|
|
|
// Set emails
|
|
console.log('[DEBUG] Setting emails state with', processedEmails.length, 'emails');
|
|
setEmails(processedEmails);
|
|
|
|
// Update unread count for inbox
|
|
if (currentView === 'INBOX') {
|
|
const unreadInboxEmails = processedEmails.filter(
|
|
(email: Email) => !email.read && email.folder === 'INBOX'
|
|
).length;
|
|
setUnreadCount(unreadInboxEmails);
|
|
}
|
|
|
|
// Update pagination
|
|
setHasMore(data.hasMore);
|
|
setError(null);
|
|
console.log('[DEBUG] Initial load complete, setting loading states to false');
|
|
} catch (err) {
|
|
console.error('[DEBUG] Error loading initial data:', err);
|
|
setError(err instanceof Error ? err.message : 'Failed to load data');
|
|
} finally {
|
|
console.log('[DEBUG] Setting loading state to false in finally block');
|
|
// Ensure we reset the loading state after a short delay to make sure React has processed state updates
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
setIsLoadingInitial(false);
|
|
}, 100);
|
|
}
|
|
};
|
|
|
|
loadInitialData();
|
|
}, [router, currentView, page, emailsPerPage]);
|
|
|
|
// Fix the type issue with the session email
|
|
useEffect(() => {
|
|
if (session?.user?.email) {
|
|
setAccounts(prev => prev.map(account =>
|
|
account.id === 1
|
|
? {
|
|
...account,
|
|
name: session.user.email || 'Mail Account',
|
|
email: session.user.email || ''
|
|
}
|
|
: account
|
|
));
|
|
}
|
|
}, [session?.user?.email]);
|
|
|
|
// Get account color
|
|
const getAccountColor = (accountId: number) => {
|
|
const account = accounts.find(acc => acc.id === accountId);
|
|
return account ? account.color : 'bg-gray-500';
|
|
};
|
|
|
|
// Update handleEmailSelect to handle the from field correctly
|
|
const handleEmailSelect = async (emailId: string) => {
|
|
try {
|
|
setContentLoading(true);
|
|
|
|
// Find the email in the current list
|
|
const selectedEmail = emails.find(email => email.id === emailId);
|
|
|
|
if (!selectedEmail) {
|
|
throw new Error('Email not found in list');
|
|
}
|
|
|
|
// Check if we need to fetch full content
|
|
if (!selectedEmail.content || selectedEmail.content.length === 0) {
|
|
console.log('[DEBUG] Fetching full content for email:', emailId);
|
|
|
|
try {
|
|
const response = await fetch(`/api/courrier/${emailId}?folder=${encodeURIComponent(selectedEmail.folder || 'INBOX')}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch email content: ${response.status}`);
|
|
}
|
|
|
|
const fullContent = await response.json();
|
|
|
|
// Update the email content with the fetched full content
|
|
selectedEmail.content = fullContent.content;
|
|
selectedEmail.contentFetched = true;
|
|
|
|
// Update the email in the list too so we don't refetch
|
|
setEmails(prevEmails =>
|
|
prevEmails.map(email =>
|
|
email.id === emailId
|
|
? { ...email, content: fullContent.content, contentFetched: true }
|
|
: email
|
|
)
|
|
);
|
|
|
|
console.log('[DEBUG] Successfully fetched full content for email:', emailId);
|
|
} catch (error) {
|
|
console.error('[DEBUG] Error fetching full content:', error);
|
|
}
|
|
}
|
|
|
|
// Set selected email from our existing data (which now includes full content)
|
|
setSelectedEmail(selectedEmail);
|
|
|
|
// Try to mark as read in the background if not already read
|
|
if (!selectedEmail.read) {
|
|
try {
|
|
// Use the new API endpoint
|
|
await fetch(`/api/courrier/${emailId}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ action: 'mark-read' }),
|
|
});
|
|
|
|
// Update read status in the list
|
|
setEmails(prevEmails =>
|
|
prevEmails.map(email =>
|
|
email.id === emailId
|
|
? { ...email, read: true }
|
|
: email
|
|
)
|
|
);
|
|
} catch (error) {
|
|
console.error('Error marking email as read:', error);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error selecting email:', error);
|
|
setError('Failed to select email. Please try again.');
|
|
} finally {
|
|
setContentLoading(false);
|
|
}
|
|
};
|
|
|
|
// Add these improved handlers
|
|
const handleEmailCheckbox = (e: React.ChangeEvent<HTMLInputElement>, emailId: number) => {
|
|
e.stopPropagation();
|
|
if (e.target.checked) {
|
|
setSelectedEmails([...selectedEmails, emailId.toString()]);
|
|
} else {
|
|
setSelectedEmails(selectedEmails.filter(id => id !== emailId.toString()));
|
|
}
|
|
};
|
|
|
|
// Handles marking an individual email as read/unread
|
|
const handleMarkAsRead = (emailId: string, isRead: boolean) => {
|
|
setEmails(emails.map(email =>
|
|
email.id.toString() === emailId ? { ...email, read: isRead } : email
|
|
));
|
|
};
|
|
|
|
// Handles bulk actions for selected emails
|
|
const handleBulkAction = async (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => {
|
|
if (action === 'delete') {
|
|
setDeleteType('emails');
|
|
setShowDeleteConfirm(true);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/courrier/bulk-actions', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
emailIds: selectedEmails,
|
|
action: action
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to perform bulk action');
|
|
}
|
|
|
|
// Update local state based on the action
|
|
setEmails(emails.map(email => {
|
|
if (selectedEmails.includes(email.id.toString())) {
|
|
switch (action) {
|
|
case 'mark-read':
|
|
return { ...email, read: true };
|
|
case 'mark-unread':
|
|
return { ...email, read: false };
|
|
case 'archive':
|
|
return { ...email, folder: 'Archive' };
|
|
default:
|
|
return email;
|
|
}
|
|
}
|
|
return email;
|
|
}));
|
|
|
|
// Clear selection after successful action
|
|
setSelectedEmails([]);
|
|
} catch (error) {
|
|
console.error('Error performing bulk action:', error);
|
|
alert('Failed to perform bulk action. Please try again.');
|
|
}
|
|
};
|
|
|
|
// Add handleDeleteConfirm function
|
|
const handleDeleteConfirm = async () => {
|
|
try {
|
|
const response = await fetch('/api/courrier/bulk-actions', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
emailIds: selectedEmails,
|
|
action: 'delete'
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to delete emails');
|
|
}
|
|
|
|
// Remove deleted emails from state
|
|
setEmails(emails.filter(email => !selectedEmails.includes(email.id.toString())));
|
|
setSelectedEmails([]);
|
|
} catch (error) {
|
|
console.error('Error deleting emails:', error);
|
|
alert('Failed to delete emails. Please try again.');
|
|
} finally {
|
|
setShowDeleteConfirm(false);
|
|
}
|
|
};
|
|
|
|
// Add infinite scroll handler
|
|
const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
|
|
const target = e.currentTarget;
|
|
if (
|
|
target.scrollHeight - target.scrollTop === target.clientHeight &&
|
|
!isLoadingMore &&
|
|
hasMore
|
|
) {
|
|
setPage(prev => prev + 1);
|
|
loadEmails(true);
|
|
}
|
|
}, [isLoadingMore, hasMore]);
|
|
|
|
// Sort emails by date (most recent first)
|
|
const sortedEmails = useMemo(() => {
|
|
return [...emails].sort((a, b) => {
|
|
return new Date(b.date).getTime() - new Date(a.date).getTime();
|
|
});
|
|
}, [emails]);
|
|
|
|
const toggleSelectAll = () => {
|
|
if (selectedEmails.length === emails.length) {
|
|
setSelectedEmails([]);
|
|
} else {
|
|
setSelectedEmails(emails.map(email => email.id.toString()));
|
|
}
|
|
};
|
|
|
|
// Update filtered emails to use sortedEmails
|
|
const filteredEmails = useMemo(() => {
|
|
if (!searchQuery) return sortedEmails;
|
|
|
|
const query = searchQuery.toLowerCase();
|
|
return sortedEmails.filter(email =>
|
|
email.subject.toLowerCase().includes(query) ||
|
|
email.from.toLowerCase().includes(query) ||
|
|
email.to.toLowerCase().includes(query) ||
|
|
email.content.toLowerCase().includes(query)
|
|
);
|
|
}, [sortedEmails, searchQuery]);
|
|
|
|
// Update the email list to use filtered emails
|
|
const renderEmailList = () => {
|
|
console.log('[DEBUG] Rendering email list with state:', {
|
|
loading,
|
|
isLoadingInitial,
|
|
emailCount: emails.length,
|
|
filteredEmailCount: filteredEmails.length,
|
|
searchQuery: searchQuery.length > 0 ? searchQuery : 'empty',
|
|
selectedEmails: selectedEmails.length
|
|
});
|
|
|
|
return (
|
|
<div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
|
|
{renderEmailListHeader()}
|
|
{renderBulkActionsToolbar()}
|
|
|
|
<div
|
|
className="flex-1 overflow-y-auto"
|
|
onScroll={handleScroll}
|
|
>
|
|
{/* Always show emails when available, regardless of loading state */}
|
|
{filteredEmails.length > 0 ? (
|
|
<div className="divide-y divide-gray-100">
|
|
{filteredEmails.map((email) => renderEmailListItem(email))}
|
|
{(isLoadingMore || loading) && (
|
|
<div className="flex items-center justify-center p-4">
|
|
<div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500 mr-2"></div>
|
|
<span className="text-xs text-gray-500">Refreshing...</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : isLoadingInitial || (loading && emails.length === 0) ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="flex flex-col items-center">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-4"></div>
|
|
<p className="text-sm text-gray-500">Loading emails...</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center h-64">
|
|
<Mail className="h-12 w-12 text-gray-400 mb-3" />
|
|
<p className="text-gray-700 text-base font-medium mb-1">
|
|
{searchQuery ? 'No emails match your search' : 'No emails in this folder'}
|
|
</p>
|
|
{error && (
|
|
<p className="text-red-500 text-sm mt-2">{error}</p>
|
|
)}
|
|
<p className="text-gray-500 text-sm mt-3"><strong>Folder:</strong> {currentView}</p>
|
|
<p className="text-gray-500 text-sm mt-1"><strong>Total emails:</strong> {emails.length}</p>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="mt-5 bg-blue-600 hover:bg-blue-700"
|
|
onClick={() => {
|
|
console.log('[DEBUG] Manual refresh clicked');
|
|
setLoading(true);
|
|
loadEmails();
|
|
}}
|
|
>
|
|
<RefreshCw className="h-4 w-4 mr-2" /> Refresh Folder
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Update the email count in the header to show filtered count
|
|
const renderEmailListHeader = () => (
|
|
<div className="border-b border-gray-100">
|
|
<div className="px-4 py-3 flex items-center justify-between">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-2 top-2 h-4 w-4 text-gray-400" />
|
|
<Input
|
|
type="search"
|
|
placeholder="Search in folder..."
|
|
className="pl-8 h-8 bg-gray-50"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between px-4 h-10">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={filteredEmails.length > 0 && selectedEmails.length === filteredEmails.length}
|
|
onCheckedChange={toggleSelectAll}
|
|
className="mt-0.5"
|
|
/>
|
|
<h2 className="text-base font-semibold text-gray-900">
|
|
{currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()}
|
|
</h2>
|
|
</div>
|
|
<span className="text-sm text-gray-600">
|
|
{searchQuery ? `${filteredEmails.length} of ${emails.length} emails` : `${emails.length} emails`}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Update the bulk actions toolbar to include confirmation dialog
|
|
const renderBulkActionsToolbar = () => {
|
|
if (selectedEmails.length === 0) return null;
|
|
|
|
return (
|
|
<div className="bg-white border-b border-gray-100 px-4 py-2">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="text-sm text-gray-600">
|
|
{selectedEmails.length} selected
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-gray-600 hover:text-gray-900 h-8 px-2"
|
|
onClick={() => {
|
|
const allSelectedRead = selectedEmails.every(id =>
|
|
emails.find(email => email.id.toString() === id)?.read
|
|
);
|
|
handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
|
|
}}
|
|
>
|
|
<Eye className="h-4 w-4 mr-1" />
|
|
<span className="text-sm">
|
|
{selectedEmails.every(id =>
|
|
emails.find(email => email.id.toString() === id)?.read
|
|
) ? 'Unread' : 'Read'}
|
|
</span>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-gray-600 hover:text-gray-900 h-8 px-2"
|
|
onClick={() => handleBulkAction('archive')}
|
|
>
|
|
<Archive className="h-4 w-4 mr-1" />
|
|
<span className="text-sm">Archive</span>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-red-600 hover:text-red-700 h-8 px-2"
|
|
onClick={() => handleBulkAction('delete')}
|
|
>
|
|
<Trash2 className="h-4 w-4 mr-1" />
|
|
<span className="text-sm">Delete</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Keep only one renderEmailListWrapper function that includes both panels
|
|
const renderEmailListWrapper = () => (
|
|
<div className="flex-1 flex overflow-hidden">
|
|
{/* Email list panel */}
|
|
{renderEmailList()}
|
|
|
|
{/* Preview panel - will automatically take remaining space */}
|
|
<div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
|
|
{selectedEmail ? (
|
|
<>
|
|
{/* Email actions header */}
|
|
<div className="flex-none px-4 py-3 border-b border-gray-100">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2 min-w-0 flex-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setSelectedEmail(null)}
|
|
className="md:hidden flex-shrink-0"
|
|
>
|
|
<ChevronLeft className="h-5 w-5" />
|
|
</Button>
|
|
<div className="min-w-0 max-w-[500px]">
|
|
<h2 className="text-lg font-semibold text-gray-900 truncate">
|
|
{selectedEmail.subject}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 flex-shrink-0 ml-auto">
|
|
<div className="flex items-center border-l border-gray-200 pl-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-gray-400 hover:text-gray-900 h-9 w-9"
|
|
onClick={() => handleReply('reply')}
|
|
>
|
|
<Reply className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-gray-400 hover:text-gray-900 h-9 w-9"
|
|
onClick={() => handleReply('reply-all')}
|
|
>
|
|
<ReplyAll className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-gray-400 hover:text-gray-900 h-9 w-9"
|
|
onClick={() => handleReply('forward')}
|
|
>
|
|
<Forward className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-gray-400 hover:text-gray-900 h-9 w-9"
|
|
onClick={(e) => toggleStarred(selectedEmail.id, e)}
|
|
>
|
|
<Star className={`h-4 w-4 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-gray-400 hover:text-gray-900 h-9 w-9"
|
|
onClick={() => {/* Add to folder logic */}}
|
|
>
|
|
<FolderOpen className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scrollable content area */}
|
|
<ScrollArea className="flex-1 p-6">
|
|
{contentLoading ? (
|
|
<div className="flex flex-col items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-4"></div>
|
|
<p className="text-sm text-gray-500">Loading email content...</p>
|
|
</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 className="flex-1">
|
|
<p className="font-medium text-gray-900">
|
|
{selectedEmail.fromName || 'Unknown'} {selectedEmail.from && <span className="text-gray-500"><{selectedEmail.from}></span>}
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
to {selectedEmail.to || 'No recipients'}
|
|
</p>
|
|
{selectedEmail.cc && (
|
|
<p className="text-sm text-gray-500">
|
|
cc {selectedEmail.cc}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="text-sm text-gray-500 whitespace-nowrap">
|
|
{formatDate(new Date(selectedEmail.date))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="prose max-w-none">
|
|
{renderEmailContent(selectedEmail)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</ScrollArea>
|
|
</>
|
|
) : (
|
|
<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>
|
|
);
|
|
|
|
// Update the email list item to safely display the fromName
|
|
const renderEmailListItem = (email: Email) => (
|
|
<div
|
|
key={email.id}
|
|
className={`p-3 hover:bg-gray-50/50 transition-colors cursor-pointer flex items-start gap-3 ${
|
|
selectedEmail?.id === email.id ? 'bg-gray-50/80' : ''
|
|
}`}
|
|
onClick={() => handleEmailSelect(email.id)}
|
|
>
|
|
<div className="flex-none pt-1">
|
|
<Checkbox
|
|
checked={selectedEmails.includes(email.id)}
|
|
onCheckedChange={(checked) => toggleEmailSelection(email.id)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="mt-0.5"
|
|
/>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between gap-2 mb-1">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<span className={`text-sm truncate ${!email.read ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
|
|
{email.fromName || email.from || 'Unknown'}
|
|
</span>
|
|
{!email.read && (
|
|
<span className="w-1.5 h-1.5 bg-blue-600 rounded-full flex-shrink-0"></span>
|
|
)}
|
|
</div>
|
|
<span className="text-xs text-gray-500 whitespace-nowrap">
|
|
{formatDate(new Date(email.date))}
|
|
</span>
|
|
</div>
|
|
<h3 className={`text-sm truncate mb-0.5 ${!email.read ? 'text-gray-900' : 'text-gray-600'}`}>
|
|
{email.subject || '(No subject)'}
|
|
</h3>
|
|
<EmailPreview email={email} />
|
|
</div>
|
|
<div className="flex-none flex items-center gap-1">
|
|
{email.starred && (
|
|
<Star className="h-4 w-4 text-yellow-400 fill-yellow-400" />
|
|
)}
|
|
{email.attachments && email.attachments.length > 0 && (
|
|
<Paperclip className="h-4 w-4 text-gray-400" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const handleMailboxChange = async (newMailbox: string) => {
|
|
setCurrentView(newMailbox);
|
|
setSelectedEmails([]);
|
|
setSearchQuery('');
|
|
setEmails([]);
|
|
setLoading(true);
|
|
setError(null);
|
|
setHasMore(true);
|
|
setPage(1);
|
|
|
|
try {
|
|
// Optimize the request by adding a timeout
|
|
const controller = new AbortController();
|
|
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
|
|
|
|
const response = await fetch(`/api/courrier?folder=${encodeURIComponent(newMailbox)}&page=1&limit=${emailsPerPage}`, {
|
|
signal: controller.signal
|
|
});
|
|
|
|
clearTimeout(timeoutId);
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch emails');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Process emails more efficiently
|
|
const processedEmails = data.emails.map((email: any) => ({
|
|
id: Number(email.id),
|
|
accountId: 1,
|
|
from: email.from || '',
|
|
fromName: email.fromName || email.from?.split('@')[0] || '',
|
|
to: email.to || '',
|
|
subject: email.subject || '(No subject)',
|
|
body: email.body || '',
|
|
date: email.date || new Date().toISOString(),
|
|
read: email.read || false,
|
|
starred: email.starred || false,
|
|
folder: email.folder || newMailbox,
|
|
cc: email.cc || '',
|
|
bcc: email.bcc || '',
|
|
flags: email.flags || [],
|
|
raw: email.body || ''
|
|
}));
|
|
|
|
setEmails(processedEmails);
|
|
setHasMore(processedEmails.length === emailsPerPage);
|
|
|
|
// If folders are returned, update them
|
|
if (data.folders && data.folders.length > 0) {
|
|
setAvailableFolders(data.folders);
|
|
|
|
// Update the mail account with folders
|
|
setAccounts(prev => prev.map(account =>
|
|
account.id === 1
|
|
? { ...account, folders: data.folders }
|
|
: account
|
|
));
|
|
}
|
|
|
|
// Only update unread count if we're in the Inbox folder
|
|
if (newMailbox === 'INBOX') {
|
|
const unreadInboxEmails = processedEmails.filter(
|
|
(email: Email) => !email.read && email.folder === 'INBOX'
|
|
).length;
|
|
setUnreadCount(unreadInboxEmails);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching emails:', error);
|
|
setError(error instanceof Error ? error.message : 'Failed to fetch emails');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Update the renderSidebarNav function to handle empty items or display other navigation options
|
|
const renderSidebarNav = () => (
|
|
<nav className="p-3">
|
|
{sidebarItems.length > 0 ? (
|
|
<ul className="space-y-0.5 px-2">
|
|
{sidebarItems.map((item) => (
|
|
<li key={item.view}>
|
|
<Button
|
|
variant={currentView === item.view ? 'secondary' : 'ghost'}
|
|
className={`w-full justify-start py-2 ${
|
|
currentView === item.view ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
|
}`}
|
|
onClick={() => {
|
|
setCurrentView(item.view);
|
|
setSelectedEmail(null);
|
|
}}
|
|
>
|
|
<div className="flex items-center justify-between w-full">
|
|
<div className="flex items-center">
|
|
<item.icon className="h-4 w-4 mr-2" />
|
|
<span>{item.label}</span>
|
|
</div>
|
|
{item.view === 'INBOX' && unreadCount > 0 && (
|
|
<span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
|
|
{unreadCount}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
// If needed, you can add other navigation items here that aren't folders
|
|
<div className="px-2 py-2">
|
|
{/* This section is empty since we're now using folders under accounts */}
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
|
|
// Update handleReply to include body property for backward compatibility
|
|
const handleReply = async (type: 'reply' | 'reply-all' | 'forward') => {
|
|
if (!selectedEmail) return;
|
|
|
|
try {
|
|
// If content hasn't been loaded yet, fetch it
|
|
if (!selectedEmail.contentFetched) {
|
|
console.log('[DEBUG] Fetching email content for reply:', selectedEmail.id);
|
|
// Use the API route instead of directly calling getEmailContent
|
|
const response = await fetch(`/api/courrier/${selectedEmail.id}?folder=${encodeURIComponent(selectedEmail.folder || 'INBOX')}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch email content: ${response.status}`);
|
|
}
|
|
|
|
const content = await response.json();
|
|
|
|
if (content) {
|
|
// Update the selected email with content
|
|
const updatedEmail = {
|
|
...selectedEmail,
|
|
content: content.content || content.html || content.text || '',
|
|
html: content.html || '',
|
|
text: content.text || '',
|
|
contentFetched: true,
|
|
// Add proper from/to/cc format for client-side formatters
|
|
from: typeof content.from === 'string' ? content.from : content.from?.[0]?.address || '',
|
|
fromName: typeof content.from === 'string' ? '' : content.from?.[0]?.name || '',
|
|
to: typeof content.to === 'string' ? content.to : content.to?.[0]?.address || '',
|
|
cc: typeof content.cc === 'string' ? content.cc : content.cc?.[0]?.address || '',
|
|
bcc: typeof content.bcc === 'string' ? content.bcc : content.bcc?.[0]?.address || '',
|
|
date: typeof content.date === 'string' ? content.date : (content.date ? content.date.toString() : '')
|
|
};
|
|
|
|
setSelectedEmail(updatedEmail);
|
|
|
|
// Format content directly here
|
|
formatEmailAndShowCompose(updatedEmail, type);
|
|
}
|
|
} else {
|
|
// Content already loaded, format directly
|
|
formatEmailAndShowCompose(selectedEmail, type);
|
|
}
|
|
} catch (error) {
|
|
console.error('[DEBUG] Error preparing email for reply/forward:', error);
|
|
}
|
|
};
|
|
|
|
// New helper function to directly format email content
|
|
const formatEmailAndShowCompose = (email: Email, type: 'reply' | 'reply-all' | 'forward') => {
|
|
// Create an EmailMessage compatible object for the ComposeEmail component
|
|
const emailForCompose: FormatterEmailMessage = {
|
|
id: email.id,
|
|
messageId: '',
|
|
subject: email.subject,
|
|
from: [{
|
|
name: email.fromName || email.from.split('@')[0] || '',
|
|
address: email.from
|
|
}],
|
|
to: [{
|
|
name: '',
|
|
address: email.to
|
|
}],
|
|
date: new Date(email.date),
|
|
content: email.content,
|
|
html: email.content,
|
|
text: '',
|
|
hasAttachments: email.attachments ? email.attachments.length > 0 : false,
|
|
folder: email.folder
|
|
};
|
|
|
|
// Use centralized formatters to ensure consistent formatting
|
|
let formattedContent = '';
|
|
let formattedSubject = '';
|
|
let formattedTo = '';
|
|
|
|
if (type === 'reply' || type === 'reply-all') {
|
|
const formatted = formatReplyEmail(emailForCompose, type);
|
|
formattedContent = formatted.content;
|
|
formattedSubject = formatted.subject;
|
|
formattedTo = formatted.to;
|
|
} else if (type === 'forward') {
|
|
const formatted = formatForwardedEmail(emailForCompose);
|
|
formattedContent = formatted.content;
|
|
formattedSubject = formatted.subject;
|
|
}
|
|
|
|
// Set state for compose form
|
|
setIsReplying(true);
|
|
setIsForwarding(type === 'forward');
|
|
|
|
// Set original email content for LegacyAdapter
|
|
setOriginalEmail({
|
|
content: formattedContent,
|
|
type: type
|
|
});
|
|
|
|
// Show compose form with formatted content
|
|
setShowCompose(true);
|
|
|
|
if (type === 'reply' || type === 'reply-all') {
|
|
setComposeTo(formattedTo);
|
|
setComposeSubject(formattedSubject);
|
|
setComposeBody(formattedContent);
|
|
} else if (type === 'forward') {
|
|
setComposeTo('');
|
|
setComposeSubject(formattedSubject);
|
|
setComposeBody(formattedContent);
|
|
}
|
|
};
|
|
|
|
// Update toggleStarred to use string IDs
|
|
const toggleStarred = async (emailId: string, e?: React.MouseEvent) => {
|
|
if (e) {
|
|
e.stopPropagation();
|
|
}
|
|
|
|
const email = emails.find(e => e.id === emailId);
|
|
if (!email) return;
|
|
|
|
try {
|
|
const response = await fetch('/api/courrier/toggle-star', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ emailId, starred: !email.starred }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to toggle star');
|
|
}
|
|
|
|
// Update email in state
|
|
setEmails(emails.map(e =>
|
|
e.id === emailId ? { ...e, starred: !e.starred } : e
|
|
));
|
|
} catch (error) {
|
|
console.error('Error toggling star:', error);
|
|
}
|
|
};
|
|
|
|
// Add back the handleSend function
|
|
const handleSend = async () => {
|
|
if (!composeTo) {
|
|
alert('Please specify at least one recipient');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/courrier/send', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
to: composeTo,
|
|
cc: composeCc,
|
|
bcc: composeBcc,
|
|
subject: composeSubject,
|
|
body: composeBody,
|
|
attachments: attachments,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
if (data.error === 'Attachment size limit exceeded') {
|
|
alert(`Error: ${data.error}\nThe following files are too large:\n${data.details.oversizedFiles.join('\n')}`);
|
|
} else {
|
|
alert(`Error sending email: ${data.error}`);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Clear compose form and close modal
|
|
setComposeTo('');
|
|
setComposeCc('');
|
|
setComposeBcc('');
|
|
setComposeSubject('');
|
|
setComposeBody('');
|
|
setAttachments([]);
|
|
setShowCompose(false);
|
|
} catch (error) {
|
|
console.error('Error sending email:', error);
|
|
alert('Failed to send email. Please try again.');
|
|
}
|
|
};
|
|
|
|
// Add back the renderDeleteConfirmDialog function
|
|
const renderDeleteConfirmDialog = () => (
|
|
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Delete Emails</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Are you sure you want to delete {selectedEmails.length} selected email{selectedEmails.length > 1 ? 's' : ''}? This action cannot be undone.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
|
|
const toggleEmailSelection = (emailId: string) => {
|
|
setSelectedEmails((prev) =>
|
|
prev.includes(emailId)
|
|
? prev.filter((id) => id !== emailId)
|
|
: [...prev, emailId]
|
|
);
|
|
};
|
|
|
|
const searchEmails = (query: string) => {
|
|
setSearchQuery(query.trim());
|
|
};
|
|
|
|
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const query = e.target.value;
|
|
setSearchQuery(query);
|
|
};
|
|
|
|
const renderEmailPreview = (email: Email) => {
|
|
if (!email) return null;
|
|
return (
|
|
<div className="p-4">
|
|
<h2 className="text-lg font-semibold mb-2">{email.subject}</h2>
|
|
<div className="text-sm text-gray-600">
|
|
{renderEmailContent(email)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Update loadEmails to store the full content from the API response
|
|
const loadEmails = async (isLoadMore = false) => {
|
|
try {
|
|
// Skip if already loading
|
|
if (isLoadingInitial || isLoadingMore) {
|
|
console.log('[DEBUG] Skipping loadEmails - already loading');
|
|
return;
|
|
}
|
|
|
|
console.log(`[DEBUG] Loading emails for folder: ${currentView}, page: ${page}, isLoadMore: ${isLoadMore}`);
|
|
|
|
if (isLoadMore) {
|
|
setIsLoadingMore(true);
|
|
} else {
|
|
setLoading(true);
|
|
}
|
|
|
|
// Fetch emails with timestamp for cache busting
|
|
const timestamp = Date.now();
|
|
try {
|
|
const response = await fetch(
|
|
`/api/courrier?folder=${encodeURIComponent(currentView)}&page=${page}&limit=${emailsPerPage}&_t=${timestamp}`,
|
|
{ cache: 'no-store' }
|
|
);
|
|
|
|
if (!response.ok) {
|
|
console.error('[DEBUG] API response error:', response.status, response.statusText);
|
|
throw new Error('Failed to load emails');
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log('[DEBUG] API response:', {
|
|
emailCount: data.emails?.length || 0,
|
|
folderCount: data.folders?.length || 0,
|
|
hasMore: data.hasMore,
|
|
total: data.total
|
|
});
|
|
|
|
// Set available folders
|
|
if (data.folders) {
|
|
console.log('[DEBUG] Setting available folders:', data.folders.length);
|
|
setAvailableFolders(data.folders);
|
|
|
|
// Update the mail account with folders
|
|
setAccounts(prev => prev.map(account =>
|
|
account.id === 1
|
|
? { ...account, folders: data.folders }
|
|
: account
|
|
));
|
|
} else {
|
|
console.warn('[DEBUG] No folders returned from API');
|
|
}
|
|
|
|
// Process and sort emails
|
|
const processedEmails = (data.emails || [])
|
|
.map((email: any) => {
|
|
// Add proper handling for from field which might be an array or object
|
|
let fromText = '';
|
|
let fromName = '';
|
|
let toText = '';
|
|
let ccText = '';
|
|
let bccText = '';
|
|
|
|
// Handle 'from' field
|
|
if (email.from) {
|
|
if (Array.isArray(email.from)) {
|
|
if (email.from.length > 0) {
|
|
if (typeof email.from[0] === 'object') {
|
|
fromText = email.from[0].address || '';
|
|
fromName = email.from[0].name || email.from[0].address?.split('@')[0] || '';
|
|
} else {
|
|
fromText = email.from[0] || '';
|
|
fromName = fromText.split('@')[0] || '';
|
|
}
|
|
}
|
|
}
|
|
else if (typeof email.from === 'object') {
|
|
fromText = email.from.address || '';
|
|
fromName = email.from.name || email.from.address?.split('@')[0] || '';
|
|
}
|
|
else if (typeof email.from === 'string') {
|
|
fromText = email.from;
|
|
fromName = email.fromName || email.from.split('@')[0] || '';
|
|
}
|
|
}
|
|
|
|
// Handle 'to' field
|
|
if (email.to) {
|
|
if (Array.isArray(email.to)) {
|
|
if (email.to.length > 0) {
|
|
if (typeof email.to[0] === 'object') {
|
|
toText = email.to.map((t: any) => t.address || '').join(', ');
|
|
} else {
|
|
toText = email.to.join(', ');
|
|
}
|
|
}
|
|
}
|
|
else if (typeof email.to === 'object') {
|
|
toText = email.to.address || '';
|
|
}
|
|
else if (typeof email.to === 'string') {
|
|
toText = email.to;
|
|
}
|
|
}
|
|
|
|
// Handle 'cc' field
|
|
if (email.cc) {
|
|
if (Array.isArray(email.cc)) {
|
|
if (email.cc.length > 0) {
|
|
if (typeof email.cc[0] === 'object') {
|
|
ccText = email.cc.map((c: any) => c.address || '').join(', ');
|
|
} else {
|
|
ccText = email.cc.join(', ');
|
|
}
|
|
}
|
|
}
|
|
else if (typeof email.cc === 'object') {
|
|
ccText = email.cc.address || '';
|
|
}
|
|
else if (typeof email.cc === 'string') {
|
|
ccText = email.cc;
|
|
}
|
|
}
|
|
|
|
// Handle 'bcc' field
|
|
if (email.bcc) {
|
|
if (Array.isArray(email.bcc)) {
|
|
if (email.bcc.length > 0) {
|
|
if (typeof email.bcc[0] === 'object') {
|
|
bccText = email.bcc.map((b: any) => b.address || '').join(', ');
|
|
} else {
|
|
bccText = email.bcc.join(', ');
|
|
}
|
|
}
|
|
}
|
|
else if (typeof email.bcc === 'object') {
|
|
bccText = email.bcc.address || '';
|
|
}
|
|
else if (typeof email.bcc === 'string') {
|
|
bccText = email.bcc;
|
|
}
|
|
}
|
|
|
|
return {
|
|
id: email.id,
|
|
accountId: 1,
|
|
from: fromText,
|
|
fromName: fromName,
|
|
to: toText,
|
|
subject: email.subject || '(No subject)',
|
|
content: email.content || '',
|
|
preview: email.preview || '',
|
|
date: email.date || new Date().toISOString(),
|
|
read: email.read || false,
|
|
starred: email.starred || false,
|
|
folder: email.folder || currentView,
|
|
cc: ccText,
|
|
bcc: bccText,
|
|
flags: email.flags || [],
|
|
hasAttachments: email.hasAttachments || false
|
|
};
|
|
})
|
|
.sort((a: Email, b: Email) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
|
|
|
// Set emails appropriately
|
|
console.log('[DEBUG] Setting emails state with', processedEmails.length, 'emails');
|
|
setEmails(prev => {
|
|
if (isLoadMore) {
|
|
// Filter out duplicates when appending
|
|
const existingIds = new Set(prev.map(email => email.id));
|
|
const uniqueNewEmails = processedEmails.filter((email: Email) => !existingIds.has(email.id));
|
|
return [...prev, ...uniqueNewEmails];
|
|
} else {
|
|
return processedEmails;
|
|
}
|
|
});
|
|
|
|
// Update unread count
|
|
if (currentView === 'INBOX') {
|
|
const unreadInboxEmails = processedEmails.filter(
|
|
(email: Email) => !email.read && email.folder === 'INBOX'
|
|
).length;
|
|
setUnreadCount(unreadInboxEmails);
|
|
}
|
|
|
|
setHasMore(data.hasMore);
|
|
setError(null);
|
|
} catch (err) {
|
|
console.error('[DEBUG] Error in fetch emails:', err);
|
|
setError('Failed to load emails');
|
|
throw err; // Rethrow to ensure the finally block still runs
|
|
}
|
|
} catch (err) {
|
|
console.error('[DEBUG] Error loading emails:', err);
|
|
setError('Failed to load emails');
|
|
} finally {
|
|
console.log('[DEBUG] Setting loading states to false in loadEmails finally block');
|
|
// Ensure we reset the loading state after a short delay to make sure React has processed state updates
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
setIsLoadingMore(false);
|
|
setIsLoadingInitial(false);
|
|
}, 100);
|
|
}
|
|
};
|
|
|
|
// Add back the view change effect
|
|
useEffect(() => {
|
|
setPage(1); // Reset page when view changes
|
|
setHasMore(true);
|
|
loadEmails();
|
|
}, [currentView]);
|
|
|
|
// Create a function to load folders that will be available throughout the component
|
|
const loadFolders = async () => {
|
|
console.log('[DEBUG] Explicitly loading folders from standalone function...');
|
|
|
|
try {
|
|
// Make a specific request just to get folders
|
|
const timestamp = Date.now(); // Cache busting
|
|
const response = await fetch(`/api/courrier?folder=INBOX&page=1&limit=1&skipCache=true&_t=${timestamp}`, {
|
|
headers: {
|
|
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
|
'Pragma': 'no-cache'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
console.log('[DEBUG] Folder response data:', JSON.stringify(data, null, 2));
|
|
|
|
// Check for mailboxes field (from IMAP) and use it if available
|
|
const folders = data.mailboxes || data.folders || [];
|
|
|
|
if (folders && folders.length > 0) {
|
|
console.log('[DEBUG] Successfully loaded folders:', folders);
|
|
|
|
setAvailableFolders(folders);
|
|
|
|
// Update the mail account with folders
|
|
setAccounts(prev => {
|
|
console.log('[DEBUG] Updating account with folders:', folders);
|
|
return prev.map(account =>
|
|
account.id === 1
|
|
? { ...account, folders: folders }
|
|
: account
|
|
);
|
|
});
|
|
} else {
|
|
console.warn('[DEBUG] No folders found in response. Response data:', data);
|
|
}
|
|
} else {
|
|
console.error('[DEBUG] Folder request failed:', response.status);
|
|
}
|
|
} catch (error) {
|
|
console.error('[DEBUG] Error explicitly loading folders:', error);
|
|
}
|
|
};
|
|
|
|
// Improve the folder loading logic with a delay and better reliability
|
|
useEffect(() => {
|
|
let isMounted = true; // For cleanup
|
|
|
|
// Only load if we don't have folders yet and we're not already loading
|
|
if ((!accounts[1]?.folders || accounts[1]?.folders?.length === 0) && !loading) {
|
|
console.log('[DEBUG] Triggering folder load in useEffect...');
|
|
|
|
// Set a small delay to ensure other loading operations have completed
|
|
setTimeout(() => {
|
|
if (!isMounted) return;
|
|
loadFolders();
|
|
}, 500); // 500ms delay
|
|
}
|
|
|
|
return () => {
|
|
isMounted = false;
|
|
};
|
|
}, [accounts, loading]);
|
|
|
|
// Add a new function to fetch the IMAP credentials email
|
|
const fetchImapCredentials = async () => {
|
|
try {
|
|
console.log("[DEBUG] Fetching IMAP credentials...");
|
|
const response = await fetch("/api/courrier/credentials", {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"Cache-Control": "no-cache"
|
|
},
|
|
});
|
|
|
|
console.log("[DEBUG] IMAP credentials response status:", response.status);
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({}));
|
|
console.error("[DEBUG] Error fetching IMAP credentials:", response.status, errorData);
|
|
throw new Error(`Failed to fetch IMAP credentials: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log("[DEBUG] IMAP credentials data:", data);
|
|
|
|
if (data && data.credentials && data.credentials.email) {
|
|
console.log("[DEBUG] Setting account with IMAP email:", data.credentials.email);
|
|
setAccounts(prev => prev.map(account =>
|
|
account.id === 1
|
|
? {
|
|
...account,
|
|
name: data.credentials.email,
|
|
email: data.credentials.email
|
|
}
|
|
: account
|
|
));
|
|
|
|
// After setting the account email, explicitly load folders
|
|
setTimeout(() => {
|
|
console.log("[DEBUG] Triggering folder load after setting account");
|
|
loadFolders();
|
|
}, 1000);
|
|
} else {
|
|
console.log("[DEBUG] No valid IMAP credentials found in response:", data);
|
|
}
|
|
} catch (error) {
|
|
console.error("[DEBUG] Error in fetchImapCredentials:", error);
|
|
}
|
|
};
|
|
|
|
// Call it once on component mount
|
|
useEffect(() => {
|
|
fetchImapCredentials();
|
|
}, []);
|
|
|
|
// Add ref for tracking component mount status
|
|
const isComponentMounted = useRef(true);
|
|
|
|
// Add a cleanup effect to reset states on unmount/remount
|
|
useEffect(() => {
|
|
// Reset isComponentMounted value on mount
|
|
isComponentMounted.current = true;
|
|
|
|
// Reset loading states when component mounts
|
|
const timeoutId = setTimeout(() => {
|
|
if (isComponentMounted.current && (loading || isLoadingInitial)) {
|
|
console.log('[DEBUG] Reset loading states on mount');
|
|
setLoading(false);
|
|
setIsLoadingInitial(false);
|
|
}
|
|
}, 5000); // Longer timeout to avoid race conditions
|
|
|
|
// Return cleanup function
|
|
return () => {
|
|
console.log('[DEBUG] Component unmounting, clearing states');
|
|
isComponentMounted.current = false;
|
|
clearTimeout(timeoutId);
|
|
// No need to set states during unmount as component is gone
|
|
};
|
|
}, []); // Empty dependency array
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
|
|
<div className="text-center max-w-md mx-auto px-4">
|
|
<Mail className="h-12 w-12 mb-4 text-red-400 mx-auto" />
|
|
<p className="text-red-500 mb-4">{error}</p>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => window.location.reload()}
|
|
className="mx-auto"
|
|
>
|
|
Try Again
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isLoadingInitial && !emails.length) {
|
|
return (
|
|
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
|
|
<div className="text-center">
|
|
<div className="flex flex-col items-center">
|
|
<div className="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-500 mb-4"></div>
|
|
<p className="text-gray-700">Loading your emails...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Main layout */}
|
|
<main className="w-full h-screen bg-black">
|
|
<div className="w-full h-full px-4 pt-12 pb-4">
|
|
<div className="flex h-full bg-carnet-bg">
|
|
{/* Sidebar */}
|
|
<div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
|
|
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
|
{/* Courrier Title */}
|
|
<div className="p-3 border-b border-gray-100">
|
|
<div className="flex items-center gap-2">
|
|
<Mail className="h-6 w-6 text-gray-600" />
|
|
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Compose button and refresh button */}
|
|
<div className="p-2 border-b border-gray-100 flex items-center gap-2">
|
|
<Button
|
|
className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
|
|
onClick={() => {
|
|
setShowCompose(true);
|
|
setComposeTo('');
|
|
setComposeCc('');
|
|
setComposeBcc('');
|
|
setComposeSubject('');
|
|
setComposeBody('');
|
|
setShowCc(false);
|
|
setShowBcc(false);
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<PlusIcon className="h-3.5 w-3.5" />
|
|
<span>Compose</span>
|
|
</div>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-9 w-9 text-gray-400 hover:text-gray-600"
|
|
onClick={() => {
|
|
setLoading(true);
|
|
loadEmails();
|
|
}}
|
|
>
|
|
<RefreshCw className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Accounts Section */}
|
|
<div className="p-3 border-b border-gray-100">
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
|
|
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
|
|
>
|
|
<span>Accounts</span>
|
|
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
|
</Button>
|
|
|
|
{accountsDropdownOpen && (
|
|
<div className="space-y-1 pl-2">
|
|
{accounts.map(account => (
|
|
<div key={account.id} className="relative group">
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full justify-between px-2 py-1.5 text-sm group"
|
|
onClick={() => setSelectedAccount(account)}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
|
<span className="font-medium text-gray-700">{account.name}</span>
|
|
</div>
|
|
</Button>
|
|
|
|
{/* Show folders for email accounts (not for "All" account) without the "Folders" header */}
|
|
{account.id !== 0 && (
|
|
<div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-200">
|
|
{account.folders && account.folders.length > 0 ? (
|
|
account.folders.map((folder) => (
|
|
<Button
|
|
key={folder}
|
|
variant="ghost"
|
|
className={`w-full justify-start py-1 px-2 text-xs ${
|
|
currentView === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
|
}`}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleMailboxChange(folder);
|
|
}}
|
|
>
|
|
<div className="flex items-center justify-between w-full gap-1.5">
|
|
<div className="flex items-center gap-1.5">
|
|
{React.createElement(getFolderIcon(folder), { className: "h-3.5 w-3.5" })}
|
|
<span className="truncate">{folder}</span>
|
|
</div>
|
|
{folder === 'INBOX' && unreadCount > 0 && (
|
|
<span className="ml-auto bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded-full text-[10px]">
|
|
{unreadCount}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Button>
|
|
))
|
|
) : (
|
|
<div className="px-2 py-2">
|
|
<div className="flex flex-col space-y-2">
|
|
{/* Create placeholder folder items with shimmer effect */}
|
|
{Array.from({ length: 5 }).map((_, index) => (
|
|
<div key={index} className="flex items-center gap-1.5 animate-pulse">
|
|
<div className="h-3.5 w-3.5 bg-gray-200 rounded-sm"></div>
|
|
<div className="h-3 w-24 bg-gray-200 rounded"></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
{renderSidebarNav()}
|
|
</div>
|
|
|
|
{/* Main content area */}
|
|
<div className="flex-1 flex overflow-hidden">
|
|
{/* Email list panel */}
|
|
{renderEmailListWrapper()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Compose Email Modal */}
|
|
<ComposeEmail
|
|
showCompose={showCompose}
|
|
setShowCompose={setShowCompose}
|
|
composeTo={composeTo}
|
|
setComposeTo={setComposeTo}
|
|
composeCc={composeCc}
|
|
setComposeCc={setComposeCc}
|
|
composeBcc={composeBcc}
|
|
setComposeBcc={setComposeBcc}
|
|
composeSubject={composeSubject}
|
|
setComposeSubject={setComposeSubject}
|
|
composeBody={composeBody}
|
|
setComposeBody={setComposeBody}
|
|
showCc={showCc}
|
|
setShowCc={setShowCc}
|
|
showBcc={showBcc}
|
|
setShowBcc={setShowBcc}
|
|
attachments={attachments}
|
|
setAttachments={setAttachments}
|
|
handleSend={handleSend}
|
|
onSend={async (emailData) => {
|
|
console.log('Email sent:', emailData);
|
|
setShowCompose(false);
|
|
setIsReplying(false);
|
|
setIsForwarding(false);
|
|
}}
|
|
onCancel={() => {
|
|
setShowCompose(false);
|
|
setComposeTo('');
|
|
setComposeCc('');
|
|
setComposeBcc('');
|
|
setComposeSubject('');
|
|
setComposeBody('');
|
|
setShowCc(false);
|
|
setShowBcc(false);
|
|
setAttachments([]);
|
|
setIsReplying(false);
|
|
setIsForwarding(false);
|
|
}}
|
|
/>
|
|
|
|
{renderDeleteConfirmDialog()}
|
|
|
|
{/* Debug tools - only shown in development mode */}
|
|
{process.env.NODE_ENV !== 'production' && (
|
|
<LoadingFix
|
|
loading={loading}
|
|
isLoadingInitial={isLoadingInitial}
|
|
setLoading={setLoading}
|
|
setIsLoadingInitial={setIsLoadingInitial}
|
|
setEmails={setEmails}
|
|
loadEmails={loadEmails}
|
|
emails={emails}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
} |