add shikimori graphql types for user rates

Author: Smarthard

package-lock.json

@@ -71,11 +71,11 @@
         "@ngrx/store": "^19.0.0",
         "date-fns": "^4.1.0",
         "deep-object-diff": "^1.1.9",
+        "fflate": "^0.8.2",
         "ionicons": "^8.0.8",
         "ngrx-store-localstorage": "19.0.0",
         "ngx-scrollbar": "^18.0.0",
         "ngx-tippy-wrapper": "^6.3.0",
-        "ngx-visibility": "2.0.0",
         "ngxtension": "^5.1.0",
         "rxjs": "~7.8.1",
         "tslib": "^2.6.2"
@@ -134,4 +134,4 @@
         "typescript": "~5.8.3",
         "webpack": "^5.89.0"
     }
-}
+}

package.json

@@ -1,11 +1,8 @@
-<div
-    class="anime-rate-section__label"
-    (ngxVisibility)="onSectionVisible($event)"
->
+<div class="anime-rate-section__label">
     <ion-text class="anime-rate-section__text">
         {{ label() | transloco | uppercase }}
 
-        @if (isLoaded()) {
+        @if (!isRatesLoading()) {
             <span class="anime-rate-section__counter">({{ ratesCount() }})</span>
         }
     </ion-text>
@@ -28,6 +25,7 @@
     class="anime-rate-section__grid"
     [class.ion-hide]="isHidden()"
     [userAnimeRates]="rates()"
-    [isLoading]="!isLoaded()"
-    (ngxVisibility)="onSectionVisible($event)"
+    [ratesMetadata]="ratesMetadata()"
+    [isRatesLoading]="isRatesLoading()"
+    [isMetaLoading]="isMetaLoading()"
 />

src/app/modules/home/components/anime-rate-section/anime-rate-section.component.html

@@ -7,17 +7,16 @@ import {
     output,
 } from '@angular/core';
 import { IonButton, IonIcon, IonText } from '@ionic/angular/standalone';
-import { NgxVisibilityDirective } from 'ngx-visibility';
 import { TranslocoPipe } from '@jsverse/transloco';
 import { UpperCasePipe } from '@angular/common';
 
+import { AnimeRatesMetadata } from '@app/modules/home/store/anime-rates';
 import { CardGridComponent } from '@app/modules/home/components/card-grid';
-import { UserAnimeRate } from '@app/shared/types/shikimori/user-anime-rate';
+import { UserBriefRateInterface } from '@app/shared/types/shikimori';
 
 @Component({
     selector: 'app-anime-rate-section',
     imports: [
-        NgxVisibilityDirective,
         TranslocoPipe,
         IonIcon,
         IonButton,
@@ -32,31 +31,28 @@ import { UserAnimeRate } from '@app/shared/types/shikimori/user-anime-rate';
     host: {
         'class': 'anime-rate-section',
         '[id]': 'status()',
-        '[class.ion-hide]': 'isSectionHidden(isLoaded(), rates())',
+        '[class.ion-hide]': 'isSectionHidden(!isRatesLoading(), rates())',
     },
 })
 export class AnimeRateSectionComponent {
     label = input.required<string>();
     status = input.required<string>();
-    rates = input.required<UserAnimeRate[]>();
+    rates = input.required<UserBriefRateInterface[]>();
+    ratesMetadata = input.required<AnimeRatesMetadata>();
+
     isHidden = input(false);
-    isLoaded = input(false);
+    isRatesLoading = input(true);
+    isMetaLoading = input(true);
 
     visible = output();
     toggleHidden = output();
 
     ratesCount = computed(() => this.rates()?.length || 0);
 
-    isSectionHidden(isLoaded: boolean, rates: UserAnimeRate[]): boolean {
+    isSectionHidden(isLoaded: boolean, rates: UserBriefRateInterface[]): boolean {
         return isLoaded && !rates?.length;
     }
 
-    onSectionVisible(isVisible: boolean): void {
-        if (isVisible) {
-            this.visible.emit();
-        }
-    }
-
     onToggleHidden(): void {
         this.toggleHidden.emit();
     }

src/app/modules/home/components/anime-rate-section/anime-rate-section.component.ts

@@ -15,37 +15,48 @@
     />
 </a>
 
-@if (isLoading) {
+@if (isLoading() || isMetaLoading()) {
     <app-skeleton-block
-        class="card-grid-item__name card-grid-item__name--skeleton"
-        [height]="'33px'"
-        [width]="width()"
+        class="card-grid-item__name"
+        height="1.08rem"
+        width="100%"
+        borderRadius="0.25rem"
     />
-}
 
-<h2
-    class="card-grid-item__name"
-    [class.ion-hide]="isLoading"
-    [ngxTippy]="name()"
-    [tippyProps]="{
-        'placement': 'top'
-    }"
-    [ngStyle]="{
-        'max-width': width()
-    }"
->
-    {{ name() }}
-</h2>
+    <div class="card-grid-item__other-info card-grid-item__other-info--skeleton">
+        <app-skeleton-block
+            height="0.8625rem"
+            width="3rem"
+            borderRadius="0.25rem"
+        />
 
-<footer
-    class="card-grid-item__other-info"
-    [class.ion-hide]="isLoading"
->
-    @if (kind()) {
-        <span>{{ 'GLOBAL.SHIKIMORI.ANIME_KINDS.' + (kind() | uppercase) | transloco }}</span>
-    }
+        <app-skeleton-block
+            height="0.8625rem"
+            width="2.5rem"
+            borderRadius="0.25rem"
+        />
+    </div>
+} @else {
+    <h2
+        class="card-grid-item__name"
+        [ngxTippy]="name()"
+        [tippyProps]="{
+            'placement': 'top'
+        }"
+        [ngStyle]="{
+            'max-width': width()
+        }"
+    >
+        {{ name() }}
+    </h2>
 
-    @if (releaseDate()) {
-        <time [dateTime]="releaseDate()">{{ releaseDate() | date: 'YYYY' }}</time>
-    }
-</footer>
+    <footer class="card-grid-item__other-info">
+        @if (kind()) {
+            <span>{{ 'GLOBAL.SHIKIMORI.ANIME_KINDS.' + (kind() | uppercase) | transloco }}</span>
+        }
+
+        @if (releaseDate()) {
+            <time [dateTime]="releaseDate()">{{ releaseDate() | date: 'YYYY' }}</time>
+        }
+    </footer>
+}

