Mail Widget

app/api/courrier/route.ts

@@ -40,9 +40,10 @@ export async function GET(request: Request) {
     const searchQuery = searchParams.get("search") || "";
     const accountId = searchParams.get("accountId") || "";
     const checkOnly = searchParams.get("checkOnly") === "true";
+    const refresh = searchParams.get("refresh") === "true";
     
     // CRITICAL FIX: Log exact parameters received by the API
-    console.log(`[API] Received request with: folder=${folder}, accountId=${accountId}, page=${page}, checkOnly=${checkOnly}`);
+    console.log(`[API] Received request with: folder=${folder}, accountId=${accountId}, page=${page}, checkOnly=${checkOnly}, refresh=${refresh}`);
     
     // CRITICAL FIX: More robust parameter normalization
     // 1. If folder contains an account prefix, extract it but DO NOT use it
@@ -62,8 +63,14 @@ export async function GET(request: Request) {
     // CRITICAL FIX: Enhanced logging for parameter resolution
     console.log(`[API] Using normalized parameters: folder=${normalizedFolder}, accountId=${effectiveAccountId}`);
     
-    // Try to get from Redis cache first, but only if it's not a search query and not checkOnly
-    if (!searchQuery && !checkOnly) {
+    // If refresh=true, invalidate cache before fetching
+    if (refresh) {
+      console.log(`[API] Refresh requested - invalidating cache for ${session.user.id}:${effectiveAccountId}:${normalizedFolder}`);
+      await invalidateFolderCache(session.user.id, effectiveAccountId, normalizedFolder);
+    }
+    
+    // Try to get from Redis cache first, but only if it's not a search query, not checkOnly, and not refresh
+    if (!searchQuery && !checkOnly && !refresh) {
       // CRITICAL FIX: Use consistent cache key format with the correct account ID
       console.log(`[API] Checking Redis cache for ${session.user.id}:${effectiveAccountId}:${normalizedFolder}:${page}:${perPage}`);
       const cachedEmails = await getCachedEmailList(

components/email/EmailLayout.tsx

@@ -35,6 +35,7 @@ export default function EmailLayout({ className = '' }: EmailLayoutProps) {
     email: string;
     display_name?: string;
   }>>([]);
+  const [selectedAccountId, setSelectedAccountId] = useState<string>('');
   
   // UI state
   const [loading, setLoading] = useState<boolean>(true);
@@ -50,11 +51,17 @@ export default function EmailLayout({ className = '' }: EmailLayoutProps) {
   const { toast } = useToast();
   const { data: session } = useSession();
   
-  // Load emails on component mount and when folder changes
+  // Load accounts on component mount
   useEffect(() => {
-    loadEmails();
-    loadAccounts(); // Load accounts when component mounts
-  }, [currentFolder, page]);
+    loadAccounts();
+  }, []);
+  
+  // Load emails when folder, page, or selected account changes
+  useEffect(() => {
+    if (selectedAccountId || accounts.length > 0) {
+      loadEmails();
+    }
+  }, [currentFolder, page, selectedAccountId]);
   
   // Function to load emails
   const loadEmails = async (refresh = false) => {
@@ -70,9 +77,15 @@ export default function EmailLayout({ className = '' }: EmailLayoutProps) {
       const queryParams = new URLSearchParams({
         folder: currentFolder,
         page: page.toString(),
-        perPage: '20'
+        perPage: '20',
+        refresh: refresh.toString()
       });
       
+      // Add accountId if a specific account is selected
+      if (selectedAccountId) {
+        queryParams.set('accountId', selectedAccountId);
+      }
+      
       if (searchQuery) {
         queryParams.set('search', searchQuery);
       }
@@ -129,11 +142,17 @@ export default function EmailLayout({ className = '' }: EmailLayoutProps) {
       if (response.ok) {
         const data = await response.json();
         if (data.accounts) {
-          setAccounts(data.accounts.map((acc: any) => ({
+          const loadedAccounts = data.accounts.map((acc: any) => ({
             id: acc.id || acc.email,
             email: acc.email,
             display_name: acc.display_name
-          })));
+          }));
+          setAccounts(loadedAccounts);
+          
+          // Auto-select the first account if none is selected
+          if (!selectedAccountId && loadedAccounts.length > 0) {
+            setSelectedAccountId(loadedAccounts[0].id);
+          }
         }
       }
     } catch (err) {
@@ -270,6 +289,28 @@ export default function EmailLayout({ className = '' }: EmailLayoutProps) {
     <div className={`flex h-full bg-background ${className}`}>
       {/* Sidebar */}
       <div className="w-64 border-r h-full flex flex-col">
+        {/* Account selector */}
+        {accounts.length > 1 && (
+          <div className="p-4 border-b">
+            <label className="text-sm font-medium mb-2 block">Account</label>
+            <select
+              value={selectedAccountId}
+              onChange={(e) => {
+                setSelectedAccountId(e.target.value);
+                setPage(1);
+                setEmails([]);
+              }}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+            >
+              {accounts.map((account) => (
+                <option key={account.id} value={account.id}>
+                  {account.display_name || account.email}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+        
         {/* New email button */}
         <div className="p-4">
           <Button