widget courrier refactor
This commit is contained in:
parent
7a47b89114
commit
60eb2efb20
@ -1,10 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { RefreshCw, MessageSquare, Mail, MailOpen, Loader2 } from "lucide-react";
|
||||
import Link from 'next/link';
|
||||
import { useUnifiedRefresh } from "@/hooks/use-unified-refresh";
|
||||
import { REFRESH_INTERVALS } from "@/lib/constants/refresh-intervals";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
interface Email {
|
||||
id: string;
|
||||
@ -24,21 +28,28 @@ interface EmailResponse {
|
||||
}
|
||||
|
||||
export function Email() {
|
||||
const { data: session, status } = useSession();
|
||||
const [emails, setEmails] = useState<Email[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [mailUrl, setMailUrl] = useState<string | null>(null);
|
||||
const [accounts, setAccounts] = useState<Array<{ id: string; email: string }>>([]);
|
||||
const [unreadCount, setUnreadCount] = useState<number>(0);
|
||||
const [accountErrors, setAccountErrors] = useState<Record<string, string>>({});
|
||||
|
||||
useEffect(() => {
|
||||
loadAccounts();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (accounts.length > 0) {
|
||||
fetchEmails();
|
||||
if (status === 'authenticated') {
|
||||
loadAccounts();
|
||||
}
|
||||
}, [accounts]);
|
||||
}, [status]);
|
||||
|
||||
useEffect(() => {
|
||||
if (accounts.length > 0 && status === 'authenticated') {
|
||||
fetchEmails(false);
|
||||
fetchUnreadCount();
|
||||
}
|
||||
}, [accounts, status]);
|
||||
|
||||
const loadAccounts = async () => {
|
||||
try {
|
||||
@ -57,32 +68,50 @@ export function Email() {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchEmails = async (isRefresh = false) => {
|
||||
setLoading(true);
|
||||
const fetchEmails = async (forceRefresh = false) => {
|
||||
// Only show loading spinner on initial load, not on auto-refresh
|
||||
if (!emails.length) {
|
||||
setLoading(true);
|
||||
}
|
||||
setRefreshing(true);
|
||||
setError(null);
|
||||
setAccountErrors({});
|
||||
|
||||
try {
|
||||
// Fetch emails from all accounts in parallel
|
||||
const emailPromises = accounts.map(async (account) => {
|
||||
const url = `/api/courrier?folder=INBOX&page=1&perPage=5&accountId=${encodeURIComponent(account.id)}${isRefresh ? '&refresh=true' : ''}`;
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
console.warn(`Failed to fetch emails for account ${account.id}`);
|
||||
try {
|
||||
const url = `/api/courrier?folder=INBOX&page=1&perPage=5&accountId=${encodeURIComponent(account.id)}${forceRefresh ? '&refresh=true' : ''}`;
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
const errorMsg = `Failed to fetch emails for ${account.email}`;
|
||||
console.warn(errorMsg);
|
||||
setAccountErrors(prev => ({ ...prev, [account.id]: errorMsg }));
|
||||
return [];
|
||||
}
|
||||
const data = await response.json();
|
||||
if (data.error || !data.emails) {
|
||||
const errorMsg = data.error || `No emails returned for ${account.email}`;
|
||||
setAccountErrors(prev => ({ ...prev, [account.id]: errorMsg }));
|
||||
return [];
|
||||
}
|
||||
// Add accountId to each email for proper identification
|
||||
return data.emails.map((email: any) => ({
|
||||
...email,
|
||||
accountId: account.id
|
||||
}));
|
||||
} catch (err) {
|
||||
const errorMsg = `Error fetching emails for ${account.email}: ${err instanceof Error ? err.message : 'Unknown error'}`;
|
||||
console.error(errorMsg, err);
|
||||
setAccountErrors(prev => ({ ...prev, [account.id]: errorMsg }));
|
||||
return [];
|
||||
}
|
||||
const data = await response.json();
|
||||
if (data.error || !data.emails) {
|
||||
return [];
|
||||
}
|
||||
// Add accountId to each email for proper identification
|
||||
return data.emails.map((email: any) => ({
|
||||
...email,
|
||||
accountId: account.id
|
||||
}));
|
||||
});
|
||||
|
||||
const allEmailsArrays = await Promise.all(emailPromises);
|
||||
const allEmails = allEmailsArrays.flat();
|
||||
const allEmailsArrays = await Promise.allSettled(emailPromises);
|
||||
const allEmails = allEmailsArrays
|
||||
.filter((result): result is PromiseFulfilledResult<any[]> => result.status === 'fulfilled')
|
||||
.flatMap(result => result.value);
|
||||
|
||||
// Transform and sort all emails
|
||||
const transformedEmails = allEmails
|
||||
@ -103,15 +132,65 @@ export function Email() {
|
||||
|
||||
setEmails(transformedEmails);
|
||||
setMailUrl('/courrier');
|
||||
|
||||
// Show error only if all accounts failed
|
||||
if (allEmails.length === 0 && accounts.length > 0 && Object.keys(accountErrors).length === accounts.length) {
|
||||
setError('Failed to load emails from all accounts');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching emails:', error);
|
||||
setError('Failed to load emails');
|
||||
setError(error instanceof Error ? error.message : 'Failed to load emails');
|
||||
setEmails([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUnreadCount = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/courrier/unread-counts');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data && typeof data === 'object') {
|
||||
// Sum up unread counts from all accounts and folders
|
||||
let totalUnread = 0;
|
||||
Object.values(data).forEach((accountCounts: any) => {
|
||||
if (typeof accountCounts === 'object') {
|
||||
Object.values(accountCounts).forEach((count: any) => {
|
||||
if (typeof count === 'number') {
|
||||
totalUnread += count;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
setUnreadCount(totalUnread);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching unread count:', err);
|
||||
// Don't set error state for unread count failures
|
||||
}
|
||||
};
|
||||
|
||||
// Integrate unified refresh for automatic polling
|
||||
const { refresh } = useUnifiedRefresh({
|
||||
resource: 'email',
|
||||
interval: REFRESH_INTERVALS.EMAIL, // 1 minute
|
||||
enabled: status === 'authenticated',
|
||||
onRefresh: async () => {
|
||||
await fetchEmails(false); // Use cache for auto-refresh
|
||||
await fetchUnreadCount();
|
||||
},
|
||||
priority: 'medium',
|
||||
});
|
||||
|
||||
// Manual refresh handler (bypasses cache)
|
||||
const handleManualRefresh = async () => {
|
||||
await fetchEmails(true); // Force refresh, bypass cache
|
||||
await fetchUnreadCount();
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
@ -132,23 +211,33 @@ export function Email() {
|
||||
<CardTitle className="text-lg font-semibold text-gray-800 flex items-center gap-2">
|
||||
<Mail className="h-5 w-5 text-gray-600" />
|
||||
Courrier
|
||||
{unreadCount > 0 && (
|
||||
<Badge variant="destructive" className="ml-1 text-xs">
|
||||
{unreadCount}
|
||||
</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => fetchEmails(true)}
|
||||
disabled={loading}
|
||||
onClick={handleManualRefresh}
|
||||
disabled={refreshing}
|
||||
className="h-7 w-7 p-0 hover:bg-gray-100/50 rounded-full"
|
||||
>
|
||||
{loading ?
|
||||
<Loader2 className="h-4 w-4 animate-spin" /> :
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
}
|
||||
<RefreshCw className={`h-3.5 w-3.5 text-gray-600 ${refreshing ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4">
|
||||
{error ? (
|
||||
<div className="text-center py-4 text-gray-500">
|
||||
{error}
|
||||
<div className="text-center py-4">
|
||||
<p className="text-red-500 text-sm mb-2">{error}</p>
|
||||
{Object.keys(accountErrors).length > 0 && (
|
||||
<div className="text-xs text-gray-500 space-y-1">
|
||||
{Object.entries(accountErrors).map(([accountId, errMsg]) => (
|
||||
<p key={accountId}>{errMsg}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : loading && emails.length === 0 ? (
|
||||
<div className="text-center py-6 flex flex-col items-center">
|
||||
@ -157,7 +246,7 @@ export function Email() {
|
||||
</div>
|
||||
) : emails.length === 0 ? (
|
||||
<div className="text-center py-6">
|
||||
<p className="text-gray-500">Aucun email non lu</p>
|
||||
<p className="text-gray-500">Aucun email</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user