panel 2 courier api restore

app/courrier/page.tsx

@@ -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');
+        const credResponse = await fetch('/api/courrier');
-        if (!response.ok) {
+        if (!credResponse.ok) {
-          const errorData = await response.json();
+          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);
+        // Then check mail credentials
-        loadEmails();
+        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);
+        console.error('Error initializing email client:', err);
-        setError(err instanceof Error ? err.message : 'Failed to check credentials');
+        setError(err instanceof Error ? err.message : 'Failed to initialize email client');
+      } finally {
         setLoading(false);
+        setIsLoadingInitial(false);
       }
     };
 
-    checkCredentials();
+    initialize();
   }, [router]);
 
-  // Check for email credentials
+  // Update your loadEmails function for better debugging
-  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
   const loadEmails = async (isLoadMore = false) => {
     try {
-      // Don't reload if we're already loading
+      // Skip if already loading
-      if (isLoadingInitial || isLoadingMore) {
+      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
+      console.log(`Loading emails for ${currentView}, page ${page}...`);
-      const cacheKey = `${currentView}-${page}-${emailsPerPage}`;
-      console.log('Loading emails with params:', { currentView, page, emailsPerPage });
       
       // 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">
+              {contentLoading ? (
-                <Avatar className="h-10 w-10">
+                <div className="flex flex-col items-center justify-center h-64">
-                  <AvatarFallback>
+                  <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-4"></div>
-                    {selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
+                  <p className="text-sm text-gray-500">Loading email content...</p>
-                  </AvatarFallback>
-                </Avatar>
-                <div className="flex-1">
-                  <p className="font-medium text-gray-900">
-                    {selectedEmail.fromName} <span className="text-gray-500">&lt;{selectedEmail.from}&gt;</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 className="flex items-center gap-4 mb-6">
-              </div>
+                    <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">&lt;{selectedEmail.from}&gt;</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">
+                  <div className="prose max-w-none">
-                {renderEmailContent(selectedEmail)}
+                    {renderEmailContent(selectedEmail)}
-              </div>
+                  </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" />