130 lines
3.9 KiB
TypeScript
130 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { Email } from '@/hooks/use-courrier';
|
|
import EmailListItem from './EmailListItem';
|
|
import EmailListHeader from './EmailListHeader';
|
|
import BulkActionsToolbar from './BulkActionsToolbar';
|
|
|
|
interface EmailListProps {
|
|
emails: Email[];
|
|
selectedEmailIds: string[];
|
|
selectedEmail: Email | null;
|
|
currentFolder: string;
|
|
isLoading: boolean;
|
|
totalEmails: number;
|
|
hasMoreEmails: boolean;
|
|
onSelectEmail: (emailId: string) => void;
|
|
onToggleSelect: (emailId: string) => void;
|
|
onToggleSelectAll: () => void;
|
|
onBulkAction: (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => void;
|
|
onToggleStarred: (emailId: string) => void;
|
|
onLoadMore: () => void;
|
|
}
|
|
|
|
export default function EmailList({
|
|
emails,
|
|
selectedEmailIds,
|
|
selectedEmail,
|
|
currentFolder,
|
|
isLoading,
|
|
totalEmails,
|
|
hasMoreEmails,
|
|
onSelectEmail,
|
|
onToggleSelect,
|
|
onToggleSelectAll,
|
|
onBulkAction,
|
|
onToggleStarred,
|
|
onLoadMore
|
|
}: EmailListProps) {
|
|
const [scrollPosition, setScrollPosition] = useState(0);
|
|
|
|
// Handle scroll to detect when user reaches the bottom
|
|
const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
|
|
const target = event.target as HTMLDivElement;
|
|
const { scrollTop, scrollHeight, clientHeight } = target;
|
|
|
|
setScrollPosition(scrollTop);
|
|
|
|
// If user scrolls near the bottom and we have more emails, load more
|
|
if (scrollHeight - scrollTop - clientHeight < 200 && hasMoreEmails && !isLoading) {
|
|
onLoadMore();
|
|
}
|
|
};
|
|
|
|
// Render loading state
|
|
if (isLoading && emails.length === 0) {
|
|
return (
|
|
<div className="flex justify-center items-center h-full p-8">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Render empty state
|
|
if (emails.length === 0) {
|
|
return (
|
|
<div className="flex flex-col justify-center items-center h-full p-8 text-center">
|
|
<h3 className="text-lg font-semibold mb-2">No emails found</h3>
|
|
<p className="text-muted-foreground">
|
|
{currentFolder === 'INBOX'
|
|
? "Your inbox is empty. You're all caught up!"
|
|
: `The ${currentFolder} folder is empty.`}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Are all emails selected
|
|
const allSelected = selectedEmailIds.length === emails.length && emails.length > 0;
|
|
|
|
// Are some (but not all) emails selected
|
|
const someSelected = selectedEmailIds.length > 0 && selectedEmailIds.length < emails.length;
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<EmailListHeader
|
|
allSelected={allSelected}
|
|
someSelected={someSelected}
|
|
onToggleSelectAll={onToggleSelectAll}
|
|
/>
|
|
|
|
{selectedEmailIds.length > 0 && (
|
|
<BulkActionsToolbar
|
|
selectedCount={selectedEmailIds.length}
|
|
onBulkAction={onBulkAction}
|
|
/>
|
|
)}
|
|
|
|
<ScrollArea className="flex-1" onScroll={handleScroll}>
|
|
<div className="divide-y">
|
|
{emails.map((email) => (
|
|
<EmailListItem
|
|
key={email.id}
|
|
email={email}
|
|
isSelected={selectedEmailIds.includes(email.id)}
|
|
isActive={selectedEmail?.id === email.id}
|
|
onSelect={() => onSelectEmail(email.id)}
|
|
onToggleSelect={(e) => {
|
|
e.stopPropagation();
|
|
onToggleSelect(email.id);
|
|
}}
|
|
onToggleStarred={(e) => {
|
|
e.stopPropagation();
|
|
onToggleStarred(email.id);
|
|
}}
|
|
/>
|
|
))}
|
|
|
|
{isLoading && emails.length > 0 && (
|
|
<div className="p-4 flex justify-center">
|
|
<Loader2 className="h-6 w-6 animate-spin text-primary" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
}
|