feat: add tracks, dump dependencies

Author: autowp

package-lock.json

@@ -11,7 +11,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/architect": "^0.1800.6",
+    "@angular-devkit/architect": "^0.1802.2",
     "@angular-devkit/build-angular": "^18.0.6",
     "@angular/animations": "^18.0.5",
     "@angular/cdk": "^18",
@@ -71,12 +71,12 @@
     "@types/node": "^20.4.5",
     "@types/showdown": "^2.0.6",
     "@types/sprintf-js": "^1.1.4",
-    "@typescript-eslint/eslint-plugin": "^7",
-    "@typescript-eslint/parser": "^7",
+    "@typescript-eslint/eslint-plugin": "^7 || ^8",
+    "@typescript-eslint/parser": "^7 || ^8",
     "eslint": "^8.45.0 || ^9",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-json": "^4",
-    "eslint-plugin-perfectionist": "^2.2.0",
+    "eslint-plugin-perfectionist": "^2.2.0 || ^3",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-rxjs": "^5.0.2",
     "eslint-plugin-rxjs-angular": "^2.0.0",

package.json

@@ -4,7 +4,7 @@ <h1 i18n>My accounts</h1>
 @if (accounts$ | async; as accounts) {
   @if (accounts.length > 0 && !disconnectFailed) {
     <div class="card card-body mb-4">
-      @for (account of accounts; track account) {
+      @for (account of accounts; track account.id) {
         <div>
           <p>
             @if (account.can_remove) {

src/app/account/accounts/accounts.component.html

@@ -2,7 +2,7 @@
   <h1 i18n>Contacts</h1>
 </div>
 <div class="row">
-  @for (contact of items; track contact) {
+  @for (contact of items$ | async; track contact.contactUserId) {
     <div class="col-md-6 mb-2">
       <div class="d-flex justify-content-start">
         <div class="align-self-start me-3">

src/app/account/contacts/contacts.component.html

@@ -1,22 +1,44 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Contact, DeleteContactRequest} from '@grpc/spec.pb';
 import {ContactsClient} from '@grpc/spec.pbsc';
 import {AuthService} from '@services/auth.service';
 import {ContactsService} from '@services/contacts';
 import {LanguageService} from '@services/language';
 import {PageEnvService} from '@services/page-env.service';
 import {KeycloakService} from 'keycloak-angular';
-import {EMPTY} from 'rxjs';
-import {map, switchMap} from 'rxjs/operators';
+import {BehaviorSubject, EMPTY, Observable} from 'rxjs';
+import {catchError, map, switchMap} from 'rxjs/operators'; 
 
 import {ToastsService} from '../../toasts/toasts.service';
 
 @Component({
   selector: 'app-account-contacts',
   templateUrl: './contacts.component.html',
 })
-export class AccountContactsComponent {
-  protected items: Contact[] = [];
+export class AccountContactsComponent implements OnInit {
+  private readonly reload$ = new BehaviorSubject<void>(void 0);
+
+  protected readonly items$: Observable<Contact[]> = this.auth
+    .getUser$()
+    .pipe(
+      map((user) => {
+        if (!user) {
+          this.keycloak.login({
+            locale: this.languageService.language,
+            redirectUri: window.location.href,
+          });
+          return EMPTY;
+        }
+        return user;
+      }),
+      switchMap(() => this.reload$),
+      switchMap(() => this.contactsService.getContacts$()),
+      catchError((error) => {
+        this.toastService.handleError(error);
+        return EMPTY;
+      }),
+      map(response => response.items || [])
+    );
 
   constructor(
     private readonly contactsService: ContactsService,
@@ -27,41 +49,17 @@ export class AccountContactsComponent {
     private readonly languageService: LanguageService,
     private readonly keycloak: KeycloakService,
   ) {
-    setTimeout(() => this.pageEnv.set({pageId: 198}), 0);
+  }
 
-    this.auth
-      .getUser$()
-      .pipe(
-        map((user) => {
-          if (!user) {
-            this.keycloak.login({
-              locale: this.languageService.language,
-              redirectUri: window.location.href,
-            });
-            return EMPTY;
-          }
-          return user;
-        }),
-        switchMap(() => this.contactsService.getContacts$()),
-      )
-      .subscribe({
-        error: (response: unknown) => this.toastService.handleError(response),
-        next: (response) => {
-          this.items = response.items ? response.items : [];
-        },
-      });
+  ngOnInit(): void {
+    setTimeout(() => this.pageEnv.set({pageId: 198}), 0);
   }
 
   protected deleteContact(id: string) {
     this.contacts.deleteContact(new DeleteContactRequest({userId: id})).subscribe({
       error: (response: unknown) => this.toastService.handleError(response),
       next: () => {
-        for (let i = 0; i < this.items.length; i++) {
-          if (this.items[i].contactUserId === id) {
-            this.items.splice(i, 1);
-            break;
-          }
-        }
+        this.reload$.next(void 0);
       },
     });
     return false;

src/app/account/contacts/contacts.component.ts

@@ -3,7 +3,7 @@ <h1 i18n>Unmoderated</h1>
 </div>
 @if (data$ | async; as data) {
   <div class="row">
-    @for (picture of data.pictures; track picture) {
+    @for (picture of data.pictures; track picture.id) {
       <div class="col-12 cols-sm-6 col-md-6 col-lg-4">
         <app-thumbnail [picture]="picture" [route]="['/picture', picture.identity]"></app-thumbnail>
       </div>

src/app/account/inbox-pictures/inbox-pictures.component.html

@@ -18,7 +18,7 @@ <h1>{{ pageName }}</h1>
   }
 
   <div class="comments">
-    @for (message of data.items; track message) {
+    @for (message of data.items; track message.message.id) {
       <div class="message">
         @if (message.message.authorId !== '0') {
           @if (message.author$ | async; as author) {

src/app/account/messages/messages.component.html

@@ -52,7 +52,7 @@ <h2 i18n>Other</h2>
           [class.is-invalid]="settingsInvalidParams.language"
           [(ngModel)]="settings.language"
         >
-          @for (language of languages; track language) {
+          @for (language of languages; track language.value) {
             <option [value]="language.value">{{ language.name }}</option>
           }
         </select>

src/app/account/profile/profile.component.html

@@ -144,14 +144,14 @@
           </li>
           <li class="nav-item" ngbDropdown placement="bottom-right">
             <button href="#" class="nav-link" ngbDropdownToggle>
-              @for (lang of languages; track lang) {
+              @for (lang of languages; track lang.code) {
                 @if (lang.code === language) {
                   <i [ngClass]="lang.flag" aria-hidden="true"></i>
                 }
               }
             </button>
             <div ngbDropdownMenu>
-              @for (lang of languages; track lang) {
+              @for (lang of languages; track lang.code) {
                 <a
                   class="dropdown-item"
                   [href]="'//' + lang.hostname + urlPath"
@@ -245,7 +245,7 @@
         </div>
       </div>
       <p class="language-picker">
-        @for (lang of languages; track lang) {
+        @for (lang of languages; track lang.code) {
           @if (lang.code !== language) {
             <a [href]="'//' + lang.hostname + urlPath">
               <i [ngClass]="lang.flag" aria-hidden="true"></i>

src/app/app.component.html

@@ -13,7 +13,7 @@ <h1 i18n>Articles</h1>
 @if (articles$ | async; as response) {
   <div class="card card-body">
     <ul class="article-list">
-      @for (article of response.articles; track article) {
+      @for (article of response.articles; track article.id) {
         <li>
           @if (article.previewUrl) {
             <a [routerLink]="article.routerLink">