Fix: Timeframe Parameter Consistency on Navigation (#189)

ls1intum · Nov 25, 2024 · db7f35e · db7f35e
1 parent 91bd84d
commit db7f35e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 24 deletions.
diff --git a/webapp/src/app/home/home.component.ts b/webapp/src/app/home/home.component.ts
@@ -45,13 +45,13 @@ export class HomeComponent {
   });
 
   protected afterParam = computed(() => this.queryParams().get('after'));
-  protected beforeParam = computed(() => this.queryParams().get('before') ?? dayjs().format());
+  protected beforeParam = computed(() => this.queryParams().get('before'));
   protected teamParam = computed(() => this.queryParams().get('team') ?? 'all');
 
   query = injectQuery(() => ({
     enabled: !!this.metaQuery.data() && !!this.afterParam() && !!this.beforeParam() && !!this.teamParam(),
     queryKey: ['leaderboard', { after: this.afterParam(), before: this.beforeParam(), team: this.teamParam() }],
-    queryFn: async () => lastValueFrom(this.leaderboardService.getLeaderboard(this.afterParam()!, this.beforeParam(), this.teamParam() !== 'all' ? this.teamParam() : undefined))
+    queryFn: async () => lastValueFrom(this.leaderboardService.getLeaderboard(this.afterParam()!, this.beforeParam()!, this.teamParam() !== 'all' ? this.teamParam() : undefined))
   }));
 
   protected teams = computed(() => this.metaQuery.data()?.teams?.map((team) => team.name) ?? []);

diff --git a/webapp/src/app/home/leaderboard/filter/timeframe/timeframe.component.ts b/webapp/src/app/home/leaderboard/filter/timeframe/timeframe.component.ts
@@ -43,6 +43,7 @@ function formatLabel(weekIndex: number) {
 })
 export class LeaderboardFilterTimeframeComponent {
   private readonly route = inject(ActivatedRoute);
+  private router = inject(Router);
   private queryParams = toSignal(this.route.queryParamMap, { requireSync: true });
 
   metaService = inject(MetaService);
@@ -56,13 +57,12 @@ export class LeaderboardFilterTimeframeComponent {
     const timeParts = this.dateQuery.data()?.scheduledTime.split(':') ?? ['09', '00'];
     const hour = Number.parseInt(timeParts[0]);
     const minute = Number.parseInt(timeParts[1] ?? '0');
-    const full = dayjs().isoWeekday(day).startOf('hour').hour(hour).minute(minute);
+    const formatted = dayjs().isoWeekday(day).startOf('hour').hour(hour).minute(minute).format('dddd, h:mm A');
     return {
       day,
       hour,
       minute,
-      full,
-      formatted: full.format('dddd, h:mm A')
+      formatted
     };
   });
 
@@ -74,14 +74,20 @@ export class LeaderboardFilterTimeframeComponent {
     return defaultDate;
   }
 
-  after = computed(() => this.queryParams().get('after') ?? (this.leaderboardSchedule() ? this.getDefaultDate().format() : ''));
-  before = computed(() => this.queryParams().get('before') ?? dayjs().format());
+  after = computed(() =>
+    this.queryParams().get('after') && this.queryParams().get('after')!.length > 0
+      ? this.queryParams().get('after')
+      : this.leaderboardSchedule()
+        ? this.getDefaultDate().format()
+        : ''
+  );
+  before = computed(() => this.queryParams().get('before') ?? (this.leaderboardSchedule() ? this.getDefaultDate().add(1, 'week').format() : dayjs().format()));
   selectValue = signal<string>(`${this.after()}.${this.before()}`);
 
   formattedDates = computed(() => {
     const [startDate, endDate] = [dayjs(this.after()), dayjs(this.before())];
     const sameMonth = startDate.month() === endDate.month();
-    const endDateFormatted = endDate.isSame(dayjs(), 'hour') ? 'Now' : sameMonth ? endDate.format('D, h:mm A') : endDate.format('MMM D, h:mm A');
+    const endDateFormatted = endDate.isAfter(dayjs()) ? 'Now' : sameMonth ? endDate.format('D, h:mm A') : endDate.format('MMM D, h:mm A');
     if (sameMonth) {
       return `${startDate.format('MMM D, h:mm A')} - ${endDateFormatted}`;
     } else {
@@ -97,15 +103,12 @@ export class LeaderboardFilterTimeframeComponent {
   });
 
   options = computed(() => {
-    const now = dayjs();
-    let currentDate = dayjs().isoWeekday(this.leaderboardSchedule().day).startOf('hour').hour(this.leaderboardSchedule().hour).minute(this.leaderboardSchedule().minute);
-    if (currentDate.isAfter(now)) {
-      currentDate = currentDate.subtract(1, 'week');
-    }
+    let currentDate = this.getDefaultDate();
+    let endDate = currentDate.add(1, 'week');
     const options: SelectOption[] = [
       {
-        id: now.unix(),
-        value: `${currentDate.format()}.${now.format()}`,
+        id: endDate.unix(),
+        value: `${currentDate.format()}.${endDate.format()}`,
         label: formatLabel(0)
       }
     ];
@@ -123,19 +126,33 @@ export class LeaderboardFilterTimeframeComponent {
     return options;
   });
 
-  constructor(private router: Router) {
+  constructor() {
     // persist date changes in url
     effect(() => {
-      if (this.selectValue().length === 1) return;
+      this.persistDateChange();
+    });
 
-      const queryParams = this.router.parseUrl(this.router.url).queryParams;
-      const dates = this.selectValue().split('.');
-      queryParams['after'] = dates[0];
-      queryParams['before'] = dates[1];
+    // make sure navigation to the page sets the default date
+    this.route.queryParams.subscribe((params) => {
+      if (!params['after'] && !params['before']) {
+        this.selectValue.set(this.options()[0].value);
+        this.persistDateChange();
+      }
+    });
+  }
 
-      this.router.navigate([], {
-        queryParams
-      });
+  protected persistDateChange() {
+    if (this.selectValue().length === 1) return;
+
+    const queryParams = this.router.parseUrl(this.router.url).queryParams;
+    const dates = this.selectValue().split('.');
+    if (dates.length !== 2) return;
+
+    queryParams['after'] = dates[0];
+    queryParams['before'] = dates[1];
+
+    this.router.navigate([], {
+      queryParams
     });
   }
 }