From 9e4704a75f131c0aa6ca5381eb8a4f0c56fff52c Mon Sep 17 00:00:00 2001
From: Fabien 'egg' O'Carroll <fabien@allou.is>
Date: Fri, 13 Sep 2024 16:14:23 +0700
Subject: [PATCH] Fixed the rendering of object attachments (#21001)

Pulled out the logic of finding the attachment(s) into a shared
function, which will only return an array if there are multiple
attachments, otherwise either null or an object will be returned.

This fixes an issue where the code assumed that an array meant
we have multiple attachments
---
 .../src/components/feed/FeedItem.tsx          | 43 +++++++++++--------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx b/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx
index 452cd79eb0..7fbde98764 100644
--- a/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx
+++ b/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx
@@ -9,7 +9,7 @@ import getUsername from '../../utils/get-username';
 import {type Activity} from '../activities/ActivityItem';
 import {useLikeMutationForUser, useUnlikeMutationForUser} from '../../hooks/useActivityPubQueries';
 
-export function renderFeedAttachment(object: ObjectProperties, layout: string) {
+function getAttachment(object: ObjectProperties) {
     let attachment;
     if (object.image) {
         attachment = object.image;
@@ -23,6 +23,25 @@ export function renderFeedAttachment(object: ObjectProperties, layout: string) {
         return null;
     }
 
+    if (Array.isArray(attachment)) {
+        if (attachment.length === 0) {
+            return null;
+        }
+        if (attachment.length === 1) {
+            return attachment[0];
+        }
+    }
+
+    return attachment;
+}
+
+export function renderFeedAttachment(object: ObjectProperties, layout: string) {
+    const attachment = getAttachment(object);
+
+    if (!attachment) {
+        return null;
+    }
+
     if (Array.isArray(attachment)) {
         const attachmentCount = attachment.length;
 
@@ -66,14 +85,7 @@ export function renderFeedAttachment(object: ObjectProperties, layout: string) {
 }
 
 function renderInboxAttachment(object: ObjectProperties) {
-    let attachment;
-    if (object.image) {
-        attachment = object.image;
-    }
-
-    if (object.type === 'Note' && !attachment) {
-        attachment = object.attachment;
-    }
+    const attachment = getAttachment(object);
 
     if (!attachment) {
         return null;
@@ -81,18 +93,13 @@ function renderInboxAttachment(object: ObjectProperties) {
 
     if (Array.isArray(attachment)) {
         const attachmentCount = attachment.length;
-        // let gridClass = '';
-        // if (attachmentCount === 2) {
-        //     gridClass = 'grid-cols-2 auto-rows-[150px]'; // Two images, side by side
-        // } else if (attachmentCount === 3 || attachmentCount === 4) {
-        //     gridClass = 'grid-cols-2 auto-rows-[150px]'; // Three or four images, two per row
-        // }
+
         return (
             <div className='min-w-[160px]'>
-                {attachment[0] && <div className='relative'>
+                <div className='relative'>
                     <img className={`h-[100px] w-[160px] rounded-md object-cover`} src={attachment[0].url} />
                     <div className='absolute bottom-1 right-1 z-10 rounded-full border border-[rgba(255,255,255,0.25)] bg-black px-2 py-0.5 font-semibold text-white'>+ {attachmentCount - 1}</div>
-                </div>}
+                </div>
             </div>
         );
     }
@@ -103,7 +110,7 @@ function renderInboxAttachment(object: ObjectProperties) {
     case 'image/gif':
         return (
             <div className='min-w-[160px]'>
-                {attachment && <img className={`h-[100px] w-[160px] rounded-md object-cover`} src={attachment.url} />}
+                <img className={`h-[100px] w-[160px] rounded-md object-cover`} src={attachment.url} />
             </div>
         );
     case 'video/mp4':