Refactor gallery items

VernissageApp · Jan 1, 2025 · 2a3ad1d · 2a3ad1d
1 parent 6b683e9
commit 2a3ad1d
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 51 deletions.
diff --git a/src/app/components/widgets/category-gallery-item/category-gallery-item.component.html b/src/app/components/widgets/category-gallery-item/category-gallery-item.component.html
@@ -6,19 +6,21 @@
     </div>
     <div class="images-container">
         <div class="flex-row">
-            <ng-container *ngFor="let status of statuses?.data; trackBy:trackByFn">
-                <a [routerLink]="['/statuses', status.id]" [ariaLabel]="'Status added by: ' + getMainStatus(status).user?.userName" (click)="onStatusClick()">
-                    @if (getMainStatus(status).sensitive && !alwaysShowNSFW) {
-                        <div @fadeIn class="blurhash">
-                            <app-blurhash-image [horizontal]="true" [status]="status"></app-blurhash-image>
-                        </div>
-                    } @else {
-                        <div @fadeIn class="image">
-                            <app-image [horizontal]="true" [status]="status"></app-image>
-                        </div>
-                    }
-                </a>
-            </ng-container>
+            @if (statuses && statuses.data) {
+                @for (status of statuses.data; track status.id) {
+                    <a [routerLink]="['/statuses', status.id]" [ariaLabel]="'Status added by: ' + getMainStatus(status).user?.userName" (click)="onStatusClick()">
+                        @if (getMainStatus(status).sensitive && !alwaysShowNSFW) {
+                            <div @fadeIn class="blurhash">
+                                <app-blurhash-image [horizontal]="true" [status]="status"></app-blurhash-image>
+                            </div>
+                        } @else {
+                            <div @fadeIn class="image">
+                                <app-image [horizontal]="true" [status]="status"></app-image>
+                            </div>
+                        }
+                    </a>
+                }
+            }
         </div>
     </div>
 </div>
diff --git a/src/app/components/widgets/category-gallery-item/category-gallery-item.component.ts b/src/app/components/widgets/category-gallery-item/category-gallery-item.component.ts
@@ -42,10 +42,6 @@ export class CategoryGalleryItemComponent extends ResponsiveComponent implements
         this.statuses = await this.timelineService.category(this.category.name, undefined, undefined, undefined, this.numberOfVisibleStatuses, undefined);
     }
 
-    trackByFn(_: number, item: Status): string {
-        return item.id;
-    }
-
     getMainStatus(status: Status): Status {
         return status.reblog ?? status;
     }

diff --git a/src/app/components/widgets/hashtag-gallery-item/hashtag-gallery-item.component.html b/src/app/components/widgets/hashtag-gallery-item/hashtag-gallery-item.component.html
@@ -6,19 +6,21 @@
     </div>
     <div class="images-container">
         <div class="flex-row">
-            <ng-container *ngFor="let status of statuses?.data; trackBy:trackByFn">
-                <a [routerLink]="['/statuses', status.id]" [ariaLabel]="'Status added by: ' + getMainStatus(status).user?.userName" (click)="onStatusClick()">
-                    @if (getMainStatus(status).sensitive && !alwaysShowNSFW) {
-                        <div @fadeIn class="blurhash">
-                            <app-blurhash-image [horizontal]="true" [status]="status"></app-blurhash-image>
-                        </div>
-                    } @else {
-                        <div @fadeIn class="image">
-                            <app-image [horizontal]="true" [status]="status"></app-image>
-                        </div>
-                    }
-                </a>
-            </ng-container>
+            @if (statuses && statuses.data) {
+                @for (status of statuses.data; track status.id) {
+                    <a [routerLink]="['/statuses', status.id]" [ariaLabel]="'Status added by: ' + getMainStatus(status).user?.userName" (click)="onStatusClick()">
+                        @if (getMainStatus(status).sensitive && !alwaysShowNSFW) {
+                            <div @fadeIn class="blurhash">
+                                <app-blurhash-image [horizontal]="true" [status]="status"></app-blurhash-image>
+                            </div>
+                        } @else {
+                            <div @fadeIn class="image">
+                                <app-image [horizontal]="true" [status]="status"></app-image>
+                            </div>
+                        }
+                    </a>
+                }
+            }
         </div>
     </div>
 </div>
diff --git a/src/app/components/widgets/hashtag-gallery-item/hashtag-gallery-item.component.ts b/src/app/components/widgets/hashtag-gallery-item/hashtag-gallery-item.component.ts
@@ -42,10 +42,6 @@ export class HashtagGalleryItemComponent extends ResponsiveComponent implements
         this.statuses = await this.timelineService.hashtag(this.hashtag.name, undefined, undefined, undefined, this.numberOfVisibleStatuses, undefined);
     }
 
-    trackByFn(_: number, item: Status): string | undefined{
-        return item.id;
-    }
-
     getMainStatus(status: Status): Status {
         return status.reblog ?? status;
     }

diff --git a/src/app/components/widgets/users-gallery-item/users-gallery-item.component.html b/src/app/components/widgets/users-gallery-item/users-gallery-item.component.html
@@ -2,19 +2,21 @@
     <app-user-card [user]="user"></app-user-card>
     <div class="images-container">
         <div class="flex-row">
-            <ng-container *ngFor="let status of statuses?.data; trackBy:trackByFn">
-                <a [routerLink]="['/statuses', status.id]" [ariaLabel]="'Status added by: ' + getMainStatus(status).user?.userName" (click)="onStatusClick()">
-                    @if (getMainStatus(status).sensitive && !alwaysShowNSFW) {
-                        <div @fadeIn class="blurhash">
-                            <app-blurhash-image [horizontal]="true" [status]="status" [avatarVisible]="false"></app-blurhash-image>
-                        </div>
-                    } @else {
-                        <div @fadeIn class="image">
-                            <app-image [horizontal]="true" [status]="status" [avatarVisible]="false"></app-image>
-                        </div>
-                    }
-                </a>
-            </ng-container>
+            @if (statuses && statuses.data) {
+                @for (status of statuses.data; track status.id) {
+                    <a [routerLink]="['/statuses', status.id]" [ariaLabel]="'Status added by: ' + getMainStatus(status).user?.userName" (click)="onStatusClick()">
+                        @if (getMainStatus(status).sensitive && !alwaysShowNSFW) {
+                            <div @fadeIn class="blurhash">
+                                <app-blurhash-image [horizontal]="true" [status]="status" [avatarVisible]="false"></app-blurhash-image>
+                            </div>
+                        } @else {
+                            <div @fadeIn class="image">
+                                <app-image [horizontal]="true" [status]="status" [avatarVisible]="false"></app-image>
+                            </div>
+                        }
+                    </a>
+                }
+            }
         </div>
     </div>
 </div>
diff --git a/src/app/components/widgets/users-gallery-item/users-gallery-item.component.ts b/src/app/components/widgets/users-gallery-item/users-gallery-item.component.ts
@@ -44,10 +44,6 @@ export class UsersGalleryItemComponent extends ResponsiveComponent implements On
         }
     }
 
-    trackByFn(_: number, item: Status): string | undefined{
-        return item.id;
-    }
-
     getMainStatus(status: Status): Status {
         return status.reblog ?? status;
     }