src/app/modules/home/components/card-grid-item/card-grid-item.component.html

@@ -3,6 +3,8 @@
 .card-grid-item {
     display: flex;
     flex-direction: column;
+    // скрываем alt текст для картинок на фоне (т.к. он всё равно заблюрен)
+    font-size: 0;
 
     :focus {
         outline: 0.25rem solid var(--ion-color-primary);
@@ -24,9 +26,14 @@
         display: flex;
         flex-direction: row;
         justify-content: space-between;
+
+        &--skeleton {
+            margin-top: 1px;
+        }
     }
 
     .wrapper {
         display: contents;
+        position: relative;
     }
 }

src/app/modules/home/components/card-grid-item/card-grid-item.component.scss

@@ -46,5 +46,7 @@ export class CardGridItemComponent extends AbstractImageCardComponent {
 
     link = input('#');
 
+    isMetaLoading = input(true);
+
     mouseOver = false;
 }

src/app/modules/home/components/card-grid-item/card-grid-item.component.ts

@@ -1,19 +1,22 @@
 @if (userAnimeRates()?.length) {
-    @for (rate of userAnimeRates(); track $index) {
+    @for (rate of userAnimeRates(); track trackById($index, rate)) {
+        @let animeId = rate.target_id;
+
         <app-card-grid-item
             class="anime-grid__item"
             height="100%"
             width="auto"
-            [link]="rate.anime | getPlayerLink"
-            [imageUrl]="rate.anime?.image?.original"
-            [name]="rate.anime | getAnimeName: currentLang()"
-            [kind]="rate.anime.kind"
-            [releaseDate]="rate.anime.released_on || rate.anime.aired_on"
+            [link]="animeId | getPlayerLink"
+            [imageUrl]="animeId | getAnimePoster: ratesMetadata()"
+            [name]="animeId | getAnimeName: currentLang(): ratesMetadata()"
+            [kind]="animeId | getAnimeKind: ratesMetadata()"
+            [releaseDate]="animeId | getAnimeReleaseDate: ratesMetadata()"
+            [isMetaLoading]="isMetaLoading()"
         />
-    }
-
-    @if (isLoading()) {
-        <ng-container [ngTemplateOutlet]="skeletonTemplate" />
+    } @empty {
+        @if (isRatesLoading()) {
+            <ng-container [ngTemplateOutlet]="skeletonTemplate" />
+        }
     }
 } @else {
     <ng-container [ngTemplateOutlet]="skeletonTemplate" />
@@ -42,14 +45,14 @@
                         class="skeleton-item__text"
                         height="0.8625rem"
                         width="3rem"
-                    borderRadius="0.25rem"
+                        borderRadius="0.25rem"
                     />
 
                     <app-skeleton-block
                         class="skeleton-item__text"
                         height="0.8625rem"
                         width="2.5rem"
-                    borderRadius="0.25rem"
+                        borderRadius="0.25rem"
                     />
                 </div>
             </div>

src/app/modules/home/components/card-grid/card-grid.component.html

@@ -1,7 +1,6 @@
 import {
     ChangeDetectionStrategy,
     Component,
-    HostBinding,
     ViewEncapsulation,
     inject,
     input,
@@ -11,12 +10,19 @@ import { RepeatPipe } from 'ngxtension/repeat-pipe';
 import { TranslocoService } from '@jsverse/transloco';
 import { toSignal } from '@angular/core/rxjs-interop';
 
+import { AnimeRatesMetadata } from '@app/modules/home/store/anime-rates';
 import { CardGridItemComponent } from '@app/modules/home/components/card-grid-item/card-grid-item.component';
-import { GetAnimeNamePipe } from '@app/shared/pipes/get-anime-name/get-anime-name.pipe';
+import {
+    GetAnimeKindPipe,
+    GetAnimeNamePipe,
+    GetAnimePosterPipe,
+    GetAnimeReleaseDatePipe,
+} from '@app/modules/home/pipes';
 import { GetPlayerLinkPipe } from '@app/shared/pipes/get-player-link/get-player-link.pipe';
 import { SkeletonBlockComponent } from '@app/shared/components/skeleton-block/skeleton-block.component';
-import { UserAnimeRate } from '@app/shared/types/shikimori/user-anime-rate';
+import { UserBriefRateInterface } from '@app/shared/types/shikimori';
 import { provideShikimoriImageLoader } from '@app/shared/providers/shikimori-image-loader.provider';
+import { trackById } from '@app/shared/utils/common-ngfor-tracking';
 
 @Component({
     selector: 'app-card-grid',
@@ -29,22 +35,26 @@ import { provideShikimoriImageLoader } from '@app/shared/providers/shikimori-ima
         GetPlayerLinkPipe,
         GetAnimeNamePipe,
         RepeatPipe,
+        GetAnimePosterPipe,
+        GetAnimeKindPipe,
+        GetAnimeReleaseDatePipe,
     ],
     providers: [
         provideShikimoriImageLoader(96),
     ],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
+    host: { class: 'anime-grid' },
 })
 export class CardGridComponent {
-    @HostBinding('class.anime-grid')
-    private animeGridClass = true;
-
     private readonly _transloco = inject(TranslocoService);
 
+    readonly trackById = trackById;
     readonly currentLang = toSignal(this._transloco.langChanges$);
 
-    userAnimeRates = input<UserAnimeRate[]>();
+    userAnimeRates = input.required<UserBriefRateInterface[]>();
+    ratesMetadata = input.required<AnimeRatesMetadata>();
 
-    isLoading = input<boolean>();
+    isRatesLoading = input(true);
+    isMetaLoading = input(true);
 }

src/app/modules/home/components/card-grid/card-grid.component.ts

@@ -1,15 +1,19 @@
 <ion-content [fullscreen]="true" class="page-content ion-padding">
     @for (status of animeStatusOrder(); track status) {
-        @let grid = animeGridMap.get(status);
+        @let userRatesForStatus = userAnimeRatesWithRecent() | filterRatesByStatus: status;
+        @let sortedUserRates = status === 'recent'
+            ? (userRatesForStatus | slice: 0: 6 | sortRatesByDateVisited)
+            : (userRatesForStatus | sortRatesByUserScore: ratesMetadata(): 'original': false);
 
         <app-anime-rate-section
             class="home-page__anime-rates"
             [label]="'HOME_MODULE.HOME_PAGE.GRIDS.' + (status | uppercase)"
             [status]="status"
-            [rates]="grid.rates | async"
-            [isLoaded]="grid.isLoaded | async"
+            [rates]="sortedUserRates"
+            [ratesMetadata]="ratesMetadata()"
+            [isRatesLoading]="isRatesLoading()"
+            [isMetaLoading]="isMetadataLoading()"
             [isHidden]="getHiddenGridStatus(status)"
-            (visible)="onSectionVisibilityChange(status)"
             (toggleHidden)="toggleHiddenGridStatus(status)"
         />
     }