278 lines
8.9 KiB
TypeScript
278 lines
8.9 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
|
import { Loader2, Mail, Search, X } from 'lucide-react';
|
|
import { Email } from '@/hooks/use-courrier';
|
|
import EmailListItem from '@/components/email/EmailListItem';
|
|
import EmailListHeader from '@/components/email/EmailListHeader';
|
|
import BulkActionsToolbar from '@/components/email/BulkActionsToolbar';
|
|
import { Input } from '@/components/ui/input';
|
|
|
|
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;
|
|
onSearch?: (query: string) => void;
|
|
}
|
|
|
|
export default function EmailList({
|
|
emails,
|
|
selectedEmailIds,
|
|
selectedEmail,
|
|
currentFolder,
|
|
isLoading,
|
|
totalEmails,
|
|
hasMoreEmails,
|
|
onSelectEmail,
|
|
onToggleSelect,
|
|
onToggleSelectAll,
|
|
onBulkAction,
|
|
onToggleStarred,
|
|
onLoadMore,
|
|
onSearch
|
|
}: EmailListProps) {
|
|
const [scrollPosition, setScrollPosition] = useState(0);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
const prevEmailsLengthRef = useRef(emails.length);
|
|
|
|
// Debounced scroll handler for better performance
|
|
const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
|
|
const target = event.target as HTMLDivElement;
|
|
const { scrollTop, scrollHeight, clientHeight } = target;
|
|
|
|
// Save scroll position for restoration
|
|
setScrollPosition(scrollTop);
|
|
|
|
// Clear any existing timeout to prevent rapid firing
|
|
if (scrollTimeoutRef.current) {
|
|
clearTimeout(scrollTimeoutRef.current);
|
|
}
|
|
|
|
// If near bottom (within 200px) and more emails are available, load more
|
|
// Added additional checks to prevent loading loop
|
|
const isNearBottom = scrollHeight - scrollTop - clientHeight < 200;
|
|
if (isNearBottom && hasMoreEmails && !isLoading && !isLoadingMore) {
|
|
setIsLoadingMore(true);
|
|
|
|
// Use timeout to debounce load requests
|
|
scrollTimeoutRef.current = setTimeout(() => {
|
|
// Clear the timeout reference before loading
|
|
scrollTimeoutRef.current = null;
|
|
onLoadMore();
|
|
|
|
// Reset loading state after a delay
|
|
setTimeout(() => {
|
|
setIsLoadingMore(false);
|
|
}, 1500); // Increased from 1000ms to 1500ms to prevent quick re-triggering
|
|
}, 200); // Increased from 100ms to 200ms for better debouncing
|
|
}
|
|
}, [hasMoreEmails, isLoading, isLoadingMore, onLoadMore]);
|
|
|
|
// Restore scroll position when emails are loaded
|
|
useEffect(() => {
|
|
// Only attempt to restore position if:
|
|
// 1. We have more emails than before
|
|
// 2. We have a scroll reference
|
|
// 3. We have a saved scroll position
|
|
// 4. We're not in the middle of a loading operation
|
|
if (emails.length > prevEmailsLengthRef.current &&
|
|
scrollRef.current &&
|
|
scrollPosition > 0 &&
|
|
!isLoading) {
|
|
// Use requestAnimationFrame to ensure the DOM has updated
|
|
requestAnimationFrame(() => {
|
|
if (scrollRef.current) {
|
|
scrollRef.current.scrollTop = scrollPosition;
|
|
console.log(`Restored scroll position to ${scrollPosition}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Always update the reference for next comparison
|
|
prevEmailsLengthRef.current = emails.length;
|
|
}, [emails.length, scrollPosition, isLoading]);
|
|
|
|
// Add listener for custom reset scroll event
|
|
useEffect(() => {
|
|
const handleResetScroll = () => {
|
|
if (scrollRef.current) {
|
|
scrollRef.current.scrollTop = 0;
|
|
setScrollPosition(0);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('reset-email-scroll', handleResetScroll);
|
|
|
|
return () => {
|
|
window.removeEventListener('reset-email-scroll', handleResetScroll);
|
|
};
|
|
}, []);
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
onSearch?.(searchQuery);
|
|
|
|
// Reset scroll to top when searching
|
|
if (scrollRef.current) {
|
|
scrollRef.current.scrollTop = 0;
|
|
}
|
|
};
|
|
|
|
const clearSearch = () => {
|
|
setSearchQuery('');
|
|
onSearch?.('');
|
|
};
|
|
|
|
const scrollToTop = () => {
|
|
if (scrollRef.current) {
|
|
// Use smooth scrolling for better UX
|
|
scrollRef.current.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
};
|
|
|
|
// Render loading state
|
|
if (isLoading && emails.length === 0) {
|
|
return (
|
|
<div className="flex justify-center items-center h-full p-8 bg-white/95 backdrop-blur-sm">
|
|
<Loader2 className="h-8 w-8 text-blue-500 animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Render empty state
|
|
if (emails.length === 0) {
|
|
return (
|
|
<div className="flex flex-col justify-center items-center h-64 p-8 text-center bg-white/95 backdrop-blur-sm">
|
|
<Mail className="h-8 w-8 text-gray-400 mb-2" />
|
|
<p className="text-gray-500 text-sm">
|
|
{searchQuery
|
|
? 'No emails match your search'
|
|
: currentFolder === 'INBOX'
|
|
? "Your inbox is empty. You're all caught up!"
|
|
: 'No emails in this folder'}
|
|
</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="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
|
|
{/* Search header */}
|
|
<div className="border-b border-gray-100">
|
|
<div className="px-4 py-2">
|
|
<div className="relative">
|
|
<Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
|
|
<form onSubmit={handleSearch}>
|
|
<Input
|
|
type="search"
|
|
placeholder="Search in folder..."
|
|
className="pl-8 h-9 bg-gray-50"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
type="button"
|
|
onClick={clearSearch}
|
|
className="absolute right-2 top-1/2 transform -translate-y-1/2"
|
|
>
|
|
<X className="h-4 w-4 text-gray-400" />
|
|
</button>
|
|
)}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<EmailListHeader
|
|
allSelected={allSelected}
|
|
someSelected={someSelected}
|
|
onToggleSelectAll={onToggleSelectAll}
|
|
currentFolder={currentFolder}
|
|
totalEmails={totalEmails}
|
|
/>
|
|
</div>
|
|
|
|
{selectedEmailIds.length > 0 && (
|
|
<BulkActionsToolbar
|
|
selectedCount={selectedEmailIds.length}
|
|
onBulkAction={onBulkAction}
|
|
/>
|
|
)}
|
|
|
|
<div
|
|
ref={scrollRef}
|
|
className="flex-1 overflow-y-auto"
|
|
onScroll={handleScroll}
|
|
>
|
|
<div className="divide-y divide-gray-100">
|
|
{/* Back to top button */}
|
|
{scrollPosition > 300 && (
|
|
<button
|
|
onClick={scrollToTop}
|
|
className="sticky top-0 w-full py-1 text-xs text-blue-600 bg-blue-50 hover:bg-blue-100 z-10"
|
|
>
|
|
↑ Back to newest emails
|
|
</button>
|
|
)}
|
|
|
|
{/* Email list */}
|
|
{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: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onToggleSelect(email.id);
|
|
}}
|
|
onToggleStarred={(e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onToggleStarred(email.id);
|
|
}}
|
|
/>
|
|
))}
|
|
|
|
{/* Loading indicator */}
|
|
{(isLoading || isLoadingMore) && (
|
|
<div className="flex items-center justify-center p-4">
|
|
<Loader2 className="h-4 w-4 text-blue-500 animate-spin" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Load more button - only show when near bottom but not auto-loading */}
|
|
{hasMoreEmails && !isLoading && !isLoadingMore && (
|
|
<button
|
|
onClick={onLoadMore}
|
|
className="w-full py-2 text-gray-500 hover:bg-gray-100 text-sm"
|
|
>
|
|
Load more emails
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|