alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

panel 2 courier api restore

Browse Source
This commit is contained in:
alma 2025-04-25 19:13:24 +02:00
parent ce62025bea
commit 84713f4630
1 changed files with 91 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
app/courrier/page.tsx
View File

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