feat: Migrate to gRPC pictures.UserSummary(), flop, normalize, deleteSimilar

Author: autowp

src/app/account/account.component.ts

@@ -38,7 +38,7 @@ export class AccountComponent {
       shareReplay(1),
     ),
     this.messageService.getSummary$(),
-    this.pictureService.getSummary$(),
+    this.pictureService.summary$,
   ]).pipe(
     map(([user, forumSummary, messageSummary, picturesSummary]) => {
       if (!user) {
@@ -76,14 +76,14 @@ export class AccountComponent {
           routerLink: ['/account/accounts'],
         },
         {
-          count: picturesSummary ? picturesSummary.acceptedCount : undefined,
+          count: picturesSummary?.acceptedCount,
           icon: 'bi-grid-3x2-gap-fill',
           name: $localize`My pictures`,
           pageId: 130,
           routerLink: ['/users', user.identity ? user.identity : 'user' + user.id, 'pictures'],
         },
         {
-          count: picturesSummary ? picturesSummary.inboxCount : undefined,
+          count: picturesSummary?.inboxCount,
           icon: 'bi-grid-3x2-gap-fill',
           name: $localize`Unmoderated`,
           pageId: 94,

src/app/moder/pictures/item/item.component.html

@@ -434,7 +434,7 @@ <h3 *ngIf="picture.rights.normalize || picture.rights.flop || picture.rights.cro
         <div>
           <button
             class="btn btn-warning"
-            (click)="normalizePicture(picture.id)"
+            (click)="normalizePicture('' + picture.id)"
             *ngIf="picture.rights.normalize"
             [disabled]="repairLoading"
           >
@@ -443,7 +443,7 @@ <h3 *ngIf="picture.rights.normalize || picture.rights.flop || picture.rights.cro
           </button>
           <button
             class="btn btn-warning"
-            (click)="flopPicture(picture.id)"
+            (click)="flopPicture('' + picture.id)"
             *ngIf="picture.rights.flop"
             [disabled]="repairLoading"
           >

src/app/moder/pictures/item/item.component.ts

@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {APIIP, APIUser, ItemFields, ItemRequest, ItemType} from '@grpc/spec.pb';
+import {APIIP, APIUser, DeleteSimilarRequest, ItemFields, ItemRequest, ItemType, PictureIDRequest} from '@grpc/spec.pb';
 import {APIItem} from '@grpc/spec.pb';
-import {ItemsClient} from '@grpc/spec.pbsc';
+import {ItemsClient, PicturesClient} from '@grpc/spec.pbsc';
 import {GrpcStatusEvent} from '@ngx-grpc/common';
 import {APIService} from '@services/api.service';
 import {IpService} from '@services/ip';
@@ -172,6 +172,7 @@ export class ModerPicturesItemComponent {
     private readonly ipService: IpService,
     private readonly itemsClient: ItemsClient,
     private readonly userService: UserService,
+    private readonly picturesClient: PicturesClient,
   ) {
     this.monthOptions = [
       {
@@ -323,9 +324,9 @@ export class ModerPicturesItemComponent {
     this.setPictureStatus(id, 'inbox');
   }
 
-  protected normalizePicture(id: number) {
+  protected normalizePicture(id: string) {
     this.repairLoading = true;
-    this.api.request<void>('PUT', 'picture/' + id + '/normalize', {}).subscribe({
+    this.picturesClient.normalize(new PictureIDRequest({id})).subscribe({
       error: () => {
         this.repairLoading = false;
       },
@@ -336,9 +337,9 @@ export class ModerPicturesItemComponent {
     });
   }
 
-  protected flopPicture(id: number) {
+  protected flopPicture(id: string) {
     this.repairLoading = true;
-    this.api.request<void>('PUT', 'picture/' + id + '/flop', {}).subscribe({
+    this.picturesClient.flop(new PictureIDRequest({id})).subscribe({
       error: () => {
         this.repairLoading = false;
       },
@@ -377,15 +378,17 @@ export class ModerPicturesItemComponent {
 
   protected cancelSimilar(picture: APIPicture) {
     this.similarLoading = true;
-    this.api.request<void>('DELETE', 'picture/' + picture.id + '/similar/' + picture.similar.picture_id).subscribe({
-      error: () => {
-        this.similarLoading = false;
-      },
-      next: () => {
-        this.change$.next();
-        this.similarLoading = false;
-      },
-    });
+    this.picturesClient
+      .deleteSimilar(new DeleteSimilarRequest({id: '' + picture.id, similarPictureId: '' + picture.similar.picture_id}))
+      .subscribe({
+        error: () => {
+          this.similarLoading = false;
+        },
+        next: () => {
+          this.change$.next();
+          this.similarLoading = false;
+        },
+      });
   }
 
   protected deletePictureItem(item: APIPictureItem) {

src/app/services/picture.ts

@@ -1,6 +1,7 @@
 import {Injectable} from '@angular/core';
-import {PicturesVoteRequest, PicturesVoteSummary} from '@grpc/spec.pb';
+import {PicturesUserSummary, PicturesVoteRequest, PicturesVoteSummary} from '@grpc/spec.pb';
 import {PicturesClient} from '@grpc/spec.pbsc';
+import {Empty} from '@ngx-grpc/well-known-types';
 import {Observable, of} from 'rxjs';
 import {map, shareReplay, switchMap} from 'rxjs/operators';
 
@@ -200,11 +201,6 @@ export interface APIGetPicturesOptions {
   status?: string;
 }
 
-export interface APIPictureUserSummary {
-  acceptedCount: number;
-  inboxCount: number;
-}
-
 function convertPictureOptions(options: APIGetPictureOptions): {[param: string]: string} {
   const params: {[param: string]: string} = {};
 
@@ -352,12 +348,12 @@ function converPicturesOptions(options: APIGetPicturesOptions): {[param: string]
 
 @Injectable()
 export class PictureService {
-  private readonly summary$: Observable<APIPictureUserSummary | null> = this.auth.getUser$().pipe(
+  public readonly summary$: Observable<PicturesUserSummary | null> = this.auth.getUser$().pipe(
     switchMap((user) => {
       if (!user) {
         return of(null);
       }
-      return this.api.request<APIPictureUserSummary>('GET', 'picture/user-summary');
+      return this.pictures.getUserSummary(new Empty());
     }),
     shareReplay(1),
   );
@@ -407,10 +403,6 @@ export class PictureService {
     });
   }
 
-  public getSummary$(): Observable<APIPictureUserSummary | null> {
-    return this.summary$;
-  }
-
   public getInboxSize$(): Observable<null | number> {
     return this.inboxSize$;
   }