Socks shop #14
Socks shop #14
Conversation
| export class ShopComponent implements OnInit{ | ||
| totalItems = 100; | ||
| pageSize = 8; | ||
| currentPage = 0; |
There was a problem hiding this comment.
In een prod applicatie zou ik hier ook een apart component van maken
class Paginator {
@Output() pageChanged = new EventEmitter<PaginationInfo>();
}
Je wil paginatie toevoegen aan de SocksShop, maar later ook op de ReviewsPage en op de UsersPage en op de ...
Maar je wil de paginatie code niet elke keer gaan herhalen!
vb:
class PagedItemComponent {}
Dit is al iets ingewikkelder, je zal vb met een slot moeten werken: <ng-content></ng-content>
Grote voordeel:
Je ShopComponent begaat geen SRP violations: nu gaat de ShopComponent paginatie code bevatten, en later ook Filter code, en sorteer code etc...
En je kan het hergebruiken voor alles waardoor je bugfixes (off by 1 errors?) en changes (de paginatie buttons moeten anders gepositioneed & gestyled worden) maar op 1 plaats moet doen
| pageSize = 8; | ||
| currentPage = 0; | ||
| socks$!: Observable<Sock[]>; | ||
| socks: Sock[] = []; |
There was a problem hiding this comment.
Avoid fields in components.
Het is hier ook niet meer super duidelijk dat socks enkel een bepaalde pagina van socks bevat.
Definieer meerdere Observables:
socks$!: Observable<Sock[]>;
totalCount$ = this.socks$.pipe(map(socks => socks.length))
pagedSocks = combineLatest([this.socks$, this.pagination$]).pipe(map(([socks, pagination]) => socks.slice(...));
| this.socks$.pipe(last()) | ||
| .subscribe(allSocks => { | ||
| this.socks = this.getSocksPage(allSocks, this.currentPage, this.pageSize) | ||
| }) |
There was a problem hiding this comment.
Omwille van de .subscribe introduceer je namelijk subtiele fouten
Na een page change ga je hier opnieuw de http call uitvoeren.
Als er sindsdien een sock toegevoegd is, dan is de totalCount daarna incorrect!
2 participants
No description provided.