Skip to content

Commit

Permalink
Move to Signal and remove useless Subject
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rebolon
Rebolon committed Dec 25, 2023
1 parent 8c004e1 commit da923c2
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 87 deletions.
82 changes: 41 additions & 41 deletions src/app/components/list-authors/list-authors.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import { AsyncPipe, NgClass, NgPlural, NgPluralCase } from '@angular/common';
import { Component } from '@angular/core';
import { NgClass, NgPlural, NgPluralCase } from '@angular/common';
import { Component, computed, signal } from '@angular/core';
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
import { Title } from '@angular/platform-browser';
import { RouterLink } from '@angular/router';
import {
BehaviorSubject,
Observable,
Subject,
map,
mergeWith,
startWith,
switchMap,
tap
} from 'rxjs';
import { AuthorI } from '../../models/Authors';
import { Author, AuthorI } from '../../models/Authors';
import { Authors } from '../../services/Cites/Authors';
import { Device } from '../../tools/Device';
import { BasePaginatedComponent } from '../common/BasePaginatedComponent';
Expand All @@ -23,20 +24,20 @@ import { PagerComponent } from '../pager/pager.component';
<div class="container mb-36">
<h1
class="text-3xl font-bold text-stone-900 mb-2"
[ngPlural]="(authorsCount$ | async) ?? 0"
>
[ngPlural]="authorsCount()">
<ng-template ngPluralCase="=0">0 Auteur.</ng-template>
<ng-template ngPluralCase="=1">1 Auteur.</ng-template>
<ng-template ngPluralCase="other"
>{{ authorsCount$ | async }} Auteurs.</ng-template>
>{{ authorsCount() }} Auteurs.</ng-template
>
</h1>
<button
[ngClass]="{
'font-semibold': (isSortByText() | async) === true,
'font-normal': (isSortByText() | async) === false
'font-semibold': isSortByText() === true,
'font-normal': isSortByText() === false
}"
[disabled]="isSortByText() | async"
[disabled]="isSortByText()"
(click)="sortByAuthor()"
class="bg-gray-100 text-violet-800 text-xs inline-flex items-center px-2.5 py-0.5 rounded-full mr-2"
title="Trier par nom"
Expand All @@ -46,10 +47,10 @@ import { PagerComponent } from '../pager/pager.component';
<button
[ngClass]="{
'font-semibold': (isSortByTotal() | async),
'font-normal': (isSortByTotal() | async)
'font-semibold': isSortByTotal(),
'font-normal': isSortByTotal()
}"
[disabled]="isSortByTotal() | async"
[disabled]="isSortByTotal()"
(click)="sortByCount()"
class="bg-gray-100 text-violet-800 text-xs inline-flex items-center px-2.5 py-0.5 rounded-full"
title="Trier par total de citations"
Expand All @@ -58,10 +59,7 @@ import { PagerComponent } from '../pager/pager.component';
</button>
<ul class="list-none">
@for (
item of displayedPaginatedAuthors$ | async;
track item.getName()
) {
@for (item of displayedPaginatedAuthors(); track item.getName()) {
<li class="p-1">
<a routerLink="/authors/{{ item.getName() }}"
>{{ item.getName() }} <small>({{ item.getCount() }})</small></a
Expand All @@ -78,7 +76,7 @@ import { PagerComponent } from '../pager/pager.component';
id="bottom-navigation"
>
<app-pager
[list]="(authors$ | async) ?? []"
[list]="authors()"
[options]="{ itemPerPage: getItemsPerPage() }"
(paginatedList$)="setPaginatedList($event)"
></app-pager>
Expand All @@ -87,18 +85,14 @@ import { PagerComponent } from '../pager/pager.component';
</div>
`,
standalone: true,
imports: [
NgClass,
NgPlural,
NgPluralCase,
RouterLink,
PagerComponent,
AsyncPipe,
],
imports: [NgClass, NgPlural, NgPluralCase, RouterLink, PagerComponent],
})
export class ListAuthorsComponent extends BasePaginatedComponent {
protected sort$: BehaviorSubject<string> = new BehaviorSubject('text');
protected authors$: Observable<AuthorI[]> = this.sort$.asObservable().pipe(
private sort = signal<'text' | 'total'>('text');
protected readonly isSortByText = computed(() => this.sort() === 'text');
protected readonly isSortByTotal = computed(() => this.sort() === 'total');
protected authors = signal([] as AuthorI[]);
private authors$: Observable<AuthorI[]> = toObservable(this.sort).pipe(
switchMap((sort) =>
sort === 'text'
? this.authorService.authors$
Expand All @@ -116,16 +110,24 @@ export class ListAuthorsComponent extends BasePaginatedComponent {
),
),
),
tap((authors) => this.authors.set(authors)),
takeUntilDestroyed(),
);
protected authorsCount$: Observable<number> = this.authors$.pipe(
protected authorsCount = signal(0);
private authorsCount$: Observable<number> = this.authors$.pipe(
map((authors) => authors.length),
startWith(0),
tap((count) => this.authorsCount.set(count)),
takeUntilDestroyed(),
);
private pagerPaginatedAuthors$: Subject<AuthorI[]> = new Subject();
protected displayedPaginatedAuthors$: Observable<AuthorI[]> =
protected displayedPaginatedAuthors = signal([] as AuthorI[]);
private displayedPaginatedAuthors$: Observable<AuthorI[]> =
this.authors$.pipe(
mergeWith(this.pagerPaginatedAuthors$),
map((authors) => authors.slice(0, this.itemsPerPage)),
tap((authors) => this.displayedPaginatedAuthors.set(authors)),
takeUntilDestroyed(),
);
protected override currentPage!: number;
protected override itemsPerPage = 11;
Expand All @@ -140,25 +142,23 @@ export class ListAuthorsComponent extends BasePaginatedComponent {
if (device.isMobile()) {
this.itemsPerPage = 8;
}
}

isSortByText(): Observable<boolean> {
return this.sort$.pipe(map((sort) => sort === 'text'));
}

isSortByTotal(): Observable<boolean> {
return this.sort$.pipe(map((sort) => sort === 'total'));
this.authors$.subscribe();
this.authorsCount$.subscribe();
this.displayedPaginatedAuthors$.subscribe();
}

sortByAuthor(): void {
this.sort$.next('text');
this.sort.set('text');
}

sortByCount(): void {
this.sort$.next('total');
this.sort.set('total');
}

setPaginatedList(ev: unknown[]): void {
this.pagerPaginatedAuthors$.next(ev as AuthorI[]);
// To prevent this check, maybe use Type
if (ev[0] && (ev[0] instanceof Author || !ev[0])) {
this.pagerPaginatedAuthors$.next(ev as AuthorI[]);
}
}
}
64 changes: 46 additions & 18 deletions src/app/components/list-cites-by-authors/list-cites-by-authors.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
/* eslint-disable prettier/prettier */
import { AsyncPipe, NgPlural, NgPluralCase } from '@angular/common';
import { Component, Input } from '@angular/core';
import { NgPlural, NgPluralCase } from '@angular/common';
import { Component, Input, signal } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Observable, ReplaySubject, Subject, map, mergeWith, startWith, switchMap } from 'rxjs';
import { CiteI } from '../../models/Cite';
import { Observable, ReplaySubject, Subject, map, mergeWith, startWith, switchMap, tap } from 'rxjs';
import { Cite, CiteI } from '../../models/Cite';
import { Cites } from '../../services/Cites';
import { Device } from '../../tools/Device';
import { BasePaginatedComponent } from '../common/BasePaginatedComponent';
import { PagerComponent } from '../pager/pager.component';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
selector: 'app-list-cites-by-authors',
template: `
<div class="container mb-36">
@if (author$ | async; as author) {
@if (authorOfCites(); as author) {
<h1
[ngPlural]="(citesCount$ | async) ?? 0"
[ngPlural]="citesCount()"
class="text-3xl font-bold text-stone-900 mb-2"
>
<ng-template ngPluralCase="=0"
Expand All @@ -25,13 +26,13 @@ import { PagerComponent } from '../pager/pager.component';
>1 citation de "{{ author }}":&nbsp;</ng-template
>
<ng-template ngPluralCase="other"
>{{ citesCount$ | async }} citations de "{{ author }}":&nbsp;</ng-template
>{{ citesCount() }} citations de "{{ author }}":&nbsp;</ng-template
>
</h1>
}
<ul class="list-none">
@for (item of displayedPaginatedCites$ | async; track item.getId()) {
@for (item of displayedPaginatedCites(); track item.getId()) {
<li
class="p-1"
>
Expand All @@ -48,7 +49,7 @@ import { PagerComponent } from '../pager/pager.component';
id="bottom-navigation"
>
<app-pager
[list]="(cites$ | async) ?? []"
[list]="cites()"
[options]="{ itemPerPage: getItemsPerPage() }"
(paginatedList$)="setPaginatedList($event)"
></app-pager>
Expand All @@ -57,23 +58,43 @@ import { PagerComponent } from '../pager/pager.component';
</div>
`,
standalone: true,
imports: [AsyncPipe, NgPlural, NgPluralCase, PagerComponent],
imports: [NgPlural, NgPluralCase, PagerComponent],
})
export class ListCitesByAuthorsComponent
extends BasePaginatedComponent
{
@Input({ required: true })
set author(author: string) {
if (!author) {
author = '';
}
this.authorOfCites.set(author);
this.author$.next(author);
};
author$: ReplaySubject<string> = new ReplaySubject(1);
cites$: Observable<CiteI[]> = this.author$.pipe(switchMap((author) => this.citeService.searchByAuthor(author)), startWith([]));
citesCount$: Observable<number> = this.cites$.pipe(map((cites) => cites.length), startWith(0));
pagerPaginatedCites$: Subject<CiteI[]> = new Subject();
displayedPaginatedCites$: Observable<CiteI[]> = this.cites$.pipe(
protected authorOfCites = signal('');
private author$: ReplaySubject<string> = new ReplaySubject(1);
protected cites = signal([] as CiteI[]);
private cites$: Observable<CiteI[]> = this.author$.pipe(
switchMap((author) => this.citeService.searchByAuthor(author)),
startWith([]),
tap((cites) => this.cites.set(cites)),
takeUntilDestroyed(),
);
protected citesCount = signal(0);
private citesCount$: Observable<number> = this.cites$.pipe(
map((cites) => cites.length),
startWith(0),
tap((count) => this.citesCount.set(count)),
takeUntilDestroyed(),
);
private pagerPaginatedCites$: Subject<CiteI[]> = new Subject();
protected displayedPaginatedCites = signal([] as CiteI[]);
private displayedPaginatedCites$: Observable<CiteI[]> = this.cites$.pipe(
mergeWith(this.pagerPaginatedCites$),
map((cites) => cites.slice(0, this.itemsPerPage)
));
map((cites) => cites.slice(0, this.itemsPerPage)),
tap((cites) => this.displayedPaginatedCites.set(cites)),
takeUntilDestroyed(),
);

constructor(
public citeService: Cites,
Expand All @@ -86,9 +107,16 @@ export class ListCitesByAuthorsComponent
if (device.isMobile()) {
this.itemsPerPage = 4;
}

this.cites$.subscribe();
this.citesCount$.subscribe();
this.displayedPaginatedCites$.subscribe();
}

setPaginatedList(ev: unknown[]): void {
this.pagerPaginatedCites$.next(ev as CiteI[]);
// To prevent this check, maybe use Type
if (ev[0] && (ev[0] instanceof Cite || !ev[0])) {
this.pagerPaginatedCites$.next(ev as CiteI[]);
}
}
}
Loading

0 comments on commit da923c2

Please sign in to comment.