Trying to figure out avatar urls. Not easy.

src/lib/hooks/status.ts

@@ -1,12 +1,13 @@
 'use client';
 import { createClient } from '@/utils/supabase';
 import type { Profile, Result } from '@/utils/supabase';
-import { getUser, getProfile } from '@/lib/hooks';
+import { getUser, getProfile, getSignedUrl } from '@/lib/hooks';
 
 export type UserWithStatus = {
   id?: string;
   user: Profile;
   status: string;
+  avatar_url?: string;
   created_at: string;
   updated_by?: Profile;
 };
@@ -53,7 +54,21 @@ export const getRecentUsersWithStatuses = async (): Promise<
       return true;
     });
 
-    return { success: true, data: filtered };
+    const filteredWithAvatars: UserWithStatus[] = filtered;
+
+    for (let userWithStatus of filteredWithAvatars) {
+      if (!userWithStatus.user.avatar_url) continue;
+      const avatarResponse = await getSignedUrl({
+        bucket: 'avatars',
+        url: userWithStatus.user.avatar_url,
+        transform: { width: 128, height: 128 },
+      });
+      if (!avatarResponse.success) continue;
+      else userWithStatus = { ...userWithStatus, avatar_url: avatarResponse.data };
+    }
+    console.log('filteredWithAvatars', filteredWithAvatars);
+
+    return { success: true, data: filteredWithAvatars };
   } catch (error) {
     return { success: false, error: `Error: ${error as Error}` };
   }