From ad71f1611fc661afe8654d67f11bd66a2a3427d9 Mon Sep 17 00:00:00 2001 From: GODrums Date: Fri, 20 Sep 2024 11:59:29 +0200 Subject: [PATCH] Use signals for after and before --- webapp/src/app/home/home.component.ts | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/webapp/src/app/home/home.component.ts b/webapp/src/app/home/home.component.ts index 4d69bcbe..309f810f 100644 --- a/webapp/src/app/home/home.component.ts +++ b/webapp/src/app/home/home.component.ts @@ -1,9 +1,10 @@ -import { Component, inject } from '@angular/core'; +import { Component, computed, inject } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { injectQuery } from '@tanstack/angular-query-experimental'; import { LeaderboardService } from 'app/core/modules/openapi/api/leaderboard.service'; import { LeaderboardComponent } from 'app/home/leaderboard/leaderboard.component'; import { lastValueFrom } from 'rxjs'; +import { toSignal } from '@angular/core/rxjs-interop'; @Component({ selector: 'app-home', @@ -16,19 +17,14 @@ export class HomeComponent { // timeframe for leaderboard // example: 2024-09-19T10:15:30+01:00 - protected after: string | undefined = undefined; - protected before: string | undefined = undefined; - - constructor() { - inject(ActivatedRoute).queryParamMap.subscribe((params) => { - this.after = params.get('after')?.replace(' ', '+') ?? undefined; - this.before = params.get('before')?.replace(' ', '+') ?? undefined; - }); - } + private readonly route = inject(ActivatedRoute); + private queryParams = toSignal(this.route.queryParamMap, { requireSync: true }); + protected after = computed(() => this.queryParams().get('after')?.replace(' ', '+') ?? undefined); + protected before = computed(() => this.queryParams().get('before')?.replace(' ', '+') ?? undefined); query = injectQuery(() => ({ queryKey: ['leaderboard', { after: this.after, before: this.before }], - queryFn: async () => lastValueFrom(this.leaderboardService.getLeaderboard(this.before, this.after)), + queryFn: async () => lastValueFrom(this.leaderboardService.getLeaderboard(this.before(), this.after())), gcTime: Infinity })); }