feat(web): display number of likes in asset viewer (#18911)

* feat: display number of likes

* fix: properly decrement like count on unlike

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

* chore: pr feedback

* chore: updated related test

* chore: formatter run

* chore: force numberOfLikes to null in album context to pass lint

* chore: open-api updated

* fix: use undefined, not null

* styling tweaks

* chore: updated sql

---------

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

server/src/dtos/activity.dto.ts

@@ -29,6 +29,9 @@ export class ActivityResponseDto {
 export class ActivityStatisticsResponseDto {
   @ApiProperty({ type: 'integer' })
   comments!: number;
+
+  @ApiProperty({ type: 'integer' })
+  likes!: number;
 }
 
 export class ActivityDto {

server/src/queries/activity.repository.sql

@@ -62,15 +62,21 @@ where
 
 -- ActivityRepository.getStatistics
 select
-  count(*) as "count"
+  count(*) filter (
+    where
+      "activity"."isLiked" = $1
+  ) as "comments",
+  count(*) filter (
+    where
+      "activity"."isLiked" = $2
+  ) as "likes"
 from
   "activity"
   inner join "users" on "users"."id" = "activity"."userId"
   and "users"."deletedAt" is null
   left join "assets" on "assets"."id" = "activity"."assetId"
 where
-  "activity"."assetId" = $1
-  and "activity"."albumId" = $2
-  and "activity"."isLiked" = $3
+  "activity"."assetId" = $3
+  and "activity"."albumId" = $4
   and "assets"."deletedAt" is null
   and "assets"."visibility" != 'locked'

server/src/repositories/activity.repository.ts

@@ -67,19 +67,27 @@ export class ActivityRepository {
   }
 
   @GenerateSql({ params: [{ albumId: DummyValue.UUID, assetId: DummyValue.UUID }] })
-  async getStatistics({ albumId, assetId }: { albumId: string; assetId?: string }): Promise<number> {
-    const { count } = await this.db
+  async getStatistics({
+    albumId,
+    assetId,
+  }: {
+    albumId: string;
+    assetId?: string;
+  }): Promise<{ comments: number; likes: number }> {
+    const result = await this.db
       .selectFrom('activity')
-      .select((eb) => eb.fn.countAll<number>().as('count'))
+      .select((eb) => [
+        eb.fn.countAll<number>().filterWhere('activity.isLiked', '=', false).as('comments'),
+        eb.fn.countAll<number>().filterWhere('activity.isLiked', '=', true).as('likes'),
+      ])
       .innerJoin('users', (join) => join.onRef('users.id', '=', 'activity.userId').on('users.deletedAt', 'is', null))
       .leftJoin('assets', 'assets.id', 'activity.assetId')
       .$if(!!assetId, (qb) => qb.where('activity.assetId', '=', assetId!))
       .where('activity.albumId', '=', albumId)
-      .where('activity.isLiked', '=', false)
       .where('assets.deletedAt', 'is', null)
       .where('assets.visibility', '!=', sql.lit(AssetVisibility.LOCKED))
       .executeTakeFirstOrThrow();
 
-    return count;
+    return result;
   }
 }

server/src/services/activity.service.spec.ts

@@ -54,13 +54,13 @@ describe(ActivityService.name, () => {
   });
 
   describe('getStatistics', () => {
-    it('should get the comment count', async () => {
+    it('should get the comment and like count', async () => {
       const [albumId, assetId] = newUuids();
 
-      mocks.activity.getStatistics.mockResolvedValue(1);
+      mocks.activity.getStatistics.mockResolvedValue({ comments: 1, likes: 3 });
       mocks.access.album.checkOwnerAccess.mockResolvedValue(new Set([albumId]));
 
-      await expect(sut.getStatistics(factory.auth(), { assetId, albumId })).resolves.toEqual({ comments: 1 });
+      await expect(sut.getStatistics(factory.auth(), { assetId, albumId })).resolves.toEqual({ comments: 1, likes: 3 });
     });
   });
 

server/src/services/activity.service.ts

@@ -31,7 +31,7 @@ export class ActivityService extends BaseService {
 
   async getStatistics(auth: AuthDto, dto: ActivityDto): Promise<ActivityStatisticsResponseDto> {
     await this.requireAccess({ auth, permission: Permission.ALBUM_READ, ids: [dto.albumId] });
-    return { comments: await this.activityRepository.getStatistics({ albumId: dto.albumId, assetId: dto.assetId }) };
+    return await this.activityRepository.getStatistics({ albumId: dto.albumId, assetId: dto.assetId });
   }
 
   async create(auth: AuthDto, dto: ActivityCreateDto): Promise<MaybeDuplicate<ActivityResponseDto>> {