panel 2 courier api restore
This commit is contained in:
parent
ce62025bea
commit
84713f4630
@ -456,7 +456,7 @@ export default function CourrierPage() {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
||||
const [composeOpen, setComposeOpen] = useState(false);
|
||||
const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(false);
|
||||
const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(true);
|
||||
const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
|
||||
const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
|
||||
const [showEmailActions, setShowEmailActions] = useState(false);
|
||||
@ -566,17 +566,27 @@ export default function CourrierPage() {
|
||||
|
||||
const data = await emailResponse.json();
|
||||
console.log(`Loaded ${data.emails?.length || 0} emails`);
|
||||
console.log('API response data:', {
|
||||
emailCount: data.emails?.length || 0,
|
||||
folderCount: data.folders?.length || 0
|
||||
});
|
||||
|
||||
// Set available folders if present
|
||||
if (data.folders) {
|
||||
console.log('Setting folders from initialization:', data.folders);
|
||||
setAvailableFolders(data.folders);
|
||||
|
||||
// Update the mail account with folders
|
||||
setAccounts(prev => prev.map(account =>
|
||||
account.id === 1
|
||||
? { ...account, folders: data.folders }
|
||||
: account
|
||||
));
|
||||
setAccounts(prev => {
|
||||
console.log('Updating accounts with folders');
|
||||
return prev.map(account =>
|
||||
account.id === 1
|
||||
? { ...account, folders: data.folders }
|
||||
: account
|
||||
);
|
||||
});
|
||||
} else {
|
||||
console.warn('No folders returned from API during initialization');
|
||||
}
|
||||
|
||||
// Process emails and sort by date
|
||||
@ -861,22 +871,25 @@ export default function CourrierPage() {
|
||||
</div>
|
||||
) : filteredEmails.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-64">
|
||||
<Mail className="h-8 w-8 text-gray-400 mb-2" />
|
||||
<p className="text-gray-500 text-sm">
|
||||
<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-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-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="outline"
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="mt-4"
|
||||
onClick={() => loadEmails()}
|
||||
className="mt-5 bg-blue-600 hover:bg-blue-700"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
loadEmails();
|
||||
}}
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5 mr-1.5" /> Refresh
|
||||
<RefreshCw className="h-4 w-4 mr-2" /> Refresh Folder
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
@ -1445,9 +1458,12 @@ export default function CourrierPage() {
|
||||
try {
|
||||
// Skip if already loading
|
||||
if (isLoadingInitial || isLoadingMore) {
|
||||
console.log('Skipping loadEmails - already loading');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`Loading emails for folder: ${currentView}, page: ${page}, isLoadMore: ${isLoadMore}`);
|
||||
|
||||
if (isLoadMore) {
|
||||
setIsLoadingMore(true);
|
||||
} else {
|
||||
@ -1462,14 +1478,31 @@ export default function CourrierPage() {
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error('API response error:', response.status, response.statusText);
|
||||
throw new Error('Failed to load emails');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('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('Setting available folders:', data.folders);
|
||||
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('No folders returned from API');
|
||||
}
|
||||
|
||||
// Process and sort emails
|
||||
@ -1643,36 +1676,57 @@ export default function CourrierPage() {
|
||||
</Button>
|
||||
|
||||
{/* Show folders for email accounts (not for "All" account) */}
|
||||
{account.id !== 0 && account.folders && account.folders.length > 0 && (
|
||||
<div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-100">
|
||||
<div className="px-2 py-1 text-xs text-gray-400 font-medium">
|
||||
Folders
|
||||
</div>
|
||||
{account.folders.map((folder) => (
|
||||
{account.id !== 0 && (
|
||||
<div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-200">
|
||||
<div className="px-2 py-1 text-xs text-gray-500 font-medium flex justify-between items-center">
|
||||
<span>Folders</span>
|
||||
<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'
|
||||
}`}
|
||||
size="icon"
|
||||
className="h-5 w-5 text-gray-400 hover:text-gray-600"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleMailboxChange(folder);
|
||||
setLoading(true);
|
||||
loadEmails();
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<RefreshCw className="h-3 w-3" />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
{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 text-xs text-gray-400">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<RefreshCw className="h-3 w-3" />
|
||||
<span>Loading folders...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user