panel 2 courier api restore
This commit is contained in:
parent
f7cf40b0e7
commit
28a63aef31
@ -533,14 +533,20 @@ export default function CourrierPage() {
|
||||
return emails.find(email => email.id === selectedEmail?.id);
|
||||
};
|
||||
|
||||
// Check for stored credentials
|
||||
// Primary initialization effect - check credentials and load emails
|
||||
useEffect(() => {
|
||||
const checkCredentials = async () => {
|
||||
const initialize = async () => {
|
||||
try {
|
||||
console.log('Initializing email client...');
|
||||
setLoading(true);
|
||||
setIsLoadingInitial(true);
|
||||
setError(null);
|
||||
|
||||
// First check stored credentials
|
||||
console.log('Checking for stored credentials...');
|
||||
const response = await fetch('/api/courrier');
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
const credResponse = await fetch('/api/courrier');
|
||||
if (!credResponse.ok) {
|
||||
const errorData = await credResponse.json();
|
||||
console.log('API response error:', errorData);
|
||||
if (errorData.error === 'No stored credentials found') {
|
||||
console.log('No credentials found, redirecting to login...');
|
||||
@ -549,64 +555,51 @@ export default function CourrierPage() {
|
||||
}
|
||||
throw new Error(errorData.error || 'Failed to check credentials');
|
||||
}
|
||||
console.log('Credentials verified, loading emails...');
|
||||
setLoading(false);
|
||||
loadEmails();
|
||||
|
||||
// Then check mail credentials
|
||||
const mailCredResponse = await fetch('/api/courrier/login');
|
||||
if (!mailCredResponse.ok) {
|
||||
throw new Error('Mail credentials not found');
|
||||
}
|
||||
const mailCredData = await mailCredResponse.json();
|
||||
console.log('Mail credentials found:', mailCredData.email);
|
||||
|
||||
// Then load emails with folders
|
||||
console.log('Loading emails and folders...');
|
||||
await loadEmails();
|
||||
|
||||
console.log('Initialization complete');
|
||||
} catch (err) {
|
||||
console.error('Error checking credentials:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to check credentials');
|
||||
console.error('Error initializing email client:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to initialize email client');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setIsLoadingInitial(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkCredentials();
|
||||
initialize();
|
||||
}, [router]);
|
||||
|
||||
// Check for email credentials
|
||||
useEffect(() => {
|
||||
async function checkMailCredentials() {
|
||||
try {
|
||||
const response = await fetch('/api/courrier/login');
|
||||
const data = await response.json();
|
||||
|
||||
if (response.status === 404 || !response.ok) {
|
||||
console.log('Mail credentials not found');
|
||||
setError('Please configure your email account first');
|
||||
// Optionally redirect to login page
|
||||
// router.push('/courrier/login');
|
||||
} else {
|
||||
console.log('Mail credentials found:', data.email);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking mail credentials:', error);
|
||||
}
|
||||
}
|
||||
|
||||
checkMailCredentials();
|
||||
}, []);
|
||||
|
||||
// Update your loadEmails function to properly handle folders
|
||||
// Update your loadEmails function for better debugging
|
||||
const loadEmails = async (isLoadMore = false) => {
|
||||
try {
|
||||
// Don't reload if we're already loading
|
||||
if (isLoadingInitial || isLoadingMore) {
|
||||
// Skip if already loading
|
||||
if (!isLoadMore && (isLoadingInitial || isLoadingMore)) {
|
||||
console.log('Skipping email load - already loading');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isLoadMore) {
|
||||
setIsLoadingMore(true);
|
||||
} else {
|
||||
} else if (!isLoadingInitial) {
|
||||
setLoading(true);
|
||||
}
|
||||
setError(null);
|
||||
|
||||
// Create a cache key for this request
|
||||
const cacheKey = `${currentView}-${page}-${emailsPerPage}`;
|
||||
console.log('Loading emails with params:', { currentView, page, emailsPerPage });
|
||||
console.log(`Loading emails for ${currentView}, page ${page}...`);
|
||||
|
||||
// Add timestamp parameter to force fresh data when needed
|
||||
const timestamp = isLoadMore || page > 1 ? '' : `&_t=${Date.now()}`;
|
||||
const timestamp = `&_t=${Date.now()}`;
|
||||
|
||||
const response = await fetch(
|
||||
`/api/courrier?folder=${encodeURIComponent(currentView)}&page=${page}&limit=${emailsPerPage}${timestamp}`,
|
||||
@ -618,25 +611,11 @@ export default function CourrierPage() {
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log(`Received ${data.emails?.length || 0} emails, ${data.folders?.length || 0} folders`);
|
||||
|
||||
// Get available folders from the API response
|
||||
// Set available folders
|
||||
if (data.folders && data.folders.length > 0) {
|
||||
console.log('Setting available folders:', data.folders);
|
||||
setAvailableFolders(data.folders);
|
||||
|
||||
// Generate sidebar items based on folders
|
||||
const folderSidebarItems = data.folders.map((folderName: string) => ({
|
||||
label: folderName,
|
||||
view: folderName,
|
||||
icon: getFolderIcon(folderName)
|
||||
}));
|
||||
|
||||
// Update the sidebar items
|
||||
setSidebarItems(prevItems => {
|
||||
// Keep standard items (first 5 items) and replace folders
|
||||
const standardItems = initialSidebarItems.slice(0, 5);
|
||||
return [...standardItems, ...folderSidebarItems];
|
||||
});
|
||||
}
|
||||
|
||||
// Process emails keeping exact folder names and sort by date
|
||||
@ -690,6 +669,7 @@ export default function CourrierPage() {
|
||||
setHasMore(data.hasMore);
|
||||
|
||||
setError(null);
|
||||
console.log('Emails loaded successfully');
|
||||
} catch (err) {
|
||||
console.error('Error loading emails:', err);
|
||||
setError('Failed to load emails. Please try again.');
|
||||
@ -917,6 +897,7 @@ export default function CourrierPage() {
|
||||
const renderEmailList = () => {
|
||||
console.log('Rendering email list with state:', {
|
||||
loading,
|
||||
isLoadingInitial,
|
||||
emailCount: emails.length,
|
||||
filteredEmailCount: filteredEmails.length,
|
||||
searchQuery: searchQuery.length > 0 ? searchQuery : 'empty',
|
||||
@ -932,9 +913,12 @@ export default function CourrierPage() {
|
||||
className="flex-1 overflow-y-auto"
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
{loading ? (
|
||||
{loading || isLoadingInitial ? (
|
||||
<div className="flex 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"></div>
|
||||
<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>
|
||||
) : filteredEmails.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-64">
|
||||
@ -947,7 +931,14 @@ export default function CourrierPage() {
|
||||
)}
|
||||
<p className="text-gray-400 text-xs mt-4">Folder: {currentView}</p>
|
||||
<p className="text-gray-400 text-xs mt-1">Total emails: {emails.length}</p>
|
||||
<p className="text-gray-400 text-xs mt-1">Available folders: {availableFolders.length}</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-4"
|
||||
onClick={() => loadEmails()}
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5 mr-1.5" /> Refresh
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-100">
|
||||
@ -1127,33 +1118,42 @@ export default function CourrierPage() {
|
||||
|
||||
{/* Scrollable content area */}
|
||||
<ScrollArea className="flex-1 p-6">
|
||||
<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} <span className="text-gray-500"><{selectedEmail.from}></span>
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
to {selectedEmail.to}
|
||||
</p>
|
||||
{selectedEmail.cc && (
|
||||
<p className="text-sm text-gray-500">
|
||||
cc {selectedEmail.cc}
|
||||
</p>
|
||||
)}
|
||||
{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="text-sm text-gray-500 whitespace-nowrap">
|
||||
{formatDate(new Date(selectedEmail.date))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<Avatar className="h-10 w-10">
|
||||
<AvatarFallback>
|
||||
{selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-gray-900">
|
||||
{selectedEmail.fromName} <span className="text-gray-500"><{selectedEmail.from}></span>
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
to {selectedEmail.to}
|
||||
</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>
|
||||
<div className="prose max-w-none">
|
||||
{renderEmailContent(selectedEmail)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</>
|
||||
) : (
|
||||
@ -1575,6 +1575,19 @@ export default function CourrierPage() {
|
||||
);
|
||||
}
|
||||
|
||||
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 */}
|
||||
@ -1615,7 +1628,10 @@ export default function CourrierPage() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleMailboxChange('INBOX')}
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
loadEmails();
|
||||
}}
|
||||
className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user